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

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

jQuery默認(rèn)使用"$"操作符，$ 符號(hào)只是 window.jQuery 對(duì)象的一個(gè)引用，jQuery.noConflict() ，這個(gè)函數(shù)將變量$的控制權(quán)讓渡給第一個(gè)實(shí)現(xiàn)它的那個(gè)庫。這有助于確保jQuery不會(huì)與其他庫的$對(duì)象發(fā)生沖突。在運(yùn)行這個(gè)函數(shù)后，就只能使用jQuery變量訪問jQuery對(duì)象。例如，在要用到$("div p")的地方，就必須換成jQuery("div p")。

一、"$"操作符

1、jQuery默認(rèn)使用"$"操作符，prototype等其他框架也是是使用"$"，于是，如果jQuery在其他庫之后引入，那么jQuery將獲得"$"使用權(quán)。這樣的情況也很容易理解，畢竟JS是從上到下流式執(zhí)行的。

2、如果在其他使用"$"的庫之前引入jQuery，那么jQuery將不會(huì)占用"$"。

提示：在其他 JavaScript 庫為其函數(shù)使用 $ 時(shí)，該方法很有用。

我們?cè)趈query中獲取變量都會(huì)使用到$，但是還有很多插件都是可以使用$這個(gè)符號(hào)了，如果我們同時(shí)要引用就會(huì)導(dǎo)致出現(xiàn)問題了，jquery為了防止這種事情發(fā)生就引入了noconflict()

二、jQuery.noConflict的定義

jQuery.noConflict 方法包含一個(gè)可選的布爾參數(shù)，用以決定移交 $ 引用的同時(shí)是否移交 jQuery 對(duì)象本身：

jQuery.noConflict([removeAll])

函數(shù)的說明:

缺省情況下，執(zhí)行 noConflict 會(huì)將變量 $ 的控制權(quán)移交給第一個(gè)產(chǎn)生 $ 的庫；當(dāng) removeAll 設(shè)置為 true 時(shí)，執(zhí)行 noConflict 則會(huì)將 $ 和 jQuery 對(duì)象本身的控制權(quán)全部移交給第一個(gè)產(chǎn)生他們的庫。

三、jQuery.noConflict源碼分析

jQuery 源碼開頭，首先做的一件事情是這樣的：

// Map over jQuery in case of overwrite

_jQuery = window.jQuery,

// Map over the $ in case of overwrite

_$ = window.$,

容易理解的是，jQuery 通過兩個(gè)私有變量映射了 window 環(huán)境下的 jQuery 和 $ 兩個(gè)對(duì)象，以防止變量被強(qiáng)行覆蓋。一旦 noConflict 方法被調(diào)用，則通過 _jQuery, _$, jQuery, $ 四者之間的差異，來決定控制權(quán)的移交方式，具體的代碼如下：

noConflict: function( deep ) {

if ( window.$ === jQuery ) {

window.$ = _$;

}

if ( deep && window.jQuery === jQuery ) {

window.jQuery = _jQuery;

}

return jQuery;

}

再來看上面所說的參數(shù)設(shè)定問題，如果 deep 沒有設(shè)置，_$ 覆蓋 window.$，此時(shí) jQuery 別名 $ 失效，但 jQuery 本身完好無損。如果有其他類庫或代碼重新定義了 $ 變量，它的控制權(quán)就完全交接出去了。反之如果 deep 設(shè)置為 true 的話，_jQuery 覆蓋 window.jQuery，此時(shí) $ 和 jQuery 都將失效。

這種操作的好處是，不管是框架混用還是 jQuery 多版本共存這種高度沖突的執(zhí)行環(huán)境，由于 noConflict 方法提供的移交機(jī)制，以及本身返回未被覆蓋的 jQuery 對(duì)象，完全能夠通過變量映射的方式解決沖突。

四、jQuery.noConflict實(shí)例

1、將 $ 引用的對(duì)象映射回原始的對(duì)象：

jQuery.noConflict();

jQuery("div p").hide(); // 使用 jQuery

$("content").style.display = "none"; // 使用其他庫的 $()

2、恢復(fù)使用別名 $，然后創(chuàng)建并執(zhí)行一個(gè)函數(shù)，在這個(gè)函數(shù)的作用域中仍然將 $ 作為 jQuery 的別名來使用。在這個(gè)函數(shù)中，原來的 $ 對(duì)象是無效的。這個(gè)函數(shù)對(duì)于大多數(shù)不依賴于其他庫的插件都十分有效：

jQuery.noConflict();

(function($) {

$(function() {

// 使用 $ 作為 jQuery 別名的代碼

});

})(jQuery);

... // 其他用 $ 作為別名的庫的代碼

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

jQuery.noConflict()(function(){

// 使用 jQuery 的代碼

});

... // 其他庫使用 $ 做別名的代碼

4、創(chuàng)建一個(gè)新的別名用以在接下來的庫中使用 jQuery 對(duì)象：

var j = jQuery.noConflict();

j("div p").hide(); // 基于 jQuery 的代碼

$("content").style.display = "none";// 基于其他庫的 $() 代碼

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

var dom = {};

dom.query = jQuery.noConflict(true);

//結(jié)果:

dom.query("div p").hide(); // 新 jQuery 的代碼

$("content").style.display = "none"; // 另一個(gè)庫 $() 的代碼

jQuery("div > p").hide(); // 另一個(gè)版本 jQuery 的代碼

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

更多信息請(qǐng)查看IT技術(shù)專欄