三分鐘玩轉jQuery.noConflict()

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

jQuery.noConflict()的作用？

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

jQuery被加載時發生了什么？

當jQuery被頁面引用/加載時，它被封裝在一個自執行函數（匿名函數）里，它提供的所有一切變量、函數、對象都在匿名函數內部的可執行環境內，外部環境無法調用,以防止全局命名空間污染。

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

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

window.jQuery = window.$ = jQuery;

當jQuery被頁面加載后，當前頁面有可能已經存在了 jQuery 和 $ 這兩個全局變量（比如，加載了其它的第三方庫，其內部也定義了它倆），這就會導致已經存在的對象被覆蓋（全局命名空間污染）。為了解決這個問題，jQuery在內部先將已經存在的全局變量緩存起來，保存在私有變量 _jQuery 和 _$ 中，供后續調用。所以，如果頁面在加載jQuery庫時，還不存在 jQuery 和 $ 對象，那么 _jQuery 和 _$ 都是 undefined ；否則，它們都會保存對已有 jQuery 和 $ 的引用（也許來自之前引用的第三方庫或是不同版本的jQuery庫）。之后，jQuery會像上文說描述的那樣，覆蓋這兩個全局變量并將自己暴露給外部環境。至此，頁面上的全局變量 jQuery 和 $ 已經指向剛剛引入的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 usual
window.jQuery = window.$ = jQuery;</pre> 
 
jQuery.noConflict()的神奇效果？

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

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

 
// "Renaming" jQuery
var jayquery = jQuery.noConflict( true );
// Now we can call things like jayquery.ajax(), jayquery.css(), and so on
 
 
 我們再來看一個代碼片段，測試一下是否真正理解了神奇的 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 --></pre> 
 
避免第三方庫的沖突

以上的代碼片段展示了如何解決多版本jQuery的沖突。接下來，我們嘗試解決jQuery庫和第三方庫的沖突，下面出現的代碼片段在jQuery的官方文檔中都有，有興趣的程序猿可以仔細閱讀官方文檔體會其中的區別。
直接使用No-Conflict模式
使用No-Conflict模式，其實就是對jQuery進行重命名，再調用。
<!-- 采用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></pre> 
 
使用自執行函數封裝

 使用這種方式，你可以在匿名函數內部繼續使用標準的 $ 對象，這也是眾多jQuery插件采用的方法。需要注意的是，使用這種方法，函數內部無法再使用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></pre> 
 
使用標準jQuery(document).ready()函數

 如果jQuery庫在其它庫之前引入，那么jQuery內部定義的 jQuery 和 $ 會被第三方庫覆蓋，這時候再使用 noConflict() 已經沒有什么意義了。解決的方法很簡單，直接使用jQuery的標準調用方式。 
<!-- 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.js
window.onload = function() {
    var mainDiv = $( "main" );
};
</script></pre> </div>