Js namespace writing example _ javascript skills

This article mainly introduces how to write JavaScript namespaces. It analyzes how to write JavaScript namespaces in the form of a complete example, which has some reference value, for more information about js namespace writing, see the examples in this article. We will share this with you for your reference. The details are as follows:

I knew this method very early, and I have been avoiding it because the basic object-oriented method is not solid enough. However, it is still necessary for the whole site method

Html section:

111
Reality
Layer
  
 
 
   
  
  
1
   
  
  
2
   
  
  
3
  
 
 
  
   
Content 1
   
Content 2
   
Content 3
  

Css style:

#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 Code:

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

I hope this article will help you design JavaScript programs.