js命名空间写法示例代码-js教程-PHP中文网

js命名空间写法示例代码

怪我咯

发布： 2017-07-07 15:09:11

原创

1622人浏览过

这篇文章主要介绍了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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/10807">
                            <img src="https://img.php.cn/upload/webcode/000/000/016/176381100671596.jpg" alt="非常淘 淘宝客源码">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/10807">非常淘 淘宝客源码</a>
                            <p>本源码是我用过最好的淘客站源码。对于新站长很用帮助。重要!!注意上传完程序后要先登陆后台修改域名，否则会跳转到后台已设置的域名。 使用方法1:将文件夹里面的文件上传至您的空间根目录(不要在本地测试，本地测试期间功能将被限制，首页模板显示不正常!)2:访问网址http://您的网址/admin 账号:admin 密码:admin3:填写您基本网站信息,以及重要的淘客相关信息 声明：本程序使用权是本人</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="非常淘 淘宝客源码">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/10807" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="非常淘 淘宝客源码">
                        </a>
                    </div>
                
   <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:'';}
.cleafix{zoom:1;}

登录后复制

js代码：

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

登录后复制

以上就是js命名空间写法示例代码的详细内容，更多请关注php中文网其它相关文章！