jQuery.noConflict方法解析

RobinTang 發布于2019-08-21 17:39 / 2801人閱讀

摘要：功能文檔中對方法的描述是釋放對變量的控制權。不是很明確，慢慢解釋下。類似的手法方法也實現了對變量的釋放控制主要用于同時引入多個版本的。這里只對全局變量的處理進行解析，變量的處理方式類似。所以其他占用全局變量的庫要先于引用，方法才能正確工作。

功能

jQuery API文檔中對noConflict方法的描述是："釋放jQuery對變量$的控制權"。( ′? ??`)不是很明確，慢慢解釋下。
我們都知道jQuery庫占用了全局變量$(是變量jQuery的別名), 但是其他JS庫也可以使用該變量了（比如zeptoJS, prototypejs）。當項目中同時引用了jQuery和其他占用全局變量$的庫時，可能會導致變量$沖突。所以jQuery在給全局變量$賦值的時候先保存當時全局變量$已經存在的值，然后通過jQuery.noConflict方法把原來保存的值重新賦值給全局變量$。

類似的手法noConflict方法也實現了對jQuery變量的釋放控制（主要用于同時引入多個版本的jQuery）。
這里只對全局變量$的處理進行解析，jQuery變量的處理方式類似。

實現

jQuery v3.2.1中noConflict方法的完整實現（解釋見注釋）：

var

    // 保存此時全局變量jQuery的值，可能其他版本的jQuery已經加載了
    _jQuery = window.jQuery,

    // 保存此時全局變量$的值，可能其JS庫已經占用了全局變量$
    _$ = window.$;

jQuery.noConflict = function( deep ) {
    // 如果此時全局變量$還屬于jQuery，則把全局變量$在jQuery初始化時的值_$重新賦值給$。
    if ( window.$ === jQuery ) {
        window.$ = _$;
    }
    // 如果參數deep為true且此時全局變量jQuery還屬于當前版本的jQuery，則把全局變量jQuery在當前版本jQuery初始化時的值_jQuery重新賦值給jQuery。
    if ( deep && window.jQuery === jQuery ) {
        window.jQuery = _jQuery;
    }
    // 返回當前版本的jQuery變量
    return jQuery;
};

通過實現發現jQuery庫在且只在初始化的時候會保存當時全局變量$和jQuery的值，保存的值會在方法noConflict調用的時候復原。所以其他占用全局變量$的庫要先于jQuery引用，noConflit方法才能正確工作。

舉例

假設有個js文件glib.js也占用了全局變量$:

;(function() {
    var glib = function() {
        console.log("I am from glib js");
    };

    window.$ = window.glib = glib;
})()

index.html 內容:




    jQuery


hi jQuery noConflit

注意一定在jQuery前引用glib.js文件。這樣當jQuery初始化時，全局變量已經被glib占用了。

其他

調用noConflict方法釋放全局變量$的控制權后，可以使用變量jQuery使用代替，或者給jQuery另其一個別名（$也只是一個別名?。?/p>

怎么還可以使用變量$呢？一般通過立即執行函數方式繼續使用全局變量$

參考

jQuery API noConflict

云服務器 GPU云服務器萬網域名解析方法 json解析方法二級域名解析方法 dns域名解析方法

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

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

jQuery源碼分析之noConflict()

摘要：將或者的控制權讓給第一個實現它的那個庫，確保不會與其它庫的對象發生沖突。 noConflict() noConflict()將$或者jQuery的控制權讓給第一個實現它的那個庫，確保jQuery不會與其它庫的$對象發生沖突。 jQuery中源碼如下： var _jQuery = window.jQuery, _$ = window.$; jQuery.noConflict =...

Yuanf 2019-08-20 15:42 評論0 收藏0
jQuery（一）-- 初步了解

摘要：一初步了解介紹由創建于年一月的開源項目，憑借著跨平臺的兼容性，簡潔的語法，極大的簡化了人員遍歷文檔，操作，處理事件，執行動畫，和開發的操作。只建立一個名為的對象。對發生在同一個對象上的一組動作，可以直接連寫無需重復獲取對象。 jQuery（一）-- 初步了解 jQuery介紹由John Resig創建于2006年一月的開源項目，jQuery憑借著跨平臺的兼容性，簡潔的語法，極大的簡...

quietin 2019-08-26 10:43 評論0 收藏0
淺析jQuery整體框架與實現（上）

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

VEIGHTZ 2019-08-21 10:20 評論0 收藏0
「jQuery插件開發日記」（一）如何建立一個基礎的插件 - [翻譯]

摘要：，翻譯自官方網站。如何建立一個基礎的插件有時，你想要在你的代碼里面實現一個可復用的功能。譯者注建立一個基礎的插件假設我們現在要建立一個讓元素里的文字變綠的插件。鏈式操作最大的特點之一就是支持鏈式操作。例如譯者注的作用是返還的控制權。 _How to Create a Basic Plugin_，翻譯自 jQuery 官方網站。如何建立一個基礎的插件有時，你想要在你的代碼里面實現一...

Sunxb 2019-08-21 10:39 評論0 收藏0
jQuery學習筆記

摘要：第二個參數是表示請求狀態的字符串，，，第三個參數是當錯誤發生時，具體的錯誤描述，等請求結束無論成功或失敗時的一個回調函數。一個參數名，默認是，一般用于指明回調函數名。的回調函數的執行順序與它們的添加順序一致。 jQuery學習筆記 jQuery大部分功能需要根據文檔的DOM模型來工作，首先需要正確地解析到整個文檔的DOM模型結構。使用jQuery需要在整個文檔被瀏覽器完全加載后才開始進...

qc1iu 2019-08-22 17:08 評論0 收藏0