jQuery是目前使用最廣泛的前端框架之一，有大量的第三方庫和插件基于它開發(fā)。為了避免全局命名空間污染，jQuery提供了jQuery.noConflict()方法解決變量沖突。這個(gè)方法，毫無疑問，非常有效。遺憾的是，jQuery的官方文檔對該方法的描述不夠清晰，許多開發(fā)者并不清楚當(dāng)他們調(diào)用jQuery.noConflict()時(shí)，究竟發(fā)生了什么，從而導(dǎo)致在使用時(shí)出現(xiàn)了許多問題。盡管如此，jQuery.noConflict()背后實(shí)現(xiàn)原理依然值得Web開發(fā)者學(xué)習(xí)掌握，成為解決類似全局命名空間污染問題的利器。

jQuery.noConflict()的作用？

  jQuery.noConflict()的存在只有一個(gè)目的：它允許你在同一個(gè)頁面加載多個(gè)jQuery實(shí)例，尤其是不同版本的jQuery。你可能會(huì)覺得奇怪，為什么要在一個(gè)頁面加載/使用多個(gè)不同版本的jQuery對象呢？一般而言，有兩種情況。第一種情況，你的業(yè)務(wù)代碼采用了最新版的jQuery庫，而你選用的第三方插件依賴的更早版本的jQuery庫；第二種情況，你正維護(hù)著一個(gè)系統(tǒng)，它已有的業(yè)務(wù)代碼由于各種原因，引用了較老版本的jQuery庫，你新開發(fā)的模塊采用的是其他版本的jQuery庫。不論哪種情況，你都不得不面對，jQuery對象/方法沖突的問題。幸運(yùn)的是，jQuery.noConflict()幫你解決了這個(gè)煩惱。

jQuery被加載時(shí)發(fā)生了什么？

當(dāng)jQuery被頁面引用/加載時(shí)，它被封裝在一個(gè)自執(zhí)行函數(shù)（匿名函數(shù)）里，它提供的所有一切變量、函數(shù)、對象都在匿名函數(shù)內(nèi)部的可執(zhí)行環(huán)境內(nèi)，外部環(huán)境無法調(diào)用,以防止全局命名空間污染。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

jQuery在匿名函數(shù)內(nèi)部定義了兩個(gè)全局對象:jQuery和$，把自己暴露給外部環(huán)境。開發(fā)者習(xí)慣使用的各種公共方法都是通過這兩個(gè)對象進(jìn)行訪問的，如jQuery.ajax(),jQuery.css()等。在最初，它們指向匿名函數(shù)內(nèi)部的同一個(gè)對象jQuery(私有變量)，通過它訪問匿名函數(shù)內(nèi)部的私有變量和函數(shù)。這使得匿名函數(shù)在自執(zhí)行后其內(nèi)部的私有變量和函數(shù)仍然進(jìn)駐在內(nèi)存里，不會(huì)被javascript的垃圾回收機(jī)制清除。

window.jQuery = window.$ = jQuery; 

當(dāng)jQuery被頁面加載后，當(dāng)前頁面有可能已經(jīng)存在了jQuery和$這兩個(gè)全局變量（比如，加載了其它的第三方庫，其內(nèi)部也定義了它倆），這就會(huì)導(dǎo)致已經(jīng)存在的對象被覆蓋（全局命名空間污染）。為了解決這個(gè)問題，jQuery在內(nèi)部先將已經(jīng)存在的全局變量緩存起來，保存在私有變量_jQuery和_$中，供后續(xù)調(diào)用。所以，如果頁面在加載jQuery庫時(shí)，還不存在jQuery和$對象，那么_jQuery和_$都是undefined；否則，它們都會(huì)保存對已有jQuery和$的引用（也許來自之前引用的第三方庫或是不同版本的jQuery庫）。之后，jQuery會(huì)像上文說描述的那樣，覆蓋這兩個(gè)全局變量并將自己暴露給外部環(huán)境。至此，頁面上的全局變量jQuery和$已經(jīng)指向剛剛引入的jQuery庫。

// Map over jQuery in case of overwrite_jQuery = window.jQuery,// Map over the $ in case of overwrite_$ = window.$,// Otherwise expose jQuery to the global object as usualwindow.jQuery = window.$ = jQuery; 

jQuery.noConflict()的神奇效果？

假設(shè)你維護(hù)的系統(tǒng)已經(jīng)引用了1.7.0版本的jQuery庫，而你在新添加的功能里引用了1.10.2版本的jQuery庫。那么，還有辦法重新使用jQuery 1.7.0 或是同時(shí)使用兩個(gè)版本的jQuery庫嗎？答案是肯定，那就是jQuery.noConflict()。實(shí)際上，利用jQuery.noConflict()，你可以立刻把全局變量jQuery和$重新指向之前引用的對象。很神奇吧？這就是為什么jQuery在對外暴露自己前內(nèi)部緩存了之前引用的對象。

  jQuery.noConflict()接受一個(gè)可選的布爾值參數(shù)，通常默認(rèn)值是false。這個(gè)參數(shù)會(huì)帶來什么影響呢？其實(shí)，很簡單。如果調(diào)用jQuery.noConflict()或是jQuery.noConflict(false)，只有全局變量$會(huì)被重置恢復(fù)成之前的引用值；如果調(diào)用jQuery.noConflict()或是jQuery.noConflict(true)，那么全局變量jQuery和$都會(huì)被重置恢復(fù)成之前的引用值。這一點(diǎn)非常重要，建議牢記。當(dāng)你調(diào)用jQuery.noConflict(false/true)之后，它會(huì)返回當(dāng)前jQuery的實(shí)例，利用這個(gè)特性我們可以實(shí)現(xiàn)jQuery的重命名。

// "Renaming" jQueryvar jayquery = jQuery.noConflict( true );// Now we can call things like jayquery.ajax(), jayquery.css(), and so on

我們再來看一個(gè)代碼片段，測試一下是否真正理解了神奇的noConflict()

<!-- jQuery and $ are undefined --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><!-- jQuery and $ now point to jQuery 1.10.2 --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"><!-- jQuery and $ now point to jQuery 1.7.0 --><script>jQuery.noConflict();</script><!-- jQuery still points to jQuery 1.7.0; $ now points to jQuery 1.10.2 --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"><!-- jQuery and $ now point to jQuery 1.6.4 --><script>var jquery164 = jQuery.noConflict( true );</script><!-- jQuery now points to jQuery 1.7.0; $ now points to jQuery 1.10.2; jquery164 points to jQuery 1.6.4 --> 

避免第三方庫的沖突

以上的代碼片段展示了如何解決多版本jQuery的沖突。接下來，我們嘗試解決jQuery庫和第三方庫的沖突，下面出現(xiàn)的代碼片段在jQuery的官方文檔中都有，有興趣的程序猿可以仔細(xì)閱讀官方文檔體會(huì)其中的區(qū)別。

直接使用No-Conflict模式

使用No-Conflict模式，其實(shí)就是對jQuery進(jìn)行重命名，再調(diào)用。

<!-- 采用no-conflict模式，jquery.js在prototype.js之后被引入. --><script src="prototype.js"></script><script src="jquery.js"></script><script>var $j = jQuery.noConflict();// $j 引用了jQuery對象本身.$j(document).ready(function() {$j( "div" ).hide();});// $ 被重新指向prototype.js里定義的對象// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.window.onload = function() {var mainDiv = $( "main" );}</script> 

使用自執(zhí)行函數(shù)封裝

使用這種方式，你可以在匿名函數(shù)內(nèi)部繼續(xù)使用標(biāo)準(zhǔn)的$對象，這也是眾多jQuery插件采用的方法。需要注意的是，使用這種方法，函數(shù)內(nèi)部無法再使用prototype.js定義的$對象了。

<!-- jquery.js在prototype.js之后被引入. --><script src="prototype.js"></script><script src="jquery.js"></script><script>jQuery.noConflict();(function( $ ) {// Your jQuery code here, using the $})( jQuery );</script> 

使用標(biāo)準(zhǔn)jQuery(document).ready()函數(shù)

如果jQuery庫在其它庫之前引入，那么jQuery內(nèi)部定義的jQuery和$會(huì)被第三方庫覆蓋，這時(shí)候再使用noConflict()已經(jīng)沒有什么意義了。解決的方法很簡單，直接使用jQuery的標(biāo)準(zhǔn)調(diào)用方式。

<!-- jquery.js在prototype.js之前被引入. --><script src="jquery.js"></script><script src="prototype.js"></script><script>// Use full jQuery function name to reference jQuery.jQuery( document ).ready(function() {jQuery( "div" ).hide();});// 或者jQuery(function($){// Your jQuery code here, using the $});// Use the $ variable as defined in prototype.jswindow.onload = function() {var mainDiv = $( "main" );};</script>

下面給大家介紹jQuery noConflict() 方法

noConflict() 方法會(huì)釋放會(huì) $ 標(biāo)識符的控制，這樣其他腳本就可以使用它了。

實(shí)例

當(dāng)然，您仍然可以通過全名替代簡寫的方式來使用 jQuery：

$.noConflict();jQuery(document).ready(function(){jQuery("button").click(function(){jQuery("p").text("jQuery 仍在運(yùn)行！");});});

實(shí)例

您也可以創(chuàng)建自己的簡寫。noConflict() 可返回對 jQuery 的引用，您可以把它存入變量，以供稍后使用。請看這個(gè)例子：

var jq = $.noConflict();jq(document).ready(function(){jq("button").click(function(){jq("p").text("jQuery 仍在運(yùn)行！");});});

實(shí)例

如果你的 jQuery 代碼塊使用 $ 簡寫，并且您不愿意改變這個(gè)快捷方式，那么您可以把 $ 符號作為變量傳遞給 ready 方法。這樣就可以在函數(shù)內(nèi)使用 $ 符號了 - 而在函數(shù)外，依舊不得不使用 "jQuery"：

$.noConflict();jQuery(document).ready(function($){$("button").click(function(){$("p").text("jQuery 仍在運(yùn)行！");});});