jQuery 無衝突模式

Created: October-14, 2018

在本教程中，你將學習如何避免 jQuery 與其他 JavaScript 庫或框架之間的衝突。

將 jQuery 與其他 JavaScript 庫一起使用

如你所知，jQuery 使用美元符號（$）作為快捷方式或別名 jQuery 。因此，如果你使用另一個也使用 $ 符號作為快捷方式的 JavaScript 庫，以及同一頁面上的 jQuery 庫，則可能會發生衝突。幸運的是，jQuery 提供了一個特殊的 noConflict() 方法來處理這種情況。

jQuery `noConflict()` 方法

jQuery.noConflict() 方法將 $ 識別符號的控制權返回給其他庫。以下示例中的 jQuery 程式碼（第 10 行）將在 jQuery 載入到頁面後立即將其置於無衝突模式，並分配新的變數名稱 $j 以替換 $ 別名，以避免與原型框架衝突。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Demo</title>
<script src="js/prototype.js"></script>
<script src="js/jquery.js"></script>
<script type="text/javascript">
// Defining the new alias for jQuery
var $j = jQuery.noConflict();
$j(document).ready(function(){
    // Display an alert message when the element with ID foo is clicked
    $j("#foo").click(function(){
        alert("jQuery is working well with prototype.");
    });
});
 
// Some prototype framework code
document.observe("dom:loaded", function(){
    // Display an alert message when the element with ID bar is clicked
    $(bar).observe('click', function(event){
        alert("Prototype is working well with jQuery.");
    });
});
</script>
</head>
<body>
    <button type="button" id="foo">Run jQuery Code</button>
    <button type="button" id="bar">Run Prototype Code</button>
</body> 
</html>

注意： 許多 JavaScript 庫在函式或變數名使用 $ ，就像 jQuery 一樣。比如， mootools ， prototype ， zepto 等。

但是，如果你不想為 jQuery 定義另一個快捷方式，可能是因為你不想修改現有的 jQuery 程式碼或者你真的想使用 $ 它因為它節省了時間並且易於使用，那麼你可以採用另一種快速方式方法 - 只需將 $ 作為引數傳遞給你的 jQuery(document).ready() 函式，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Demo</title>
<script src="js/prototype.js"></script>
<script src="js/jquery.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
    // The dollar sign in here work as an alias to jQuery
    $("#foo").click(function(){
        alert("jQuery is working well with prototype.");
    });
});
 
// Some prototype framework code
document.observe("dom:loaded", function(){
    // The dollar sign in the global scope refer to prototype
    $(bar).observe('click', function(event){
        alert("Prototype is working well with jQuery.");
    });
});
</script>
</head>
<body>
    <button type="button" id="foo">Run jQuery Code</button>
    <button type="button" id="bar">Run Prototype Code</button>
</body> 
</html>

包括其他庫之前的 jQuery

避免衝突的上述解決方案依賴於在載入 prototype.js 之後載入 jQuery。但是，如果在其他庫之前包含 jQuery，則可以在 jQuery 程式碼中使用全名 jQuery ，以避免衝突，而不用呼叫 jQuery.noConflict()。但在這種情況下， $ 將具有在其他庫中定義的含義。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery noConflict() Demo</title>
<script src="js/jquery.js"></script>
<script src="js/prototype.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
    // Use full jQuery function name to reference jQuery
    jQuery("#foo").click(function(){
        alert("jQuery is working well with prototype.");
    });
});
 
// Some prototype framework code
document.observe("dom:loaded", function(){
    // The dollar sign here will have the meaning defined in prototype
    $(bar).observe('click', function(event){
        alert("Prototype is working well with jQuery.");
    });
});
</script>
</head>
<body>
    <button type="button" id="foo">Run jQuery Code</button>
    <button type="button" id="bar">Run Prototype Code</button>
</body> 
</html>

將 jQuery 與其他 JavaScript 庫一起使用

jQuery noConflict() 方法

包括其他庫之前的 jQuery

jQuery `noConflict()` 方法