> 웹 프론트엔드 > JS 튜토리얼 > Node.js 네임스페이스 작성 예제 코드

Node.js 네임스페이스 작성 예제 코드

怪我咯
풀어 주다: 2017-07-07 15:09:11
원래의
1474명이 탐색했습니다.

이 글은 jsnamespace의 작성 방법을 주로 소개하며, 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();
로그인 후 복사
를 알아야 합니다.

위 내용은 Node.js 네임스페이스 작성 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿