（一）如何避免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

　　　　o[arr[i]]=o[arr[i]] || {};

　　　　o=o[arr[i]];

　　}

}    

調用： GLOBAL.namespace(A.DOG);      GLOBAL.namespace(GLOBAL.B);

總結:解決js沖突-------命名空間+全局變量+匿名函數 很好的結合使用才能更好的解決沖突。

C:注釋

添加必要的代碼注釋，可大大提高可維護性，對團隊合作來說，是很重要的。

注釋添加的信息包括：功能說明；工程師姓名；工程師聯系方式；代碼最后修改時間；

讓JS不產生沖突，需要避免全局變量的泛濫，合理使用命名空間，以及給代碼添加注釋。

 

（二）最容易出現的就是js的命名沖突

1、變量名沖突
變量有全局變量和局部變量當全局變量變量和局部變量名稱一致時，就會js沖突，由于變量傳遞數值或地址不同就會產生JavaScript錯誤，甚至死循環。
2、方法名沖突
函數中有很多方法，不同的js之間可能函數名一樣，這就使得程序執行時不知道改調用那個方法或者哪個方法執行后的結果，最終導致程序加載失敗。
3、函數名沖突
一般是命名導致JS沖突。解決方法主要是查找在加載的js中是否具有相同命名的情況，然后修改命名

 

（三）js有沖突之后如何調試

使用工具   關于IE中的工具   IE8中的開發人員工具(F12)
debugbar
companion.js 關于火狐中的工具   firebug 關于chrome中的工具   開發者工具(F12)

其他相關工具   多版本IE測試: ietester  網頁數據分析工具:fidder  httpwatchpro

上一篇：PHP多版本共存解決方案圖解

下一篇：網站中除了a href=" "加鏈接之外, 還有什么方式可以加鏈接?