jQuery源碼分析之noConflict()

Yuanf 發(fā)布于2019-08-20 15:42 / 1019人閱讀

摘要：將或者的控制權(quán)讓給第一個實現(xiàn)它的那個庫，確保不會與其它庫的對象發(fā)生沖突。

noConflict()

noConflict()將$或者jQuery的控制權(quán)讓給第一個實現(xiàn)它的那個庫，確保jQuery不會與其它庫的$對象發(fā)生沖突。

jQuery中源碼如下：

var _jQuery = window.jQuery,
    _$ = window.$;
jQuery.noConflict = function(deep){
    if(window.$ === jQuery){
        window.$ = _$;
    }
    if(deep && window.jQuery === jQuery){
    window.jQuery = _jQuery;
    }
};

分析源碼之前，我們應(yīng)該注意幾個點：

jQuery文件應(yīng)該在其它沖突庫文件之后導(dǎo)入；noConflict()必須在你導(dǎo)入jQuery文件之后使用；

導(dǎo)致沖突的庫中必須已經(jīng)存在一個$或者jQuery的命名空間，否則_jQuery = window.jQuery和_$ = window.$就沒有意義了

下面開始分析源碼：

假如我們引入了兩個庫，prototype.js和jQuery.js。prototype.js在前,jQuery.js在后，并且prototype.js中存在一個$的命名空間

//這句代碼其實是在jQuery文件最開始的地方定義的，目的是保存prototype.js文件中的$或者jQuery命名空間
var _jQuery = window.jQuery,_$ = window.$;
jQuery.noConflict = function(deep){
//這里判斷如果當(dāng)前的window.$已經(jīng)被jQuery占用了，就把之前保存的prototype.js中的$的變量_$賦值給window.$進行覆蓋
    if(window.$ === jQuery){
        window.$ = _$;
    }
    //這里判斷如果deep為true并且當(dāng)前的window.jQuery也已經(jīng)被jQuery占用了，就把之前保存的prototype.js中的jQuery的變量_jQuery賦值給window.jQuery進行覆蓋
    if(deep && window.jQuery === jQuery){
    window.jQuery = _jQuery;
    }
};

分析完上面的源碼之后，這里有幾個點要思考一下：

為什么調(diào)用noConflict()之后我們發(fā)現(xiàn)window.$已經(jīng)等于jQuery了？
在jQuery代碼最后有一段代碼可以解釋這個問題：

if ( typeof window === "object" && typeof window.document === "object" ) {
    window.jQuery = window.$ = jQuery;
}

如果prototype.js中沒有沖突的命名空間，那調(diào)用noConflict()會怎么樣么？
如果之前沒有沖突的命名空間，那_&和_jQuery都是undefined，所以window.$和window.jQuery都會被undefined覆蓋；也就是說，只要調(diào)用了noConflict()，jQuery就會交出$或者jQuery的控制權(quán)，無論之前有沒有命名空間沖突

參考資料：
http://www.imooc.com/learn/172