理运用命名空间让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 保存数组到Cookie的代码
Apr 14 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
JavaScript事件对象event用法分析
Jul 27 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 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
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
php define的第二个参数使用方法
2013/11/04 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
javascript脚本调试方法小结
2008/11/24 Javascript
javascript类继承机制的原理分析
2009/09/12 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
VUE中setTimeout和setInterval自动销毁案例
2020/09/07 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
python3中celery异步框架简单使用+守护进程方式启动
2021/01/20 Python
专科毕业生学习生活的自我评价
2013/10/26 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
幼儿园老师寄语
2014/04/03 职场文书
小学生期末评语大全
2014/04/21 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书