理运用命名空间让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聚焦于第一个字段的代码
Oct 15 Javascript
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
jQuery的ready方法详解
Nov 27 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
JavaScript观察者模式(经典)
Dec 09 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
js实现年月日表单三级联动
Apr 17 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
Vue登录主页动态背景短视频制作
Sep 21 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
无线电的诞生过程
2021/03/01 无线电
用PHP实现的生成静态HTML速度快类库
2007/03/31 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
分享3个php获取日历的函数
2015/09/25 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
js 回车提交表单两种实现方法
2012/12/31 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
Python进行数据科学工作的简单入门教程
2015/04/01 Python
Python 列表理解及使用方法
2017/10/27 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
python 字典访问的三种方法小结
2019/12/05 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
暑期社会实践学生的自我评价
2014/01/09 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
师范生自我鉴定
2014/03/20 职场文书
部门年终奖分配方案
2014/05/07 职场文书
五四青年节演讲稿
2014/05/26 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
Python自然语言处理之切分算法详解
2021/04/25 Python
python turtle绘图命令及案例
2021/11/23 Python