团队合作,如何避免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>