js命名空间写法示例


Posted in Javascript onDecember 18, 2015

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

Javascript 相关文章推荐
Javascript中Eval函数的使用说明
Oct 11 Javascript
jQuery AJAX回调函数this指向问题
Feb 08 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
热点新闻滚动特效的js代码
Aug 17 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
浅谈js闭包理解
Mar 28 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
JavaScript Split()方法
Dec 18 #Javascript
jquery中object对象循环遍历的方法
Dec 18 #Javascript
JavaScript的Number对象的toString()方法
Dec 18 #Javascript
JavaScript ParseFloat()方法
Dec 18 #Javascript
jquery中ajax跨域方法实例分析
Dec 18 #Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 #Javascript
JavaScript Math.round() 方法
Dec 18 #Javascript
You might like
PHP中创建并处理图象
2006/10/09 PHP
桌面中心(三)修改数据库
2006/10/09 PHP
discuz的php防止sql注入函数
2011/01/17 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
js中设置元素class的三种方法小结
2011/08/28 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
Python 实现微信防撤回功能
2019/04/29 Python
python pandas时序处理相关功能详解
2019/07/03 Python
Python3 元组tuple入门基础
2020/02/09 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
博士给导师的自荐信
2015/03/06 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
退休欢送会致辞
2015/07/31 职场文书
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript