团队合作，如何避免js冲突

有时候会出现多位工程师在同一页面写js的情况，很有可能工程师A定义了变量a，然后工程师B又定义了这个变量,如下：

<script>

     var a="abc";

     do something.....

 

     var a="def";

     do something......

</script>

它们都是直接定义在window作用域下的，所以就会发生冲突隐患。

如何避免这种冲突隐患呢？

最简单最有效的方法就是用匿名函数将脚本包起来，如下：

 

<script>

(function($){

     var a="abc";

     do something.....

 })(jQuery);

 

(function($){

     var a="def";

     do something.....

 })(jQuery);

</script>

如此一来它们的作用域就不在式window了，而是在它们各自的函数里，不再冲突了。

 

那么如果工程师B想调用工程师A中的变量，按如上方法是无法进行通信的，那该怎么办呢？

为了解决匿名行数之间的通信，我们可以定义一个全局变量，如下；

<script>

          var global={};

(function($){

    var a="abc";

    var b="def";

    global=a;

     do something.....

 })(jQuery);

 

(function($){

     var c=globa;//这里的global的值就是'abc'.

     do something.....

 })(jQuery);

</script>

使用普通变量作为全局变量，扩展性十分差，，所以我们使用一个{}对象类型的变量作为全局变量，如此一来就解决了各个匿名函数之间的通信问题。

 

如果工程师B还想调用工程师A中函数的变量b呢？

那么就可以在A中写扩展,如下：

<script>

          var global={};

(function($){

    var a="abc";

    var b="def";

    global.str1=a;

    global.str2=b;

     do something.....

})(jQuery);

 

(function($){

     var c=globa.str1;//这里的global的值就是'abc'.

     var d=global.str2;

     do something.....

})(jQuery);

</script>