jQuery原始碼解讀之init函式

2021-08-30 02:14:21 字數 1624 閱讀 9946

// 直接new了乙個物件。同時根據jquery.fn = jquery.prototype,jquery.fn相當於jquery.prototype。

jquery = function( selector, context ) ,

init = jquery.fn.init = function( selector, context, root ) ;

init.prototype = jquery.fn;

// init的原型指向了jquery.fn,而jquery.fn=jquery.prototype即init.prototype=jquery.prototype

// 根據js原型鏈的知識,我們通過init方法構造出來的物件,能訪問jquery.prototype物件的方法。

// 當我們使用類似$(***)的時候,jquery為我們new了乙個物件,並且這個物件的原型鏈指向jquery.prototype,我們可以直接使用jquery.prototype上的方法。

init = jquery.fn.init = function( selector, context, root ) 

//定義了root為rootjquery,這裡的rootjquery其實就是jquery( document ),主要用於選擇器為空的時候,用rootjquery上下文來代替空值,繼續下面的鏈式操作

root = root || rootjquery;

//判斷selector是否為字串、是否為dom型別、是否是乙個function。

// 如果selector為字串,通過正則判斷selector是不是html字串

if ( typeof selector === "string" ) else

//匹配html或確保沒有為#id指定上下文

//selector為html字串

if ( match && ( match[ 1 ] || !context ) ) else }}

return this;

// handle: $(#id)

//不存在html標記時直接通過match[2]也就是id去取對應元素

} else

return this;

}// handle: $(expr, $(...))

//如果不是html字串,判斷有沒有context

//有context的話,使用context呼叫find方法(也就是sizzle)

//沒有就是用document為context呼叫find。

} else if ( !context || context.jquery ) else

// handle: $(domelement)

} else if ( selector.nodetype ) else if ( jquery.isfunction( selector ) )

// 處理成jquery陣列,這裡的makearray對外是將乙個類陣列物件轉換為真正的陣列物件,對內有個過載,就是處理成jquery陣列物件。

return jquery.makearray( selector, this );

};

參考:

jquery原始碼解讀之callbacks篇

callbacks模組通過維護乙個 函式列表,來實現對 函式地管理。其操作包括增加,觸發,移除,清空,禁用,鎖定等,是jquery.defrred,jquery.ajax,jquery.ready等依賴的底層模組。let cblist callbacks once memory let fn arg...

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...