避免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:注释

添加必要的代码注释，可大大提高可维护性，对团队合作来说，是很重要的。

注释添加的信息包括：功能说明；工程师姓名；工程师联系方式；代码最后修改时间；