理运用命名空间让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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
js 自定义个性下拉选择框示例
Aug 20 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 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
用文本作数据处理
2006/10/09 PHP
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
PHP中MD5函数使用实例代码
2008/06/07 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
json数据传到前台并解析展示成列表的方法
2018/08/06 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
python正则分组的应用
2013/11/10 Python
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
Python中每次处理一个字符的5种方法
2015/05/21 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
python中id函数运行方式
2020/07/03 Python
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
社会学专业学生职业规划书
2014/02/07 职场文书
员工考核评语大全
2014/04/26 职场文书
庆国庆活动总结
2014/08/28 职场文书
师德师风个人总结
2015/02/06 职场文书
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS