理运用命名空间让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实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
AngularJS的表单使用详解
Jun 17 Javascript
基于BootStarp的Dailog
Apr 28 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
vue watch关于对象内的属性监听
Apr 22 Javascript
iview实现图片上传功能
Jun 29 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 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中GET变量的使用
2006/10/09 PHP
IIS6的PHP最佳配置方法
2007/03/19 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
Python内置的字符串处理函数整理
2013/01/29 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
Python request中文乱码问题解决方案
2020/09/17 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
2013的个人自我评价
2013/12/26 职场文书
会走路的树教学反思
2014/02/20 职场文书
绩效工资实施方案
2014/03/15 职场文书
学校班班通实施方案
2014/06/11 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
小学教育见习总结
2015/06/23 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS