快捷導(dǎo)航

jQuery中noconflict函數(shù)的實(shí)現(xiàn)原理分解

更新時(shí)間：2015年02月03日 09:21:33 作者：Hito''s Blog

這篇文章主要介紹了jQuery中noconflict函數(shù)的實(shí)現(xiàn)原理分解,noconflict是用來防止變量沖突的,本文就分解了它的實(shí)現(xiàn)原理,并分析了它的實(shí)現(xiàn)源碼,需要的朋友可以參考下

jQuery中，noconflict是用來防止變量沖突，用來釋放變量控制權(quán)的一個(gè)重要方法。我們知道，jQuery中對(duì)外提供有兩個(gè)全局變量，$和jQuery，雖然jQuery只產(chǎn)生了兩個(gè)全局變量，極少情況下才會(huì)出現(xiàn)沖突，但是如果網(wǎng)頁中如果包涵較多的類庫,有自定義$或jQuery全局變量的存在時(shí)，就產(chǎn)生沖突。

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

先來看一下jQuery源碼中noconflict的實(shí)現(xiàn):

(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擴(kuò)展靜態(tài)屬性的方法，這里可以看成直接在jQuery上附加noConflict方法。在匿名函數(shù)的內(nèi)部，分別定義內(nèi)部變量_jQuery和_$用來存儲(chǔ)window.jQuery和window.$, 這么做的用作在于用內(nèi)部變量保存jQuery運(yùn)行之前這兩個(gè)全局變量的狀態(tài), 以便在后面的防沖突操作中還原這兩個(gè)變量。noConflict可處理$和jQuery這兩個(gè)變量沖突的情況，默認(rèn)處理$,傳入一個(gè)true參數(shù)，則處理jQuery沖突的情況。
window.$ === jQuery用來判斷全局變量是否等于jQuery，如果等于，則重新還原全局變量$為jQuery運(yùn)行之前的變量(存儲(chǔ)在內(nèi)部變量 _$ 中)；deep && window.jQuery === jQuery 當(dāng)開啟深度沖突處理并且全局變量jQuery等于內(nèi)部jQuery，則把全局jQuery還原成之前的狀況。判斷window.$ === jQuery和window.jQuery=jQuery的意義在于保護(hù)已經(jīng)定義的變量不被重寫，如下面的代碼：

//引入jQuery庫
var $="String";
var jq=jQuery.noconflict();
var jQuery="This is a line";
var j=jq.noconflict(true);
console.log($);//這里如果沒有window.$===jQuery這句判斷，那么$將會(huì)等于undefined而不是"String"。
console.log(jQuery); //同上，如果沒有判斷window.jQuery===jQuery，重新定義的jQuery就會(huì)被undefined覆蓋。

整個(gè)運(yùn)行流程參加下圖：