理运用命名空间让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的跟随屏幕滚动代码
Jul 24 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 Javascript
jQuery选择器实例应用
Jan 05 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
原生js实现公告滚动效果
Jan 10 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
JavaScript this关键字的深入详解
Jan 14 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
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
php构造函数实例讲解
2013/11/13 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
JS获取父节点方法
2009/08/20 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
用python的requests第三方模块抓取王者荣耀所有英雄的皮肤实例
2017/12/14 Python
Python3 log10()函数简单用法
2019/02/19 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
解决python3输入的坑——input()
2020/12/05 Python
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
入党积极分子思想汇报
2014/01/02 职场文书
企业环保标语
2014/06/10 职场文书
2014年平安建设工作总结
2014/11/19 职场文书
职工年度考核评语
2014/12/31 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
跳高加油稿
2015/07/21 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
Python保存并浏览用户的历史记录
2022/04/29 Python
MySQL中order by的执行过程
2022/06/05 MySQL