如何避免 jQuery 函式與其他 JavaScript 庫衝突

在本教程中，我們將學習如何避免 jQuery 函式與任何其他 JavaScript 庫衝突。

對於 jQuery 函式，$ 符號只是一個識別符號。一個 $ 後跟一個選擇器表示它是一個 jQuery 選擇器。它被賦予了一個較短的識別符號 $ 以節省編寫較長語法的時間。它包含 jQuery 物件所需的所有函式，例如 animation()、show()、hide()、show()、CSS 等許多其他函式。此外，$ 在記憶體方面優於 jQuery，因為 $ 佔用一個位元組，而 jQuery 用於相同目的則使用 6 個位元組。

但是有時，在使用多個庫時，$ 符號可能會與其他庫的函式發生衝突。您可能在 Web 應用程式中出於各種目的使用許多 JS 庫，包括 jQuery。不同的庫使用別名來呼叫它們的方法或用於其他目的。

僅使用 jQuery 庫時，使用“$”作為別名應該沒有問題。但是，如果專案中的其他 JS 庫也使用“$”別名，則可能會發生程式碼衝突並導致意外結果。

以下是避免 jQuery 函式與任何其他 JavaScript 庫衝突的方法。

使用 jQuery 的 noConflict() 方法

$ 作為函式或變數名可以在許多 JavaScript 庫（包括 jQuery）中使用。在 jQuery 的情況下，$ 只是 jQuery 的別名。因此，所有功能都可以在不使用 $ 的情況下使用。如果您需要與 jQuery 一起使用另一個 JavaScript 庫，請使用 $.noConflict() 將 $ 的控制權返回給另一個庫。noConflict() 方法包含在 jQuery 中，“$”符號通常用作快捷識別符號。jQuery 在設定期間儲存舊的 $ 引用；noConflict() 恢復它們。

如果載入了兩個版本的 jQuery（不建議這樣做），則從第二個版本使用 $.noConflict(true) 將恢復第一個版本的全域性範圍 jQuery 變數。

語法

var $x = jQuery.noConflict();

$x 現在是 jQuery 函式的別名。在函式中使用 $x 代替 $。

示例

在此示例中，我們在程式中使用了兩個 JavaScript 庫。兩個 JavaScript 庫在同一程式碼中使用，並且都使用相同的“$”符號來選擇專案。一個框是用諸如 margin-left、border、width、height、背景顏色和文字顏色等引數建立的。noConflict() 方法使用 $x 作為 $ 符號的別名。該函式用於獲取框元素並在使用者螢幕上顯示它。

<html>
<head>
   <style>
      #box {
         margin-left: 20px;
         border: 2px dashed black;
         width: 500px;
         height: 300px;
         background-color: orange;
         color: white;
      }
   </style>
   <script src = "https://code.jquery.com/jquery-3.5.0.js"> </script>
   <script src = "prototype.js"> </script>
   <script>
      var $x = jQuery.noConflict();
      // $x is now an alias to the jQuery function
      $x(document).ready(function() {
         $x( "div" ).show();
      });
      $( "content" ).style.display = "none";
   </script>
</head>
<body>
   <h3> Avoid jQuery function conflict with any other JavaScript library using <i> noConflict() </i> method </h3>
   <div id = "box"> <p> This is a box </p> </div>
</body>
</html>

使用 jQuery 關鍵字

jQuery 關鍵字用作函式中 $ 符號的別名，以避免與其他 JavaScript 庫發生衝突。如果使用者替換 $ 符號，程式將以類似的方式工作。

語法

jQuery(document).ready(function() {
   // code
};

jQuery 關鍵字是 $ 符號在 jQuery 中的替代品，以避免與使用相同 $ 符號的其他庫發生衝突。

示例

在此示例中，在程式中使用了兩個 JavaScript 庫。兩個 JavaScript 庫在同一程式碼中使用，並且都使用相同的“$”符號來選擇物件。一個框是用 margin-left、border、width、height、背景顏色和文字顏色引數建立的。術語 jQuery 是 $ 符號的別名。它在 jQuery 中的功能與 $ 符號類似。該函式執行一個操作來檢索框元素並在使用者螢幕上顯示它。

<html>
<head>
   <style>
      #box {
         margin-left: 20px;
         border: 2px dashed black;
         width: 300px;
         height: 300px;
         background-color: red;
         color: white;
      }
   </style>
   <script src = "https://code.jquery.com/jquery-3.5.0.js"></script>
   <script src = "new.js"> </script>
   <script>
      jQuery(document).ready(function() {
         jQuery( "div" ).show();
      });
      jQuery( "content" ).style.display = "none";
   </script>
</head>
<body>
   <h3> Avoid jQuery function conflict with any other JavaScript library using <i> jQuery </i> keyword </h3>
   <div id = "box"> <p> This is a box </p> </div>
</body>
</html>

在本教程中，我們看到了兩種避免 jQuery 中與其他 JavaScript 庫發生任何函式衝突的方法。第一種方法是在 jQuery 中使用 noConflict() 方法的幫助下使用別名。第二種方法使用關鍵字“jQuery”代替傳統的 $ 符號來宣告函式。

更新於：2022年10月12日

898 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.