jQuery源碼學習之extend

quietin 發布于2019-08-23 10:27 / 3160人閱讀

摘要：源碼學習之用于合并對象，可選擇是否深復制。盡管官方文檔明確指出第一個參數是的調用情況并不支持，但是這個版本的源碼中，判斷第一個參數的類型雖有限定是類型，但卻未對其值真假加以限定。調用方式源碼和指向同一個函數，在函數內部，對調用情況進行區分。

jQuery源碼學習之extend

$.extend用于合并對象，可選擇是否深復制。使用時，第一個參數為合并后的對象。如果要進行深拷貝，則參數1為true，參數2為要合并的目標對象。盡管jQuery官方文檔明確指出第一個參數是false的調用情況并不支持，但是這個版本的源碼中，判斷第一個參數的類型雖有限定是boolean類型，但卻未對其值真假加以限定。所以第一個參數是false也是可行的。

$.fn.extend({})用于拓展jq原型對象，使用只能傳入一個對象，多用于jq插件定義。

調用方式

jQuery.extend( target [, object1 ] [, objectN ] )
Query.extend( [deep ], target, object1 [, objectN ] )
jQuery.fn.extend( object )

源碼

jQuery.extend和jQuery.fn.extend指向同一個函數，在函數內部，對調用情況進行區分。首先判斷第一個參數的類型，確定是否顯式指定深復制。使用target保存合并對象的引用，如果target不是對象的，要指向空對象。

接著判斷參數的個數，區別jQuery.extend或jQuery.fn.extend的調用。然后使用for循環，從第二個參數開始遍歷，進行拷貝；拷貝時使用src保存target上的屬性，copy保存被合并對象上的屬性。使用for...in循環遍歷屬性名進行拷貝，拷貝時忽略對target自身引用，copy為空時也會被忽略，如果根據是否需要深拷貝來決定是否對object和array遞歸深拷貝。如果是淺拷貝，直接保存值或引用。

值得一提的是，遍歷被合并對象時使用的是for...in循環，所以傳入string和array類型的參數也會被遍歷，在合并后對象中的屬性名為索引。由于遍歷參數是從target后的第一個參數開始，所以先傳入的對象會被后傳入對象的同名屬性覆蓋。

jQuery.extend = jQuery.fn.extend = function() {
    // target是對象或true，從第二個參數開始遍歷
    var options, name, src, copy, copyIsArray, clone,
        target = arguments[ 0 ] || {},
        i = 1,
        length = arguments.length,
        deep = false;

    // Handle a deep copy situation
    // 第一個參數如果是boolean，表明顯示指定是否深復制
    if ( typeof target === "boolean" ) {
        deep = target;

        // Skip the boolean and the target
        // 將target指向第一個參數，從第三個參數開始合并
        target = arguments[ i ] || {};
        i++;
    }

    // Handle case when target is a string or something (possible in deep copy)
    // 不是對象或函數，將target設置默認空
    if ( typeof target !== "object" && !jQuery.isFunction( target ) ) {
        target = {};
    }

    // Extend jQuery itself if only one argument is passed
    // 只有一個參數，即$.fn.extend({}),target指向jq原型
    if ( i === length ) {
        target = this;
        i--;
    }

    // 先傳入的對象會被后傳入對象的同名屬性覆蓋
    for ( ; i < length; i++ ) {

        // Only deal with non-null/undefined values
        // 保存當前的非空對象。
        if ( ( options = arguments[ i ] ) != null ) {

            // Extend the base object
            // 遍歷，for...in會遍歷數組或字符串
            // src為target屬性值，copy為闖入對象的屬性值
            for ( name in options ) {
                src = target[ name ];
                copy = options[ name ];

                // Prevent never-ending loop
                // 自身的屬性指向自身，這種情況避免無限循環，跳過自身引用的復制
                if ( target === copy ) {
                    continue;
                }

                // Recurse if we"re merging plain objects or arrays
                // 深復制時，調用$.extend遞歸調用。
                // 復制時保存屬性的原始類型，只有對象或數組才必要進行深復制
                if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
                    ( copyIsArray = Array.isArray( copy ) ) ) ) {

                    if ( copyIsArray ) {
                        copyIsArray = false;
                        clone = src && Array.isArray( src ) ? src : [];

                    } else {
                        clone = src && jQuery.isPlainObject( src ) ? src : {};
                    }

                    // Never move original objects, clone them
                    target[ name ] = jQuery.extend( deep, clone, copy );

                // Don"t bring in undefined values
                // 淺復制，值非空直接復制或保存引用
                } else if ( copy !== undefined ) {
                    target[ name ] = copy;
                }
            }
        }
    }

    // Return the modified object
    return target;
};

GPU云服務器云服務器學習之substr() 深度學習之概要 webrtc學習之九 linux學習之centos

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

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

jQuery源碼學習之event

摘要：回調隊列中的元素是對象，代表一個事件回調，擁有多個屬性，如等等，其中是回調函數，在觸發時通過傳遞，具體的在后面講。類型是時鍵表示事件名，規則同上，鍵值表示事件觸發時的回調函數。 jQuery源碼學習之event jQuery的事件機制為異步回調，事件監聽的屬性、參數和回調的等保存在Data實例中，在元素上保存該對象的引用。有方法handle，內部執行dispatch；有屬性events...

XboxYan 2019-08-26 12:11 評論0 收藏0
jQuery源碼學習之Callbacks

摘要：源碼學習之的通過回調實現異步，其實現核心是?；卣{函數隊列中的函數返回時停止觸發回調函數隊列只能被觸發一次記錄上一次觸發隊列傳入的值，新添加到隊列中的函數使用記錄值作為參數，并立即執行。實際是，內部則調用了在定義的局部函數。 jQuery源碼學習之Callbacks jQuery的ajax、deferred通過回調實現異步，其實現核心是Callbacks。使用方法使用首先要先新建一個...

lmxdawn 2019-08-22 18:34 評論0 收藏0
Javascript設計模式學習之Decorator(裝飾者)模式

摘要：抽象模式使用的裝飾者模式允許我們在運行時或者在隨后一個點上動態地將兩個或兩個以上的對象和它們的屬性一起擴展或合并為一個單一對象。定義三個對象目的是為了裝飾對象將的額外功能附加到上。抽象decorator模式使用jQuery的裝飾者模式 jQuery.extend()允許我們在運行時或者在隨后一個點上動態地將兩個或兩個以上的對象(和它們的屬性)一起擴展(或合并）為一個單一對象。定義...

Joyven 2019-08-19 17:50 評論0 收藏0
java第三方包學習之jsoup

摘要：下面隆重介紹簡介是一個解析的第三方庫，它提供了一套非常方便的，可使用，以及類的操作方法來取出和操作數據。一個文檔的對象模型文檔由多個和組成其繼承結構如下繼承繼承繼承一個包含一個子節點集合，并擁有一個父。前言使用python寫爬蟲的人，應該都聽過beautifulsoup4這個包，用來它來解析網頁甚是方便。那么在java里有沒有類似的包呢？當然有啦！而且也非常好用。下面隆重介紹jso...

dackel 2019-08-14 17:06 評論0 收藏0
集合框架源碼學習之ArrayList

摘要：用戶自己指定容量創建大小的數組創建空數組默認構造函數，其默認初始容量為構造一個包含指定集合的元素的列表，按照它們由集合的迭代器返回的順序。以正確的順序返回該列表中的元素的迭代器。此方法充當基于陣列和基于集合的之間的橋梁。目錄： 0-0-1. 前言 0-0-2. 集合框架知識回顧 0-0-3. ArrayList簡介 0-0-4. ArrayList核心源碼 0-0-5. Ar...

BLUE 2019-08-15 15:16 評論0 收藏0