Js命名冲突
1)如何避免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不产生冲突,需要避免全局变量的泛滥,合理使用命名空间,以及给代码添加注释。