理运用命名空间让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 常用方法基础教程
Feb 06 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 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 cookis创建实现代码
2009/03/16 PHP
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
php利用cookie实现访问次数统计代码
2011/05/19 PHP
php实现httpclient类示例
2014/04/08 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
JavaScript 撑出页面文字换行
2009/06/15 Javascript
javascript 必知必会之closure
2009/09/21 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
javascript常用的设计模式
2017/02/09 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
2018/11/08 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
Python生成随机MAC地址
2015/03/10 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
Python的collections模块真的很好用
2021/03/01 Python
工程造价专业大专生求职信
2013/10/06 职场文书
幼教简历自我评价
2014/01/28 职场文书
承诺书格式范文
2014/06/03 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
签证工作证明模板
2015/06/15 职场文书
首次购房证明
2015/06/19 职场文书
Nginx流量拷贝ngx_http_mirror_module模块使用方法详解
2022/04/07 Servers