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 相关文章推荐
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
jQuery修改CSS伪元素属性的方法
Jul 30 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
Vue三层嵌套路由的示例代码
May 05 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 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/11/19 PHP
PHP 引用文件技巧
2010/03/02 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
js实现功能比较全面的全选和多选
2017/03/02 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
iview实现图片上传功能
2020/06/29 Javascript
js实现点击上传图片并设为模糊背景
2020/08/02 Javascript
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
python的类方法和静态方法
2014/12/13 Python
Python封装shell命令实例分析
2015/05/05 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
如何基于python实现归一化处理
2020/01/20 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
如何获得EntityManager
2014/02/09 面试题
法定代表人授权委托书范本
2014/10/07 职场文书
爱心捐款感谢信
2015/01/20 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
工作年限证明模板
2015/06/15 职场文书
雨雪天气温馨提示
2015/07/15 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
总结Java对象被序列化的两种方法
2021/06/30 Java/Android