解決jQuery和其他庫的衝突方法
阿新 • • 發佈:2019-01-05
在jQuery庫中,幾乎所有的外掛都被限制在它的名稱空間裡。通常,全域性物件都被很好地儲存在jQuery的名稱空間裡,所以當把jQuery庫和其他js庫(Prototype,MooTools或YUI)一起使用時,不會引起衝突。
注意:預設情況下jQuery用“$”作為自身的快捷方式。
當我們使用的其他JavaScript庫也是以"$"作為快捷方式時,這個時候如何解決jQuery和其他庫的衝突呢?
1、jQuery庫在其他庫之後匯入
(1)使用"jQuery"全名代替"$"
在其他庫和jQuery庫都被載入完畢後,可以在任何時候呼叫jQuery.noConflict()函式將變數$的控制權移交給其他JavaScript庫。
示例:
然後就可以在程式裡將jQuery()函式作為jQuery物件的製造工廠。//...省略其他程式碼 <p id="pp">Text-prototype(將被隱藏)</p> <p>Text-jQuery(將被繫結單擊事件)</p> <!-- 引入prototype --> <script src="lib/prototype.js" type="text/javascript"></script> <!-- 引入jQuery --> <script src="../../scripts/jquery.js" type="text/javascript"></script> <script> jQuery.noConflict(); //將變數$的控制權讓渡給prototype.js jQuery(function(){ //使用jQuery jQuery("p").click(function(){ alert( jQuery(this).text() ); }) }) $("pp").style.display = 'none'; //使用prototype隱藏元素 </script>
(2)自定義快捷方式
可以自定義備用名稱,例如jq,$j等等。示例:
var $j = jQuery.noConflict(); //自定義一個快捷方式 $j(function(){ //使用jQuery,利用自定義快捷方式——$j $j("p").click(function(){ alert( $j(this).text() ); }) }) $("pp").style.display = 'none'; //使用prototype.js隱藏元素
(3)使用$而不與其他庫衝突
如果不想給jQuery自定義這些備用名稱,還想使用$而不管其他庫的$()方法,同時又不想與其他庫衝突,可以使用以下兩種解決方法。
其一:
jQuery.noConflict(); //將變數$的控制權讓渡給prototype.js
jQuery(function($){ //使用jQuery設定頁面載入時執行的函式
$("p").click(function(){ //在函式內部繼續使用 $()方法
alert( $(this).text() );
})
})
$("pp").style.display = 'none'; //使用prototype
其二:
jQuery.noConflict(); //將變數$的控制權讓渡給prototype.js
(function($){ //定義匿名函式並設定形參為$
$(function(){ //匿名函式內部的$均為jQuery
$("p").click(function(){ //繼續使用 $ 方法
alert( $(this).text() );
});
});
})(jQuery); //執行匿名函式且傳遞實參jQuery
$("pp").style.display = 'none'; //使用prototype
這是一種最理想的方式,可以通過改變最少的程式碼來實現全面的相容性。
2、jQuery庫在其他庫之前匯入
如果jQuery庫在其他庫之前匯入,那麼$()的控制權預設歸屬於後面匯入的JavaScript庫。可以直接使用“jQuery”來做一些工作。同時,可以使用$()方法作為其他庫的快捷方式。這裡無需呼叫jQuery.noConflict()函式。示例:
<!-- 先匯入jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<!-- 後匯入prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
<p id="pp">Test-prototype(將被隱藏)</p>
<p >Test-jQuery(將被繫結單擊事件)</p>
<script>
jQuery(function(){ //直接使用 jQuery ,無需呼叫"jQuery.noConflict()"函式
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>