三分鐘帶你玩jQuery.noConflict()_jquery

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

jQuery.noConflict()的作用？

  jQuery.noConflict()的存在只有一個目的：它允許你在同一個頁面載入多個jQuery實例，尤其是不同版本的jQuery。你可能會覺得奇怪，為什麼要在一個頁面載入/使用多個不同版本的jQuery物件呢？一般而言，有兩種情況。第一種情況，你的業務程式碼採用了最新版的jQu​​ery函式庫，而你選用的第三方外掛所依賴的更早版本的jQuery函式庫；第二種情況，你正維護著一個系統，它已有的業務程式碼由於各種原因，引用了較舊版本的jQuery函式庫，你新開發的模組採用的是其他版本的jQuery函式庫。不論哪種情況，你都不得不面對，jQuery物件/方法衝突的問題。幸運的是，jQuery.noConflict()幫你解決了這個煩惱。

jQuery被載入時發生了什麼事？

當jQuery被頁面引用/載入時，它被封裝在一個自執行函數（匿名函數）裡，它提供的所有一切變數、函數、物件都在匿名函數內部的可執行環境內，外部環境無法呼叫,以防止全域命名空間污染。

<script src="//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; 

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="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- jQuery and $ now point to jQuery 1.10.2 -->
<script src="//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="//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库和第三方库的冲突，下面出现的代码片段在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> 

使用自执行函数封装

使用这种方式，你可以在匿名函数内部继续使用标准的$对象，这也是众多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> 

使用标准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>

下面给大家介绍jQuery noConflict() 方法

noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。

实例

当然，您仍然可以通过全名替代简写的方式来使用 jQuery：

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

实例

您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。请看这个例子：

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

实例

如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：

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