jQuery選擇器原始碼解讀（八）：addCombinator函數_jquery

函數addCombinator(匹配器、組合器、基礎)

1、原始碼

複製程式碼程式碼如下：

函數 addCombinator(匹配器、組合器、基礎) {
 var dir =combinator.dir, checkNonElements=base
   && dir === "parentNode", doneName = 完成 ;

 返回組合器.first ?
 // 檢查最近的祖先/前面的元素
 函數（elem、上下文、xml）{
  while ((elem = elem[dir])) {
   if (elem.nodeType === 1 || checkNonElements) {
    返回符合器(elem, context, xml);
   }
  }
 } :

 // 檢查所有祖先/前面的元素
 函數（elem、上下文、xml）{
  var data,cache,outerCache,dirkey = dirruns「」doneName;

  // 我們無法在 XML 節點上設定任意數據，因此它們也不會
  // 受益於目錄快取
  如果 (xml) {
   while ((elem = elem[dir])) {
    if (elem.nodeType === 1 || checkNonElements) {
     if (matcher(elem, context, xml)) {
      返回真實；
     }
    }
   }
  } 其他 {
   while ((elem = elem[dir])) {
    if (elem.nodeType === 1 || checkNonElements) {
     外部快取 = elem[expando] || (elem[expando] = {});
     if ((cache = externalCache[dir])
       && 快取[0] === dirkey) {
      if ((data = cache[1]) === true
        ||資料 === cachedruns) {
       回傳資料 === true;
      }
     } 其他 {
      快取=outerCache[dir]=[dirkey];
      快取[1] = matcher(elem, context, xml)
        ||快取運作；
      if (cache[1] === true) {
       返回真；
      }
     }
    }
   }
  }
 };
}

2、功能

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

3、參數

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

combinator－關係選擇器對應Expr.relative中的值，Expr.relative中各種關係選擇器的值如下。使用該參數的第一個屬性來確定傳回的是僅檢查緊鄰物件的函數遍歷還是所有可能物件的函數。將透過以下程式碼：elem = elem[dir]，取得指定位置的節點的關係，其中dir等於combinator.dir。

複製程式碼以下程式碼：

相對表達式：{
 「>」 : {
  目錄：“父節點”，
  第一：真實
 },
 「」：{
  目錄：「父節點」
 },
 「」：{
  目錄：“前一個兄弟姊妹”，
  第一：真實
 },
 「~」：{
  目錄：「前一個兄弟姊妹」
 }
}

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 elements
function(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 caching
 if (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屬性不存在，則賦予空對象，並同時賦予outerCache
  // 若elem節點的expando屬性存在，則將其值賦予outerCache
  outerCache = 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]及cache
   cache = outerCache[dir] = [ dirkey ];
   // 將會符合成功，並將true給予cache[1]，否則將cachedruns的值給予cache[1]
   cache[1] = matcher(elem, context, xml)
     || cachedruns;
   // 若符合結果為true，則傳回true，否則繼續循環取得上一個符合位置關係的節點進行比對
   if (cache[1] === true) {
    return true;
   }
  }
 }
}