理运用命名空间让js不产生冲突避免全局变量的泛滥


Posted in Javascript onJune 15, 2014

为了避免变量之间的覆盖与冲突,可以生成命名空间,命名空间是一种特殊的前缀,在js中,通过{ }对象实现。

在不同的匿名函数中,根据功能声明一个不同的命名空间,每个匿名函数中GLOBAL对象的属性都不直接挂在GLOBAL上,而是挂在次匿名函数的命名空间下,如:

<script type="text/javascript"> 
var GLOBAL={} 
</script> 
<script type="text/javascript"> 
(function(){ 
var a=123, a1=256; 
GLOBAL.A={} 
GLOBAL.A.str=a; 
})(); 
</script> <script type="text/javascript"> 
(function(){ 
var b1=123, b2=256; 
GLOBAL.B={} 
GLOBAL.B.str=a; 
})(); 
</script>

如果同一个匿名函数中的程序非常复杂,变量名很多,命名空间可以进一步扩展,生成二级命名空间:
<script type="text/javascript"> 
var GLOBAL={} 
</script> 
<script type="text/javascript"> 
(function(){ 
var a=123, a1=256; 
GLOBAL.A={}; 
GLOBAL.A.CAT={}; 
GLOBAL.A.DOG={}; 
GLOBAL.A.CAT.name="mini"; 
GLOBAL.A.CAT.move=function(){ 
} 
GLOBAL.A.DOG.name="mini"; 
GLOBAL.A.DOG.move=function(){ 
} 
})(); 
</script>

因生成命名空间是非常常用的功能,可以进一步将生成命名空间的功能定义成一个函数,方便调用,如下:
<script type="text/javascript"> 
var GLOBAL={} 
GLOBAL.namespace=function(str){ 
var arr=str.split("."), o=GLOBAL; 
for(i=arr[0]=="GLOBAL"?1:0;i<arr.length; i++){ 
o[arr[i]]=o[arr[i]] || {}; 
o=o[arr[i]]; 
} 
} 
</script>

调用命名空间具体操作:
<script type="text/javascript"> 
//============================================================= 
// 功能A 
// 工程师甲 
// email:ctkl68945@gmail.com msn:ctkl68945@hotmail.com" 
// 2012-11-06 
//============================================================= (function(){ 
var a=123, a1="hello world"; 
GLOBAL.namespace("A.CAT"); 
GLOBAL.namespace("A.DOG"); 
GLOBAL.A.CAT.name="mini"; 
GLOBAL.A.CAT.move=function(){ 
} 
GLOBAL.A.DOG.name="mini"; 
GLOBAL.A.DOG.move=function(){ 
} 
GLOBAL.A.str=a; 
GLOBAL.A.str1=a1; 
})();

依次类似,无论多人的直接团队开发,还是个人的间接团队合作,都需要良好的可维护性。

1、添加必要的代码注释

2、让JS不产生冲突,需避免全局变量的泛滥,合理使用命名空间

Javascript 相关文章推荐
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
jQuery中deferred对象使用方法详解
Jul 14 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 Javascript
layui实现下拉框三级联动
Jul 26 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 Javascript
jQuery获取动态生成的元素示例
Jun 15 #Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 #Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 #Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 #Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 #Javascript
jQuery $.extend()用法总结
Jun 15 #Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 #Javascript
You might like
用PHP实现多服务器共享SESSION数据的方法
2007/03/16 PHP
PHP APC配置文件2套和参数详解
2014/06/11 PHP
如何让CI框架支持service层
2014/10/29 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
点击广告后才能获得下载地址
2006/10/26 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
Python常用正则表达式符号浅析
2014/08/13 Python
python中global用法实例分析
2015/04/30 Python
python删除文本中行数标签的方法
2018/05/31 Python
python的依赖管理的实现
2019/05/14 Python
Python argparse模块应用实例解析
2019/11/15 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
解决python对齐错误的方法
2020/07/16 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
班组长岗位职责范本
2014/01/05 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
高考寄语大全
2014/04/08 职场文书
消防工作实施方案
2014/06/09 职场文书
大学生干部培训心得体会
2016/01/06 职场文书