js 名前空間の記述例コード

怪我咯
リリース: 2017-07-07 15:09:11
オリジナル
1464 人が閲覧しました

この記事は主に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 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート