js多個庫衝突的解決辦法

        當一個項目中引入多個第三方庫的時候，由於沒有命名空間的約束（命名空間就好比同一個目錄下的文件夾一樣，名字相同就會產生衝突），庫與庫之間發生衝突在所難免。

        那麼，既然有衝突的問題，爲什麼要使用多個庫呢？原因是jQuery 只不過是DOM 操作爲主的庫，方便我們日常Web 開發。但有時，我們的項目有更多特殊的功能需要引入其他的庫，比如用戶界面UI 方面的庫，遊戲引擎方面的庫等等一系列。

        而很多庫，比如prototype、還有我們JavaScript 課程開發的Base 庫，都使用“$”作爲基準起始符，如果想和jQuery 共容有兩種方法：

1. jQuery庫在其他庫之後導入

        在其他庫和jQuery庫都被加載完畢後，可以在任何時候調用 jQuery.noConflict()函數來將變量$的控制權讓渡給其他javascript庫。示例如下：

//....省略其他代碼
<p id="pp">Test-prototype(將被隱藏)</p>
<p>Test-jQuery(將被綁定單擊事件)</p>

<!-- 引入 prototype -->
<script src="./js/prototype.js" type="text/javascript"></script>

<!-- 引入 jQuery -->
<script src="./js/jquery.js" type="text/javascript"></script>

<script>

    jQuery.noConflict();  //將變量$的控制權讓渡給 prototype.js

    jQuery(function(){
        jQuery("p").click(function(){
            alert( jQuery(this).text());
        });
    });

    $("pp").style.display = "none";  //使用 prototype.js 隱藏元素

</script>

然後，就可以在程序中將 jQuery() 函數作爲jQuery對象的製造工廠。

此外，還有另一種選擇。如果想確保jQuery不會和其他庫衝突，但又想自定義一個快捷方式，可以進行如下操作：

//....省略其他代碼


    var $j = jQuery.noConflict();  //自定義一個快捷方式

    $j(function(){                //使用jQuery，利用自定義快捷方式——$j
        

        $j("p").click(function(){

alert( $j(this).text()); }); }); $("pp").style.display = "none"; //使用 prototype.js 隱藏元素

//....省略其他代碼

如果不想給jQuery自定義這些備用名稱，還想使用$而不管其他庫的$()方法，同時又不想與其他庫相沖突，那麼可以使用以下兩種解決方法。

其一：

//....省略其他代碼

    jQuery.noConflict();  //將變量$的控制權讓渡給 prototype.js

    jQuery(function($){            //使用jQuery設定頁面加載時執行的函數
        $("p").click(function(){   //在函數內部繼續使用 $()方法
            alert( $(this).text());
        });
    });

    $("pp").style.display = "none";  //使用 prototype.js 隱藏元素

//....省略其他代碼

其二：

//....省略其他代碼

    jQuery.noConflict();  //將變量$的控制權讓渡給 prototype.js

    (function($){         //定義匿名函數並設置形參爲$
        $(function(){     //匿名函數內部的$均爲jQuery
            $("p").click(function(){   //繼續使用 $()方法
                alert($(this).text());
            });
        });
    })(jQuery);         //執行匿名函數且傳遞實參jQuery
 
 $("pp").style.display = "none";  //使用 prototype.js 隱藏元素

//....省略其他代碼

這應該是最理想的方式，因爲可以通過改變最少的代碼來實現全面的兼容性

2. jQuery庫在其他庫之前導入

    如果jQuery庫在其他庫之前就導入了，那麼可以直接使用 "jQuery" 來做一些jQuery的工作。同時，可以使用$()方法作爲其他庫的快捷方式。這裏無需調用 jQuery.noConflict()函數。示例如下：

//....省略其他代碼

<p id="pp">Test-prototype(將被隱藏)</p>
<p>Test-jQuery(將被綁定單擊事件)</p>

<!-- 引入 jQuery -->
<script src="./js/jquery.js" type="text/javascript"></script>

<!--後引入 prototype --><script src="./js/prototype.js" type="text/javascript"></script><script> jQuery(function(){ jQuery("p").click(function(){ alert( jQuery(this).text()); }); }); $("pp").style.display = "none"; //使用 prototype.js 隱藏元素</script>//....省略其他代碼

建議將jQuery放在所有引用庫之前，並利用定義匿名函數，設置形參$，並傳遞jQuery作爲實參的方法