避免JS冲突、JS命名空间
2017-03-21 本文已影响182人
疾风劲草ccy
如何避免JS冲突
-
A:匿名函数
在多人合作一个网站时，每个人都会写自己的JS代码，定义变量的时候有可能会引起命名冲突，如何避免这种冲突隐患呢？
一种最简单有效的办法是“匿名函数”将脚本包起来，让变量的作用域控制在匿名函数之内。
匿名函数：(function (){})()前面的括号内是函数体，后面的()表示执行。
如：
(function(){
var name,user="test"; //包含在这个匿名函数中的变量，作用域不再是window,而是局限在函数内部。因为各自包在不同的匿名函数内，也就不再互相冲突了。
})();
用匿名函数将脚本包起来，可以有效的控制全局变量，避免冲突隐患。
-
B:解决匿名函数之间的通信问题
上面的匿名函数确实解决了冲突,但是如果两个代码段之间需要访问彼此的变量,那就被分隔开了,没法访问对方作用域中的变量.
一个比较好的解决办法是"在window的作用域下定义一个全局变量",但是从上面的冲突来看,全局变量是引起冲突的杀手,如果又这样定义,就违背了我们使用匿名函数的初衷,所以应该严格控制全局变量的数量!
为了控制全局变量的数量,用Hash对象作为全局变量。
var GLOBAl={}; //一个对象类型的变量作为全局变量，扩展性好
定义好对象类型变量后,在匿名函数A中定义GLOBAL的属性：GLOBAL.str1="aaa";在匿名函数B中可以直接访问var b = BLOBAl.str1;
这样又出现了一个问题，当在匿名函数B中它也定义一个属性BLOBAl.str1="bbb";这个时候就会把A块中的属性str1给覆盖掉.如何避免这种冲突呢？不可能每个开发者在使用GLOBAL对象之前，都要查找一下绑定了哪些属性。
这时，命名空间就出现了，它是一种特殊的前缀，在js中它其实是通过一个 "{ }" 对象来实现的。我们可以给每个匿名函数声明不同的命名空间，然后每个匿名函数中GLOBAL对象的属性都不要直接挂在GLOBAl对象上，而是挂在此匿名函数的命名空间下，既：window全局的GLOBAL.命名空间.属性变量,这样申明属性名称的时候，即使同名，空间不一样也不会引起冲突。如： GLOBAL.A={};// 定义命名空间；GLOBAL.A.str1="aaa";//定义属性变量复杂的匿名函数中，你还可以生产二级命名空间，如GLOBAL.A={};//一级命名空间，GLOBAL.A.CAT={};GLOBAL.A.DOG={};//二级命名空间；
生成命名空间是一个很常用的功能，可以将其封装为一个函数。
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]];
}
}
调用： GLOBAL.namespace('A.DOG'); GLOBAL.namespace('GLOBAL.B');
总结:解决js冲突------- 命名空间+全局变量+匿名函数 很好的结合使用才能更好的解决冲突。
-
C:注释
添加必要的代码注释，可大大提高可维护性，对团队合作来说，是很重要的。
注释添加的信息包括：功能说明；工程师姓名；工程师联系方式；代码最后修改时间；
让JS不产生冲突，需要避免全局变量的泛滥，合理使用命名空间，以及给代码添加注释。
