怎样让js不产生冲突,避免全局变量的泛滥,合理运用命名空间
2016-01-27 21:35
627 查看
为了避免变量之间的覆盖与冲突。能够生成命名空间。命名空间是一种特殊的前缀,在js中,通过{ }对象实现。
在不同的匿名函数中,依据功能声明一个不同的命名空间,每一个匿名函数中GLOBAL对象的属性都不直接挂在GLOBAL上,而是挂在次匿名函数的命名空间下。如:
假设同一个匿名函数中的程序非常复杂,变量名非常多。命名空间能够进一步扩展,生成二级命名空间:
因生成命名空间是很经常使用的功能,能够进一步将生成命名空间的功能定义成一个函数。方便调用,例如以下:
调用命名空间详细操作:
依次类似,不管多人的直接团队开发,还是个人的间接团队合作。都须要良好的可维护性。
1、加入必要的代码凝视
2、让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 // project师甲 // 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不产生冲突。需避免全局变量的泛滥,合理使用命名空间
相关文章推荐
- Web components新玩具——X-View
- javascript中的Array对象的方法
- JS中的动态表格
- 深入理解JSP
- JavaScript--window与document的getComputedStyle()方法的区别
- JS arguments对象
- 新手学JavaScript(四)----CheckBox全选与全不选
- js中(function(){…})()立即执行函数写法理解
- JSON
- JSP取得绝对路径
- 韩顺平 javascript教学视频_学习笔记21_js内部类_js系统函数 重点重点
- JS中NaN值,Infinity属性与isNaN()函数
- [Javascript] The JSON.stringify API
- 【Web前端】:JavaScript操作Cookie实现“历史搜索”
- moment.js 添加中文语言(汉化)
- 一篇给迷茫者看的JavaScript 引擎指南
- JS判断字符串变量是否含有某个字串的方法
- js模板引擎
- js获取客户时间倒计时,js获取服务器端时间倒计时
- 关于JS变量提升的一些坑