理运用命名空间让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 相关文章推荐
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
jQuery实现的简单分页示例
Jun 01 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
js数据类型检测总结
Aug 05 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 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
域名查询代码公布
2006/10/09 PHP
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
PHP超全局数组(Superglobals)介绍
2015/07/01 PHP
JQuery 文本框使用小结
2010/05/22 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
岗位职责范本
2013/11/23 职场文书
电大毕业个人生自我鉴定
2014/03/26 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
会员卡清退活动总结
2014/08/27 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
2014年学校工作总结
2014/11/20 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python