jQuery技術內幕預覽版.pdf3

標籤：blog   http   java   io   2014   ar   cti   代碼   

jQuery.fn.init(selector,context,rootjQuery):建構函式 jQuery.fn.init() 負責解析參數 selector 和 context 的類型，並執行相應的邏輯，最

後返回 jQuery.fn.init() 的執行個體，共有12個有效分支

源碼分析

定義jQuery.fn.init(selector,context,rootjQuery)

init:function(selector,context,rootjQuery){

　　　　var match,elem,ret,doc;

　　}

參數 selector：可以是任意類型的值，但只有 undefined、DOM 元素、字串、函數、jQuery 對象、普通 JavaScript 對象這幾種類型是有效，其他類型的值也可以接受但

沒有意義

參數 context：可以不傳入，或者傳入 DOM 元素、jQuery 對象、普通 JavaScript 對象
之一

參 數 rootjQuery：包含了 document 對象的 jQuery 對 象， 用 於 document.getElement
ById() 尋找失敗、selector 是選取器運算式且未指定 context、selector 是函數的情況。
rootjQuery 的定義和應用情境的代碼如下所示

參數 selector 可以轉換為 false:例如是 undefined、Null 字元串、null 等，則直接返回 this，此時 this 是空 jQuery 對象，其屬性 length 等於 0

參數 selector 是 DOM 元素:

如果參數 selector 有屬性 nodeType，則認為 selector 是 DOM 元素，手動設定第一個元
素和屬性 context 指向該 DOM 元素、屬性 length 為 1，然後返回包含了該 DOM 元素引用的
jQuery 對象

參數 selector 是字串“body”:

如果參數 selector 是字串“ body”，手動設定屬性 context 指向 document 對象、第一
個元素指向 body元素、屬性 length 為 1，最後返回包含了 body 元素引用的 jQuery 對象

 參數 selector 是其他字串:

如果參數 selector 是其他字串，則先檢測 selector 是 HTML 程式碼還是 #id

第 126 ～ 128 行：如果參數 selector 以“ <”開頭、以“ >”結尾，且長度大於等於 3，
則假設這個字串是 HTML 片段，跳過正則 quickExpr 的檢查。注意這裡僅僅是假設，並不
一定表示它是真正合法的 HTML 程式碼，如“<div></p>”。
第 131 行：否則，用正則 quickExpr 檢測參數 selector 是否是稍微複雜一些的 HTML 代
碼（如“abc<div>”）或 #id，匹配結果存放在數組 match 中。

正則 quickExpr 包含兩個分組，依次匹配 HTML 程式碼和 id。如果匹配成功，則數組
match 的第一個元素為參數 selector，第二個元素為匹配的 HTML 程式碼或 undefined(放到第二位)，第三個
元素為匹配的 id 或 undefined（放到第三位）

41 quickExpr = /^(?:[^ # <]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,

（1）參數 selector 是單獨標籤，則調用document.createElement() 建立標籤對應的 DOM元素。

第 135 行：檢測正則 quickExpr 匹配參數 selector 的結果，如果 match[1] 不是 undefined，
即參數 selector 是 HTML 程式碼，或者 match[2] 不是 undefined，即參數 selector 是 #id，並且
未傳入參數 context。

if ( match && (match[1] || match[2] && !context) ) 

如 果 match 不 是 null 且 match[1] 是 undefined，那麼此時 match[2] 必然不是 undefined，
所以對 match[2] 的判斷可以省略。

第 146 ～ 153 行： 如 果 數 組 ret 不 是 null，則認為參數 selector 是 單 獨 標 簽， 調 用
document.createElement() 建立標籤對應的 DOM 元素；如果參數 context 是普通對象，則

jQuery 方法 .attr() 並傳入參數 context，同時把參數 context 中的屬性、事件設定到新建立的
DOM 元素上。