jquery3 0原始碼解讀(二)Extend

2021-07-22 15:47:13 字數 1857 閱讀 2416

上一節我們開啟了/src/core.js檔案,但是僅僅看了它的jquery物件的賦值。這節我們來仔細分析core.js檔案中的乙個重要內容——extend。

如果,簡單翻閱過jquery原始碼的話,你會發現原始碼中,也有多處呼叫了extend函式。所以,這個extend不光為外部提供呼叫,jquery內部同樣使用,可以說是乙個基礎函式。重要性可見一斑。

首先,通過jquery.extend = jquery.fn.extend,我們得知,jquery.extend和的**實現是相同的。關鍵在於方法的過載(jquery中使用了大量的過載)。

jquery.extend( target [, object1 ] [, objectn ] )

合併object1, objectn到target物件

jquery.extend( [deep ], target, object1 [, objectn ] )

深度複製合併物件,第乙個引數是boolean型別的true時,將object1, objectn深度複製後合併到target

jquery.extend(object)

合併object物件到jquery物件中

jquery.fn.extend(object)

合併object物件到jquery.prototype(也就是jquery.fn)物件中

這裡解釋下3和4的區別。一種是對jquery例項物件進行擴充套件,一種是對原型物件進行擴充套件。如果明白js原型鏈的話就很容易理解,後者的擴充套件會在所有jquery物件中體現,而前者不會。

接下來,看一下原始碼:

var options, name, src, copy, copyisarray, clone,

target = arguments[ 0 ] || {},

i = 1,

length = arguments.length,

deep = false;

if ( typeof target === "boolean" ) ;

i++;

}if ( typeof target !== "object" && !jquery.isfunction( target ) ) ;

}if ( i === length )

for ( ; i < length; i++ )

if ( deep && copy && ( jquery.isplainobject( copy ) ||

( copyisarray = jquery.isarray( copy ) ) ) ) else ;

}target[ name ] = jquery.extend( deep, clone, copy );

} else

if ( copy !== undefined ) }}

}return target;};

第一步:target被賦值成第乙個引數,並判斷是不是boolean值,如果是,deep賦值為第乙個引數,target賦值為第二個引數;

第二步:接著判斷target,是不是乙個字串,或者其他,是的話target就被賦值為空物件,主要用於容錯;

第三步:判斷剩餘引數長度(除去deep)是不是等於1,是的話,target就被賦值為this。如果是jquery.extend呼叫,this就是jquery,如果是jquery.fn.extend,this就是jquery.fn;

第四步:把i(用於標記第乙個object的index)後面的物件引數擴充套件進target即可,其中注意判斷深/淺拷貝就行。

至於如何擴充套件,邏輯很簡單,簡單實現如下:

function

(target, options)

return target;

}

這裡就不累述了。

jQuery原始碼解讀一

前言 我為什麼要看這個原始碼,很簡單,尋找我自己寫的js框架與jquery之間的差異,取長補短,最終目標是提高js程式設計的乙個眼界,看看別人是怎麼想的,因為自己乙個人的想法往往是片面的,也為了能讓自己的主觀漸漸接近客觀事實。雖然jquery框架能直接拿來用,但是對於偏愛研究的人來說,還是喜歡寫原生...

jquery原始碼解讀1

function global,factory returnfactory w else pass this if window is not defined yet typeofwindow undefined window this,function window,noglobal 其中形參gl...

jQuery原始碼解讀二(apply和call)

定義 應用某一物件的乙個方法,用另乙個物件替換當前物件。說明 如果argarray不是乙個有效的陣列或者不是arguments物件,那麼將導致乙個typeerror 如果沒有提供argarray和thisobj任何乙個引數,那麼global物件將被用作thisobj,並且無法被傳遞任何引數。語法 c...