分享jQuery中noConflict()的用法

這篇文章主要介紹了jQuery中noConflict()用法,實例分析了noConflict()的功能、定義及相關使用技巧,需要的朋友可以參考下

#本文實例講述了jQuery中noConflict()用法。分享給大家供大家參考。具體分析如下：

jQuery預設使用"$"運算子，$ 符號只是window.jQuery 物件的一個引用，jQuery.noConflict() ，這個函數將變數$的控制權讓渡給第一個實現它的那個庫。這有助於確保jQuery不會與其他函式庫的$物件發生衝突。在執行這個函數後，就只能使用jQuery變數來存取jQuery物件。例如，要用到$("p p")的地方，就必須換成jQuery("p p")。

一、"$"運算子

1、jQuery預設使用"$"運算符，prototype等其他框架也是使用"$"，於是，如果jQuery在其他函式庫之後引入，那麼jQuery將獲得"$"使用權。這樣的情況也很容易理解，畢竟JS是從上到下流式執行的。

2、如果在其他使用"$"的函式庫之前引入jQuery，那麼jQuery將不會佔用"$"。

提示：當其他 JavaScript 函式庫為其函數使用 $ 時，此方法很有用。

我們在jquery中取得變數都會使用到$，但是還有很多外掛都是可以使用$這個符號了，如果我們同時要引用就會導致出現問題了，jquery為了防止這種事情發生就引入了noconflict()

二、jQuery.noConflict的定義
 
jQuery.noConflict 方法包含一個可選的布林參數，用來決定移交$ 所引用的同時是否移交jQuery 物件本身：

jQuery.noConflict([removeAll])

函數的說明:

預設情況下，執行noConflict 會將變數$ 的控制權移交給第一個產生$ 的函式庫；當removeAll 設定為true 時，執行noConflict 則會將$ 和jQuery 物件本身的控制權全部移交給第一個產生他們的函式庫。
 
三、jQuery.noConflict原始碼分析
 
jQuery 原始碼開頭，首先做的一件事是這樣的：

#

// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,

容易理解的是，jQuery 透過兩個私有變數映射了window 環境下的jQuery 和$ 兩個對象，以防止變數被強行覆蓋。一旦noConflict 方法被調用，則透過_jQuery, _$, jQuery, $ 四者之間的差異，來決定控制權的移交方式，具體的程式碼如下：

noConflict: function( deep ) {
 if ( window.$ === jQuery ) {
 window.$ = _$;
 }
 if ( deep && window.jQuery === jQuery ) {
 window.jQuery = _jQuery;
 }
 return jQuery;
}

再來看上面所說的參數設定問題，如果deep 沒有設置，_$ 覆蓋window.$，此時jQuery 別名$ 失效，但jQuery 本身完好無損。如果有其他類別庫或程式碼重新定義了 $ 變量，它的控制權就完全交接出去了。反之如果 deep 設定為 true 的話，_jQuery 覆蓋 window.jQuery，此時 $ 和 jQuery 都會失效。
這種操作的好處是，不管是框架混用還是jQuery 多版本共存這種高度衝突的執行環境，由於noConflict 方法提供的移交機制，以及本身返回未被覆蓋的jQuery 對象，完全能夠通過變量映射的方式解決衝突。

四、jQuery.noConflict實例
 
1、將$ 引用的物件對應回原始的物件：

jQuery.noConflict();
jQuery("p p").hide(); // 使用 jQuery
$("content").style.display = "none"; // 使用其他库的 $()

2、恢復使用別名$，然後建立並執行一個函數，在這個函數的作用域中仍然將$ 作為jQuery 的別名來使用。在這個函數中，原來的 $ 物件是無效的。這個函數對於大多數不依賴其他函式庫的插件都很有效：

jQuery.noConflict();
(function($) { 
 $(function() {
  // 使用 $ 作为 jQuery 别名的代码
 });
})(jQuery);
... // 其他用 $ 作为别名的库的代码

3、可以將jQuery.noConflict() 與簡寫的ready 結合，使程式碼更緊湊：

jQuery.noConflict()(function(){
  // 使用 jQuery 的代码
});
... // 其他库使用 $ 做别名的代码

4、建立一個新的別名用於在接下來的庫中使用jQuery 物件：

var j = jQuery.noConflict();
j("p p").hide();  // 基于 jQuery 的代码
$("content").style.display = "none";// 基于其他库的 $() 代码

5、完全將jQuery 移到一個新的命名空間：

#

var dom = {};
dom.query = jQuery.noConflict(true);
//结果:
dom.query("p p").hide();  // 新 jQuery 的代码
$("content").style.display = "none";  // 另一个库 $() 的代码
jQuery("p > p").hide();  // 另一个版本 jQuery 的代码

以上是分享jQuery中noConflict()的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！