jQuery選取器代碼詳解（八）——addCombinator函數，jquery選取器

jQuery選取器代碼詳解（八）——addCombinator函數，jquery選取器

function addCombinator(matcher, combinator, base)

1、源碼

function addCombinator(matcher, combinator, base) {var dir = combinator.dir, checkNonElements = base&& dir === "parentNode", doneName = done++;return combinator.first ?// Check against closest ancestor/preceding elementfunction(elem, context, xml) {while ((elem = elem[dir])) {if (elem.nodeType === 1 || checkNonElements) {return matcher(elem, context, xml);}}} :// Check against all ancestor/preceding elementsfunction(elem, context, xml) {var data, cache, outerCache, dirkey = dirruns + " " + doneName;// We can't set arbitrary data on XML nodes, so they don't// benefit from dir cachingif (xml) {while ((elem = elem[dir])) {if (elem.nodeType === 1 || checkNonElements) {if (matcher(elem, context, xml)) {return true;}}}} else {while ((elem = elem[dir])) {if (elem.nodeType === 1 || checkNonElements) {outerCache = elem[expando] || (elem[expando] = {});if ((cache = outerCache[dir])&& cache[0] === dirkey) {if ((data = cache[1]) === true|| data === cachedruns) {return data === true;}} else {cache = outerCache[dir] = [ dirkey ];cache[1] = matcher(elem, context, xml)|| cachedruns;if (cache[1] === true) {return true;}}}}}};}

2、功能

產生關係選取器的執行函數。

3、參數

matcher——位置關係前連續的過濾選取器匹配函數數組，該函數用於匹配通過位置關係獲得的節點是否符合選取器要求。在實際執行過程中，該函數可能是關係選取器前已產生的elementMatcher(matchers)。例如：div.map>span，在Sizzle編譯遇到>時，會將div.map的編譯函數作為第一個參數調用addCombinator函數，用以檢查擷取的span兄弟節點是否滿足div.map這兩個條件。

combinator——關係選取器對應Expr.relative中的值，Expr.relative中各種關係選取器的值如下。使用該參數的first屬性來確定返回的是僅檢查緊鄰對象的函數還是遍曆所有可能對象的函數。將通過如下代碼：elem = elem[dir]，擷取指定位置關係的節點，其中dir等於combinator.dir。

Expr.relative : {">" : {dir : "parentNode",first : true}," " : {dir : "parentNode"},"+" : {dir : "previousSibling",first : true},"~" : {dir : "previousSibling"}}

base——該參數與combinator.dir一起，確定變數checkNonElement的值，代碼如下。該值從字面理解為當前檢查的是非DOM元素，就是當elem.nodeType!=1的時候，若該值為true，則會執行匹配函數，否則結束本次迴圈。

4、返回函數

4.1 若關係選取器是>或+，則返回如下函數：

function(elem, context, xml) {while ((elem = elem[dir])) {if (elem.nodeType === 1 || checkNonElements) {return matcher(elem, context, xml);}}}

4.1.1 功能

若檢查element類型節點（即checkNonElements==false），迭代擷取elem指定位置關係的第一個element類型節點（elem.nodeType == 1），執行匹配函數，檢查該節點是否符合要求，若符合返回true，否則返回false；

若檢查所有類型節點（即checkNonElements==true），擷取elem指定位置關係的緊鄰節點，執行匹配函數，檢查該節點是否符合要求，若符合返回true，否則返回false；

有些人或許會問，不是說是緊鄰關係嗎？那代碼中為何要出現迭代擷取這一過程呢？這是因為，個別瀏覽器會把節點文本之間的分行符號看成是TextNode，故在處理過程中，需要跳過這些節點，直到下一個element節點。

4.1.2 參數

elem——待檢查的單個節點元素。

context——執行整個選取器字串匹配的上下文節點，大部分時候是沒有用途。

xml——當前搜尋對象是HTML還是XML文檔，若是HTML，則xml參數為false。

4.2  若關係選取器是~或空格，則返回如下函數：

//Check against all ancestor/preceding elementsfunction(elem, context, xml) {var data, cache, outerCache, dirkey = dirruns + " " + doneName;// We can't set arbitrary data on XML nodes, so they don't// benefit from dir cachingif (xml) {while ((elem = elem[dir])) {if (elem.nodeType === 1 || checkNonElements) {if (matcher(elem, context, xml)) {return true;}}}} else {while ((elem = elem[dir])) {if (elem.nodeType === 1 || checkNonElements) {outerCache = elem[expando] || (elem[expando] = {});if ((cache = outerCache[dir])&& cache[0] === dirkey) {if ((data = cache[1]) === true|| data === cachedruns) {return data === true;}} else {cache = outerCache[dir] = [ dirkey ];cache[1] = matcher(elem, context, xml)|| cachedruns;if (cache[1] === true) {return true;}}}}}};

4.2.1 功能

若檢查的是XML文檔，則其過程與4.1返回函數一致，見上述代碼中if ( XML ) { ... }中大括弧內的代碼。

若是HTML文檔，則根據matcher匹配當前元素，若匹配成功，返回true；否則返回false。

4.2.2 參數

elem——待檢查的單個節點元素。

context——執行整個選取器字串匹配的上下文節點，大部分時候是沒有用途。

xml——當前搜尋對象是HTML還是XML文檔，若是HTML，則xml參數為false。

4.2.3 代碼說明

內部變數

dirkey——緩衝節點檢測結果用的鍵。在一次執行過程中，若一個節點被檢查過，則會在這個節點的dirkey屬性（屬性名稱為dirkey的值）中記錄下檢測結果（true或false），那麼在本次執行過程中，再次遇到該節點時，不需要再次檢測了。之所以需要緩衝，因為多個節點會存在同一個父節點或兄弟節點，利用緩衝可以減少檢測的次數，提高效能。

dirruns——每次執行通過matcherFromGroupMatchers組織的先行編譯代碼時都會產生一個偽隨機數，用以區別不同的執行過程。

doneName——每次執行addCombinator函數時，done變數都會加1，用以區別產生的不同的位置關係匹配函數。

cachedruns——用來記錄本次匹配是第幾個DOM元素。例如：div.map>span，有3個元素符合span選取器，則針對每個元素執行>匹配函數時，cachedruns依次為0、1、2。cachedruns的作用按照代碼可以直接理解為在一個執行過程中，針對同一個元素使用elementMatchers進行匹配過程中，再次遇到同一個元素時，可以直接從擷取不匹配的結果，但是，我想不出哪個情況下會發生這種事情。若有人遇到，請告知，多謝！

代碼解釋

while ((elem = elem[dir])) {if (elem.nodeType === 1 || checkNonElements) {// 若elem節點的expando屬性不存在，則賦予Null 物件，並同時賦予outerCache// 若elem節點的expando屬性存在，則將其值賦予outerCacheouterCache = elem[expando] || (elem[expando] = {});/*  * 若outCache[dir]有值，且其第一個元素等於當前的dirkey， *     則說明當前位置選取器在本次執行過程中已檢測過該節點，執行if內的語句，從緩衝中直接擷取結果 * 若outCache[dir]不存在，或第一個元素不等於當前的dirkey， *     則說明當前位置選取器在本次執行過程中還未檢測過該節點，執行else內的語句，匹配節點並將結果放入緩衝 */if ((cache = outerCache[dir])&& cache[0] === dirkey) {// 若緩衝中檢測結果等於true或cachedruns的值，則返回檢測結果（非true皆為false），// 否則繼續迴圈擷取上一個符合位置關係的節點進行匹配if ((data = cache[1]) === true|| data === cachedruns) {return data === true;}} else {// 將數組[ dirkey ]賦予outerCache[dir]及cachecache = outerCache[dir] = [ dirkey ];// 將匹配成功，將true賦予cache[1]，否則將cachedruns的值賦予cache[1]cache[1] = matcher(elem, context, xml)|| cachedruns;// 若匹配結果為true，則返回true，否則繼續迴圈擷取上一個符合位置關係的節點進行匹配if (cache[1] === true) {return true;}}}}

jQuery選取器代碼詳解（一）——Sizzle方法

jQuery選取器代碼詳解（二）——select方法

jQuery選取器代碼詳解（三）——tokenize方法

jQuery選取器代碼詳解（四）——Expr.preFilter

jQuery選取器代碼詳解（五）——執行個體說明tokenize的解析過程

jQuery選取器代碼詳解（六）——Sizzle選取器匹配邏輯分析

jQuery選取器代碼詳解（七）——elementMatcher函數

jQuery選取器代碼詳解（八）——addCombinator函數