首頁  >  文章  >  web前端  >  js命名空間寫法範例程式碼

js命名空間寫法範例程式碼

怪我咯
怪我咯原創
2017-07-07 15:09:111435瀏覽

這篇文章主要介紹了js命名空間寫法,以完整實例形式分析了JavaScript命名空間的寫法,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例分析了js命名空間寫法。分享給大家供大家參考,具體如下:

很早知道這種寫法,由於基礎物件導向不夠紮實一直在迴避,但是面對整站這種方法還是有必要會

html部分:

<p id="p1">111</p>
<p id="p2">现实</p>
<p id="p3">层</p>
<p class="tab">
  <ul class="tab_nav clearfix">
   <li class="active">1</li>
   <li>2</li>
   <li>3</li>
  </ul>
  <p class="tab_main">
   <p style="display: block">内容1</p>
   <p>内容2</p>
   <p>内容3</p>
  </p>
</p>

css樣式:

#p1{width: 100px;height: 100px;background: #ccc;}
#p2{width:100px;height: 20px;background: red;}
#p3{width: 300px;height: 200px;border: 1px solid #ccc;position: absolute;;margin-left: -150px;margin-top:-100px;left:50%;top: 50%;display: none;}
li{width: 100px;float: left;background: #ccc;}
.active{background: red;}
.tab_main{display: none;}
.clearfix:after{clear: both;display: table;content:&#39;&#39;;}
.cleafix{zoom:1;}

js程式碼:

var namespace={
 int:function(){
  this.hide.hideFun();
  this.show.showFun();
  this.tab.tabFun();
 }
};
namespace.hide={
 hideBtn:$(&#39;#p1&#39;),
 hideFun:function() {
  var that=this;
  var a=this.hideBtn;
  a.click(function() {
   $(this).hide();
  });
 }
};
namespace.show={
 showBtn:$(&#39;#p2&#39;),
 showBox:$(&#39;#p3&#39;),
 showFun:function(){
  var that=this;
  var a=this.showBtn;
  var b=this.showBox;
  a.click(function(event) {
   b.show();
  });
 }
}
namespace.tab={
 tabBtn:$(&#39;.tab_nav li&#39;),
 tabCon:$(&#39;.tab_main p&#39;),
 tabFun:function(){
  var that=this;
  var a=this.tabBtn;
  var b=this.tabCon;
  a.click(function() {
   $(this).addClass(&#39;active&#39;).siblings().removeClass(&#39;active&#39;);
   b.eq($(this).index()).show().siblings().hide();
  });
 }
}
namespace.int();

以上是js命名空間寫法範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn