本文實例講述了jQuery中noConflict()用法。分享給大家供大家參考。具體分析如下:
jQuery預設使用"$"運算符,$ 符號只是 window.jQuery 物件的一個引用,jQuery.noConflict() ,這個函數將變數$的控制權讓渡給第一個實作它的那個函式庫。這有助於確保jQuery不會與其他函式庫的$物件發生衝突。在執行這個函數後,就只能使用jQuery變數來存取jQuery物件。例如,要用到$("div p")的地方,就必須換成jQuery("div 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("div 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("div p").hide(); // 基于 jQuery 的代码 $("content").style.display = "none";// 基于其他库的 $() 代码
5、完全將 jQuery 移到一個新的命名空間:
var dom = {}; dom.query = jQuery.noConflict(true); //结果: dom.query("div p").hide(); // 新 jQuery 的代码 $("content").style.display = "none"; // 另一个库 $() 的代码 jQuery("div > p").hide(); // 另一个版本 jQuery 的代码
希望本文所述對大家的jQuery程式設計有所幫助。