js命名空间写法示例

 更新时间:2015年12月18日 12:00:34   作者:leejersey  
这篇文章主要介绍了js命名空间写法,以完整实例形式分析了JavaScript命名空间的写法,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例分析了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程序设计有所帮助。

相关文章

  • JS使用canvas实现基本的截图功能

    JS使用canvas实现基本的截图功能

    这篇文章主要给大家介绍了使用JS中的canvas实现基本的截图功能,文中有详细的实现思路和实现过程,文章通过代码示例讲解的非常详细,很感兴趣的同学可以参考一下
    2023-08-08
  • JS实现数组扁平化的方法总结

    JS实现数组扁平化的方法总结

    数组扁平化相信不少朋友在一些面试中被问到过,这在我们日常编程中也是一个常规操作,它需要我们将一个多维数组转化成一个一维数组,所以,借着这篇文章,我们今天就一起来汇总一下几种数组扁平化的方式,需要的朋友可以参考下
    2024-02-02
  • 微信小程序movable-view的可移动范围示例详解

    微信小程序movable-view的可移动范围示例详解

    这篇文章主要介绍了微信小程序movable-view的可移动范围 ,movable-view不管怎么移动都要完全包含住movable-area,也就是说movable-area不能超出movable-view的区域范围,反之亦然,本文通过示例介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • JavaScript实现点击按钮切换网页背景色的方法

    JavaScript实现点击按钮切换网页背景色的方法

    这篇文章主要介绍了JavaScript实现点击按钮切换网页背景色的方法,涉及JavaScript基于鼠标事件动态操作页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • js 数据存储和DOM编程

    js 数据存储和DOM编程

    本文主要介绍了js数据存储和DOM编程的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • js关于命名空间的函数实例

    js关于命名空间的函数实例

    这篇文章主要介绍了js关于命名空间的函数,实例讲述了namespace函数的使用技巧,需要的朋友可以参考下
    2015-02-02
  • 浅述节点的创建及常见功能的实现

    浅述节点的创建及常见功能的实现

    本文主要对节点的创建及常见功能的实现方法进行介绍,希望会对大家学习javascript有所帮助,下面就跟小编一起来看下吧
    2016-12-12
  • js 操作符实例代码

    js 操作符实例代码

    一个单例对象,承载大多数常用的函数列表
    2009-10-10
  • JavaScript SHA-256加密算法详细代码

    JavaScript SHA-256加密算法详细代码

    这篇文章主要为大家详细介绍了JavaScript SHA-256加密算法代码,具有一定的参考价值,感兴趣的朋友可以参考一下
    2016-10-10
  • JavaScript实现对下拉列表值进行排序的方法

    JavaScript实现对下拉列表值进行排序的方法

    这篇文章主要介绍了JavaScript实现对下拉列表值进行排序的方法,实例分析了javascript对下拉列表元素的遍历与排序实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07

最新评论