理运用命名空间让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实现表格字段排序
Feb 19 Javascript
javascript类型转换示例
Apr 29 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
简单了解JavaScript异步
May 23 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
uni-app实现点赞评论功能
Nov 25 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
ajax 的post方法实例(带循环)
2011/07/04 PHP
PHP开发注意事项总结
2015/02/04 PHP
php实现将Session写入数据库
2015/07/26 PHP
四个PHP非常实用的功能
2015/09/29 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
python encode和decode的妙用
2009/09/02 Python
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
Python实现身份证号码解析
2015/09/01 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
Python发展简史 Python来历
2019/05/14 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
Python学习之time模块的基本使用
2021/01/17 Python
MADE法国:提供原创设计师家具
2018/09/18 全球购物
中学生自我鉴定
2014/02/04 职场文书
保护环境建议书300字
2014/05/13 职场文书
家长给学校的建议书
2014/05/15 职场文书
社区健康教育工作方案
2014/06/03 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript
MYSQL如何查看进程和kill进程
2022/03/13 MySQL