理运用命名空间让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 相关文章推荐
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
javascript中的对象创建 实例附注释
Feb 08 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
js 控制页面跳转的5种方法
Sep 09 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
js使用formData实现批量上传
Mar 27 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
聊聊JS ES6中的解构
Apr 29 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
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输出时间格式
2013/08/31 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
PHP 配置后台登录以及模板引入
2017/01/24 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
详解JavaScript函数
2015/12/01 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
介绍一下sql server的安全性
2014/08/10 面试题
Linux如何压缩可执行文件
2014/03/27 面试题
《最大的“书”》教学反思
2014/02/14 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
交通事故起诉书
2015/05/19 职场文书
2015年教师节广播稿
2015/08/19 职场文书
创业计划书之电动车企业
2019/10/11 职场文书
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL