jQuery源碼分析之noConflict()

noConflict()

noConflict()將 $或者 jQuery的控制權讓給第一個實現它的那個庫，確保 jQuery不會與其它庫的$對象發生衝突。

jQuery中源碼以下：

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

分析源碼以前，咱們應該注意幾個點：

• jQuery文件應該在其它衝突庫文件以後導入；noConflict()必須在你導入jQuery文件以後使用；
• 致使衝突的庫中必須已經存在一個$或者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){
//這裏判斷若是當前的window.$已經被jQuery佔用了，就把以前保存的prototype.js中的$的變量_$賦值給window.$進行覆蓋
    if(window.$ === jQuery){
        window.$ = _$;
    }
    //這裏判斷若是deep爲true而且當前的window.jQuery也已經被jQuery佔用了，就把以前保存的prototype.js中的jQuery的變量_jQuery賦值給window.jQuery進行覆蓋
    if(deep && window.jQuery === jQuery){
    window.jQuery = _jQuery;
    }
};

分析完上面的源碼以後，這裏有幾個點要思考一下：

爲何調用noConflict()以後咱們發現window.$已經等於jQuery了？

在jQuery代碼最後有一段代碼能夠解釋這個問題：

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

若是prototype.js中沒有衝突的命名空間，那調用noConflict()會怎麼樣麼？

若是以前沒有衝突的命名空間，那 _&和 _jQuery都是undefined，因此 window.$和 window.jQuery都會被undefined覆蓋；也就是說，只要調用了noConflict()，jQuery就會交出 $或者 jQuery的控制權，不管以前有沒有命名空間衝突

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