理运用命名空间让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 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
让table变成exls的示例代码
Mar 24 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
浅谈js中的this问题
Aug 31 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
element上传组件循环引用及简单时间倒计时的实现
Oct 01 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 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-fpm的配置详解
2013/06/03 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
pytorch+lstm实现的pos示例
2020/01/14 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
计算机应用专业毕业生求职信
2013/10/24 职场文书
服装设计专业毕业生推荐信
2013/11/09 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
单位消防安全责任书
2014/07/23 职场文书
社区班子对照检查材料
2014/08/27 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
放假通知格式
2015/04/14 职场文书
唐山大地震观后感
2015/06/05 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书