理运用命名空间让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 相关文章推荐
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
解析javascript系统错误:-1072896658的解决办法
Jul 08 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 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为SHOPEX增加日志功能代码
2010/07/02 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
Vue表单实例代码
2016/09/05 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
javascript自执行函数
2017/02/10 Javascript
jQuery实现文档树效果
2017/02/20 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
ES6 Promise对象的含义和基本用法分析
2019/06/14 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
python实时监控cpu小工具
2018/06/21 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
python自动点赞功能的实现思路
2020/02/26 Python
python——全排列数的生成方式
2020/02/26 Python
求职信的要素有哪些呢
2013/12/26 职场文书
毕业留言寄语大全
2014/04/10 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
Django migrate报错的解决方案
2021/05/20 Python