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 add event remove event
Apr 07 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 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
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
深入php list()函数的详解
2013/06/05 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
跟老齐学Python之开始真正编程
2014/09/12 Python
Python三级菜单的实例
2017/09/13 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
增大python字体的方法步骤
2020/07/05 Python
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
思想政治自我鉴定
2013/10/06 职场文书
工业自动化毕业生自荐信范文
2014/01/04 职场文书
个人授权委托书范本
2014/04/03 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
如何写辞职书
2015/02/26 职场文书
学校开除通知书
2015/04/25 职场文书
学生检讨书怎么写
2015/05/07 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android