避免JS冲突
admin活动公告2016-11-08

  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不产生冲突,需要避免全局变量的泛滥,合理使用命名空间,以及给代码添加注释。
活动公告
最新动态
联系我们