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 Event学习第四章 传统的事件注册模型
Feb 07 Javascript
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
jQuery ajax调用webservice注意事项
Oct 08 jQuery
vue.js实现简单轮播图效果
Oct 10 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
javascript实现贪吃蛇小游戏
Jul 28 Javascript
Webpack3+React16代码分割的实现
Mar 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 defined()函数的使用图文详解
2019/07/20 PHP
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
python搜索算法原理及实例讲解
2020/11/18 Python
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
非常详细的C#面试题集
2016/07/13 面试题
文员个人的求职信范文
2013/09/26 职场文书
大学考试作弊检讨书
2014/01/30 职场文书
管理部副部长岗位职责范文
2014/03/09 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
技术负责人岗位职责
2015/02/10 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS