理运用命名空间让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 相关文章推荐
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
基于jquery实现全屏滚动效果
Nov 26 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
vue写h5页面的方法总结
Feb 12 Javascript
javascript中正则表达式语法详解
Aug 07 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安全配置
2006/10/09 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
vue全局自定义指令-元素拖拽的实现代码
2019/04/14 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
python读写文件操作示例程序
2013/12/02 Python
Python导入oracle数据的方法
2015/07/10 Python
深入浅析Python字符编码
2015/11/12 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
python 将对象设置为可迭代的两种实现方法
2019/01/21 Python
python生成随机红包的实例写法
2019/09/02 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
幼教毕业生自我鉴定
2014/01/12 职场文书
入学生会自荐书范文
2014/02/05 职场文书
新员工入职欢迎词
2015/01/23 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android