理运用命名空间让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 相关文章推荐
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
JQuery设置时间段下拉选择实例
Dec 30 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
jQuery模拟窗口抖动效果
Mar 15 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
详解Vue SPA项目优化小记
Jul 03 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 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打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
jquery 注意事项与常用语法小结
2010/06/07 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
js实现仿购物车加减效果
2017/03/01 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
vue组件父子间通信详解(三)
2017/11/07 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
21行Python代码实现拼写检查器
2016/01/25 Python
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
Python猴子补丁知识点总结
2020/01/05 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
人力资源行政经理自我评价
2013/10/23 职场文书
早餐连锁店计划书
2014/01/08 职场文书
优秀班组长事迹
2014/05/31 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA