如何解決jQuery 和其他JS庫的衝突
阿新 • • 發佈：2020-06-24
在 jQuery 庫中，幾乎所有的外掛都被限制在它的名稱空間裡。通常，全域性物件都被很好地儲存在 jQuery 名稱空間裡，因此當把 jQuery 和其他 JavaScript 庫（例如 Prototype、MooTools 或 YUI）一起使用時，不會引起衝突。
注意：預設情況下，jQuery 用 $ 作為自身的快捷方式。
1.jQuery庫在其他庫之後匯入
在其他庫和 jQuery 庫都被載入完畢後，可以在任何時候呼叫 jQuery.noConflict() 函式來將變數 $ 的控制權移交給其他 JavaScript 庫。示例如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>衝突解決1</title>
<!-- 引入 prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">Test-prototype(將被隱藏)</p>
<p >Test-jQuery(將被繫結單擊事件)</p>
<script type="text/javascript">
jQuery.noConflict(); //將變數$的控制權讓渡給prototype.js
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype.js隱藏元素
</script>
</body>
</html>然後，就可以在程式裡將 jQuery() 函式作為 jQuery 物件的製造工廠。
此外，還有另一種選擇。如果想確保 jQuery 不會與其他庫衝突，但又想自定義一個快捷方式，可以進行如下操作：
<script type="text/javascript">
var $j = jQuery.noConflict(); //自定義一個比較短快捷方式
$j(function(){ //使用jQuery
$j("p").click(function(){
alert( $j(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype.js隱藏元素
</script>可以自定義備用名稱，例如 jq、$J、awesomequery 等。
如果不想給 jQuery 自定義這些備用名稱，還想使用 $ 而不管其他庫的 $() 方法，同時又不想與其他庫相沖突，那麼可以使用以下兩種解決方法。
其一：
<script type="text/javascript">
jQuery.noConflict(); //將變數$的控制權讓渡給prototype.js
jQuery(function($){ //使用jQuery
$("p").click(function(){ //繼續使用 $ 方法
alert( $(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>其二：
<script type="text/javascript">
jQuery.noConflict(); //將變數$的控制權讓渡給prototype.js
(function($){ //定義匿名函式並設定形參為$
$(function(){ //匿名函式內部的$均為jQuery
$("p").click(function(){ //繼續使用 $ 方法
alert($(this).text());
});
});
})(jQuery); //執行匿名函式且傳遞實參jQuery
$("pp").style.display = 'none'; //使用prototype
</script>
這應該是最理想的方式，因為可以通過改變最少的程式碼來實現全面的相容性。
2.jQuery庫在其他庫之前匯入
如果 jQuery 庫在其他庫之前就匯入了，那麼可以直接使用"jQuery”來做一些jQuery的工作。同時，可以使用 $() 方法作為其他庫的快捷方式。這裡無需呼叫 jQuery.noconflict() 函式。示例如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>衝突解決5</title>
<!-- 引入 jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<!-- 引入 prototype -->
<script src="lib/prototype.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">Test-prototype(將被隱藏)</p>
<p >Test-jQuery(將被繫結單擊事件)</p>
<script type="text/javascript">
jQuery(function(){ //直接使用 jQuery,沒有必要呼叫"jQuery.noConflict()"函式。
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>
有了這些方法來解決衝突，就可以在專案中放心地引用 jQuery 了。
以上就是如何解決jQuery 和其他JS庫的衝突的詳細內容，更多關於解決jQuery JS庫衝突的資料請關注我們其它相關文章！