js命名空间写法示例

本文实例分析了js命名空间写法。分享给大家供大家参考，具体如下：

很早知道这种写法，由于基础面向对象不够扎实一直在回避，但是面对整站这种方法还是有必要会

html部分：

<div id="div1">111</div>

<div id="div2">现实</div>

<div id="div3">层</div>

<div class="tab">

<ul class="tab_nav clearfix">

<li class="active">1</li>

<li>2</li>

<li>3</li>

</ul>

<div class="tab_main">

<div style="display: block">内容1</div>

<div>内容2</div>

<div>内容3</div>

</div>

</div>

css样式：

#div1{width: 100px;height: 100px;background: #ccc;}

#div2{width:100px;height: 20px;background: red;}

#div3{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:$('#div1'),

hideFun:function() {

var that=this;

var a=this.hideBtn;

a.click(function() {

$(this).hide();

});

}

};

namespace.show={

showBtn:$('#div2'),

showBox:$('#div3'),

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 div'),

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();

希望本文所述对大家JavaScript程序设计有所帮助。