jQuery源碼分析之noConflict()

Yuanf 發布于2019-08-20 15:42 / 1023人閱讀

摘要：將或者的控制權讓給第一個實現它的那個庫，確保不會與其它庫的對象發生沖突。

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

云服務器 GPU云服務器源碼中文說明之 noConflict jquery插件源碼jquery jquery源碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82439.html

underscore源碼剖析之整體架構

摘要：我這里有個不夠準確但容易理解的說法，就是檢查一個對象是否為另一個構造函數的實例，為了更容易理解，下面將全部以是的實例的方式來說。 underscore源碼分析之整體架構最近打算好好看看underscore源碼，一個是因為自己確實水平不夠，另一個是underscore源碼比較簡單，比較易讀。本系列打算對underscore1.8.3中關鍵函數源碼進行分析，希望做到最詳細的源碼分析。今...

2shou 2019-08-22 15:27 評論0 收藏0
學習 underscore 源碼整體架構，打造屬于自己的函數式編程類庫

摘要：譯立即執行函數表達式處理支持瀏覽器環境微信小程序。學習整體架構，利于打造屬于自己的函數式編程類庫。下一篇文章可能是學習的源碼整體架構。也可以加微信，注明來源，拉您進前端視野交流群。前言上一篇文章寫了jQuery整體架構，學習 jQuery 源碼整體架構，打造屬于自己的 js 類庫雖然看過挺多underscore.js分析類的文章，但總感覺少點什么。這也許就是紙上得來終覺淺，絕知此...

junnplus 2019-08-26 10:40 評論0 收藏0
FE.SRC-逐行分析jQuery2.0.3源碼-完整筆記

摘要：根據項目選型決定是否開啟。為了壓縮，可維護為了支持從而使用代替變量存儲防沖突會用到，形如版本號聲明最終調用的是這個原型實際上。功能檢測統一兼容性問題。概覽 (function (){ (21 , 94) 定義了一些變量和函數 jQuery=function(); (96 , 293) 給jQuery對象添加一些方法和屬性; (285 , 347) ...

Lin_R 2019-08-23 10:29 評論0 收藏0
FE.SRC-逐行分析jQuery2.0.3源碼-完整筆記

摘要：根據項目選型決定是否開啟。為了壓縮，可維護為了支持從而使用代替變量存儲防沖突會用到，形如版本號聲明最終調用的是這個原型實際上。功能檢測統一兼容性問題。概覽 (function (){ (21 , 94) 定義了一些變量和函數 jQuery=function(); (96 , 293) 給jQuery對象添加一些方法和屬性; (285 , 347) ...

褰辯話 2019-08-02 11:03 評論0 收藏0
淺析jQuery整體框架與實現（上）

摘要：通常的做法是，為它們指定回調函數。請求返回請求返回請求返回異步隊列解耦異步任務和回調函數為模塊隊列模塊事件提供基礎功能。前言 jQuery整體框架甚是復雜，也不易讀懂，這幾日一直在研究這個笨重而強大的框架。jQuery的總體架構可以分為：入口模塊、底層模塊和功能模塊。這里，我們以jquery-1.7.1為例進行分析。 jquery的總體架構 16 (function( window,...

VEIGHTZ 2019-08-21 10:20 評論0 收藏0