jQuery中noconflict函數的實作原理分解_jquery

jQuery中，noconflict是用來防止變數衝突，用來釋放變數控制權的一個重要方法。我們知道，jQuery中對外提供有兩個全域變量，$和jQuery，雖然jQuery只產生了兩個全域變量，極少情況下才會出現衝突，但是如果網頁中如果包涵較多的類別庫,有自定義$或jQuery全域變數的存在時，就產生衝突。

jQuery提供的noconflict函數很好的解決了變數衝突問題，無論是$或jQuery衝突都可以解決，接下來我們就來分析一下jQuery的衝突處理。

先來看看jQuery原始碼中noconflict的實作:

(function(window,undefined){
var 
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
jQuery.extend({
noConflict: function( deep ){
 if ( window.$ === jQuery ) {
 window.$ = _$;
 }
 if ( deep && window.jQuery === jQuery ) {
 window.jQuery = _jQuery;
 }
 return jQuery;
}
})
}(window)

這裡jQuery.extend是jQuery擴充靜態屬性的方法，這裡可以看成直接在jQuery上附加noConflict方法。在匿名函數的內部，分別定義內部變數_jQuery和_$用來儲存window.jQuery和window.$, 這麼做的用作在於用內部變數保存jQuery運行之前這兩個全域變數的狀態, 以便在後面的防衝突操作中還原這兩個變數。 noConflict可處理$和jQuery這兩個變數衝突的情況，預設處理$,傳入一個true參數，則處理jQuery衝突的情況。
window.$ === jQuery用來判斷全域變數是否等於jQuery，如果等於，則重新還原全域變數$為jQuery執行之前的變數(儲存在內部變數_$ 中)；deep && window.jQuery === jQuery當開啟深度衝突處理且全域變數jQuery等於內部jQuery，則把全域jQuery還原成之前的狀況。判斷window.$ === jQuery和window.jQuery=jQuery的意義在於保護已經定義的變數不被重寫，如下面的程式碼：

//引入jQuery库
var $="String";
var jq=jQuery.noconflict();
var jQuery="This is a line";
var j=jq.noconflict(true);
console.log($);//这里如果没有window.$===jQuery这句判断，那么$将会等于undefined而不是"String"。
console.log(jQuery); //同上，如果没有判断window.jQuery===jQuery，重新定义的jQuery就会被undefined覆盖。

整個運作流程參加下圖：

noConflict回傳的是jQuery函式庫內部的jQuery建構函式, 像使用$一樣盡情使用它吧!