3.sizzle選擇器 · jQuery源碼構架

[toc] Sizzle 原本是 jQuery 中用來當作 DOM 選擇器的，后來被 John Resig 單獨分離出去，成為一個單獨的項目，可以直接導入到項目中使用。本來我們使用 jQuery 當作選擇器，選定一些 #id 或 .class，使用 document.getElementById 或 document.getElemensByClassName 就可以很快鎖定 DOM 所在的位置，然后返回給 jQuery 當作對象。但有時候會碰到一些比較復雜的選擇 div div.hot>span 這類肯定用上面的函數是不行的，首先考慮到的是 Element.querySelectorAll() 函數，但這個函數存在嚴重的兼容性問題MDN querySelectorAll。這個時候 sizzle 就派上用場了。 init 函數介紹中已經說明白，沒有介紹 find 函數，其本質上就是 Sizzle 函數在 jQuery 中的表現。這個函數在 jQuery 中兩種存在形式，即原型和屬性上分別有一個，先來看下 jQuery.fn.find: ``` jQuery.fn.find = function (selector) { var i, ret, len = this.length, self = this; // 這段話真不知道是個什么的 if (typeof selector !== "string") { // fn.pushStack 和 jquery.merge 很像，但是返回一個 jquery 對象，且 // jquery 有個 prevObject 屬性指向自己 return this.pushStack(jQuery(selector).filter(function () { for (i = 0; i < len; i++) { // jQuery.contains(a, b) 判斷 a 是否是 b 的父代 if (jQuery.contains(self[i], this)) { return true; } } })); } ret = this.pushStack([]); for (i = 0; i < len; i++) { // 在這里引用到 jQuery.find 函數 jQuery.find(selector, self[i], ret); } // uniqueSort 去重函數 return len > 1 ? jQuery.uniqueSort(ret) : ret; } ``` jQuery.fn.find 的用法一般在 `$('.test').find("span")`，所以此時的 this 是指向 `$('.test')` 的，懂了這一點，后面的東西自然而然就好理解了。然后就是 jQuery.find 函數，本章的重點討論部分。先來看一個正則表達式： ``` var rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/; rquickExpr.exec('#id') //["#id", "id", undefined, undefined] rquickExpr.exec('div') //["div", undefined, "div", undefined] rquickExpr.exec('.test') //[".test", undefined, undefined, "test"] rquickExpr.exec('div p')// null ``` 你可能會疑惑，rquickExpr 的名字已經出現過一次了。實際上 Sizzle 是一個閉包，這個 rquickExpr 變量是在 Sizzle 閉包內的，不會影響到 jQuery 全局。這個正則的作用主要是用來區分 tag、id 和 class，而且從返回的數組也有一定的規律，可以通過這個規律來判斷 selector 具體是哪一種。 ``` jQuery.find = Sizzle; function Sizzle(selector, context, results, seed) { var m, i, elem, nid, match, groups, newSelector, newContext = context && context.ownerDocument, // nodeType defaults to 9, since context defaults to document nodeType = context ? context.nodeType : 9; results = results || []; // Return early from calls with invalid selector or context if (typeof selector !== "string" || !selector || nodeType !== 1 && nodeType !== 9 && nodeType !== 11) { return results; } // Try to shortcut find operations (as opposed to filters) in HTML documents if (!seed) { if ((context ? context.ownerDocument || context : preferredDoc) !== document) { // setDocument 函數其實是用來將 context 設置成 document，考慮到瀏覽器的兼容性 setDocument(context); } context = context || document; // true if (documentIsHTML) { // match 就是那個有規律的數組 if (nodeType !== 11 && (match = rquickExpr.exec(selector))) { // selector 是 id 的情況 if ((m = match[1])) { // Document context if (nodeType === 9) { if ((elem = context.getElementById(m))) { if (elem.id === m) { results.push(elem); return results; } } else { return results; } // 非 document 的情況 } else { if (newContext && (elem = newContext.getElementById(m)) && contains(context, elem) && elem.id === m) { results.push(elem); return results; } } // selector 是 tagName 情況 } else if (match[2]) { // 這里的 push：var push = arr.push push.apply(results, context.getElementsByTagName(selector)); return results; // selector 是 class 情況 } else if ((m = match[3]) && support.getElementsByClassName && context.getElementsByClassName) { push.apply(results, context.getElementsByClassName(m)); return results; } } // 如果瀏覽器支持 querySelectorAll if (support.qsa && !compilerCache[selector + " "] && (!rbuggyQSA || !rbuggyQSA.test(selector))) { if (nodeType !== 1) { newContext = context; newSelector = selector; // qSA looks outside Element context, which is not what we want // Support: IE <=8,還是要考慮兼容性 } else if (context.nodeName.toLowerCase() !== "object") { // Capture the context ID, setting it first if necessary if ((nid = context.getAttribute("id"))) { nid = nid.replace(rcssescape, fcssescape); } else { context.setAttribute("id", (nid = expando)); } // Sizzle 詞法分析的部分 groups = tokenize(selector); i = groups.length; while (i--) { groups[i] = "#" + nid + " " + toSelector(groups[i]); } newSelector = groups.join(","); // Expand context for sibling selectors newContext = rsibling.test(selector) && testContext(context.parentNode) || context; } if (newSelector) { try { push.apply(results, newContext.querySelectorAll(newSelector)); return results; } catch(qsaError) {} finally { if (nid === expando) { context.removeAttribute("id"); } } } } } } // All others，select 函數和 tokenize 函數后文再談 return select(selector.replace(rtrim, "$1"), context, results, seed); } ``` 整個分析過程由于要考慮各種因素，包括效率和瀏覽器兼容性等，所以看起來非常長，但是邏輯一點都不難：先判斷 selector 是否是非 string，然后正則 rquickExpr 對 selector 進行匹配，獲得數組依次考慮 id、tagName 和 class 情況，這些都很簡單，都是單一的選擇，一般用瀏覽器自帶的函數 getElement 即可解決。遇到復雜一點的，比如 div div.show p,先考慮 querySelectorAll 函數是否支持，然后考慮瀏覽器兼容 `IE<8`。若不支持，即交給 select 函數。 ## Sizzle 的優勢 Sizzle 使用的是從右向左的選擇方式，這種方式效率更高。瀏覽器在處理 html 的時候，先生成一個 DOM tree，解析完 css 之后，然后更加 css 和 DOM tess 生成一個 render tree。render tree 用于渲染，不是一一對應，如 display:none 的 DOM 就不會出現在 render tree 中。如果從左到右的匹配方式，div div.show p， - 找到 div 節點， - 從 1 的子節點中找到 div 且 class 為 show 的 DOM，找不到則返回上一步 - 從 2 的子節點中找到 p 元素，找不到則返回上一步如果有一步找不到，向上回溯，直到遍歷所有的 div，效率很低。如果從右到左的方式， - 先匹配到所有的 p 節點， - 對 1 中的結果注意判斷，若其父節點順序出現 div.show 和 div，則保留，否則丟棄因為子節點可以有若干個，而父節點只有一個，故從右向左的方式效率很高。 ## 衍生的函數 ### jQuery.fn.pushStack jQuery.fn.pushStack是一個類似于 jQuery.merge 的函數，它接受一個參數，把該參數（數組）合并到一個 jQuery 對象中并返回，源碼如下： ``` jQuery.fn.pushStack = function (elems) { // Build a new jQuery matched element set var ret = jQuery.merge(this.constructor(), elems); // Add the old object onto the stack (as a reference) ret.prevObject = this; // Return the newly-formed element set return ret; } ``` ### jQuery.contains 這個函數是對 DOM 判斷是否是父子關系，源碼如下： ``` jQuery.contains = function (context, elem) { // 考慮到兼容性，設置 context 的值 if ((context.ownerDocument || context) !== document) { setDocument(context); } return contains(context, elem); } // contains 是內部函數，判斷 DOM_a 是否是 DOM_b 的 var contains = function (a, b) { var adown = a.nodeType === 9 ? a.documentElement : a, bup = b && b.parentNode; return a === bup || !!(bup && bup.nodeType === 1 && ( adown.contains ? adown.contains(bup) : a.compareDocumentPosition && a.compareDocumentPosition(bup) & 16)); } ``` ### jQuery.uniqueSort jQuery 的去重函數，但這個去重職能處理 DOM 元素數組，不能處理字符串或數字數組，來看看有什么特別的： ``` jQuery.uniqueSort = function (results) { var elem, duplicates = [], j = 0, i = 0; // hasDuplicate 是一個判斷是否有相同元素的 flag，全局 hasDuplicate = !support.detectDuplicates; sortInput = !support.sortStable && results.slice(0); results.sort(sortOrder); if (hasDuplicate) { while ((elem = results[i++])) { if (elem === results[i]) { j = duplicates.push(i); } } while (j--) { // splice 用于將重復的元素刪除 results.splice(duplicates[j], 1); } } // Clear input after sorting to release objects // See https://github.com/jquery/sizzle/pull/225 sortInput = null; return results; } ``` sortOrder 函數如下，需要將兩個函數放在一起理解才能更明白哦： ``` var sortOrder = function (a, b) { // 表示有相同的元素，設置 flag 為 true if (a === b) { hasDuplicate = true; return 0; } // Sort on method existence if only one input has compareDocumentPosition var compare = !a.compareDocumentPosition - !b.compareDocumentPosition; if (compare) { return compare; } // Calculate position if both inputs belong to the same document compare = (a.ownerDocument || a) === (b.ownerDocument || b) ? a.compareDocumentPosition(b) : // Otherwise we know they are disconnected 1; // Disconnected nodes if (compare & 1 || (!support.sortDetached && b.compareDocumentPosition(a) === compare)) { // Choose the first element that is related to our preferred document if (a === document || a.ownerDocument === preferredDoc && contains(preferredDoc, a)) { return -1; } if (b === document || b.ownerDocument === preferredDoc && contains(preferredDoc, b)) { return 1; } // Maintain original order return sortInput ? (indexOf(sortInput, a) - indexOf(sortInput, b)) : 0; } return compare & 4 ? -1 : 1; } ``` ## 總結可以說今天先對 Sizzle 開個頭，任重而道遠！下面就會接受 Sizzle 中的 tokens 和 select 函數。