快捷導(dǎo)航

jQuery選擇器源碼解讀（八）：addCombinator函數(shù)

更新時間：2015年03月31日 11:08:51 投稿：junjie

這篇文章主要介紹了jQuery選擇器源碼解讀（八）：addCombinator函數(shù),本文用詳細(xì)的注釋解讀了addCombinator函數(shù)的實(shí)現(xiàn)源碼,需要的朋友可以參考下

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 element
function(elem, context, xml) {
  while ((elem = elem[dir])) {
   if (elem.nodeType === 1 || checkNonElements) {
    return matcher(elem, context, xml);
   }
  }
} :

// 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;
      }
     }
    }
   }
  }
};
}

2、功能

生成關(guān)系選擇器的執(zhí)行函數(shù)。

3、參數(shù)

matcher——位置關(guān)系前連續(xù)的過濾選擇器匹配函數(shù)數(shù)組，該函數(shù)用于匹配通過位置關(guān)系獲得的節(jié)點(diǎn)是否符合選擇器要求。在實(shí)際執(zhí)行過程中，該函數(shù)可能是關(guān)系選擇器前已生成的elementMatcher(matchers)。例如：div.map>span，在Sizzle編譯遇到>時，會將div.map的編譯函數(shù)作為第一個參數(shù)調(diào)用addCombinator函數(shù)，用以檢查獲取的span父節(jié)點(diǎn)是否滿足div.map這兩個條件。

combinator——關(guān)系選擇器對應(yīng)Expr.relative中的值，Expr.relative中各種關(guān)系選擇器的值如下。使用該參數(shù)的first屬性來確定返回的是僅檢查緊鄰對象的函數(shù)還是遍歷所有可能對象的函數(shù)。將通過如下代碼：elem = elem[dir]，獲取指定位置關(guān)系的節(jié)點(diǎn)，其中dir等于combinator.dir。

復(fù)制代碼代碼如下:

Expr.relative : {

 ">" : {

  dir : "parentNode",

  first : true

 },

 " " : {

  dir : "parentNode"

 },

 "+" : {

  dir : "previousSibling",

  first : true

 },

 "~" : {

  dir : "previousSibling"

 }

}

base——該參數(shù)與combinator.dir一起，確定變量checkNonElement的值，代碼如下。該值從字面理解為當(dāng)前檢查的是非DOM元素，就是當(dāng)elem.nodeType!=1的時候，若該值為true，則會執(zhí)行匹配函數(shù)，否則結(jié)束本次循環(huán)。

4、返回函數(shù)

4.1 若關(guān)系選擇器是>或+，則返回如下函數(shù)：

復(fù)制代碼代碼如下:

function(elem, context, xml) {

 while ((elem = elem[dir])) {

  if (elem.nodeType === 1 || checkNonElements) {

   return matcher(elem, context, xml);

  }

 }

}

4.1.1 功能
若檢查element類型節(jié)點(diǎn)（即checkNonElements==false），迭代獲取elem指定位置關(guān)系的第一個element類型節(jié)點(diǎn)（elem.nodeType == 1），執(zhí)行匹配函數(shù)，檢查該節(jié)點(diǎn)是否符合要求，若符合返回true，否則返回false；

若檢查所有類型節(jié)點(diǎn)（即checkNonElements==true），獲取elem指定位置關(guān)系的緊鄰節(jié)點(diǎn)，執(zhí)行匹配函數(shù)，檢查該節(jié)點(diǎn)是否符合要求，若符合返回true，否則返回false；
有些人或許會問，不是說是緊鄰關(guān)系嗎？那代碼中為何要出現(xiàn)迭代獲取這一過程呢？這是因為，個別瀏覽器會把節(jié)點(diǎn)文本之間的換行符看成是TextNode，故在處理過程中，需要跳過這些節(jié)點(diǎn)，直到下一個element節(jié)點(diǎn)。
4.1.2 參數(shù)
elem——待檢查的單個節(jié)點(diǎn)元素。

context——執(zhí)行整個選擇器字符串匹配的上下文節(jié)點(diǎn)，大部分時候是沒有用途。

xml——當(dāng)前搜索對象是HTML還是XML文檔，若是HTML，則xml參數(shù)為false。

4.2 若關(guān)系選擇器是~或空格，則返回如下函數(shù)：

復(fù)制代碼代碼如下:

//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返回函數(shù)一致，見上述代碼中if ( XML ) { ... }中大括號內(nèi)的代碼。

若是HTML文檔，則根據(jù)matcher匹配當(dāng)前元素，若匹配成功，返回true；否則返回false。

4.2.2 參數(shù)
elem——待檢查的單個節(jié)點(diǎn)元素。

context——執(zhí)行整個選擇器字符串匹配的上下文節(jié)點(diǎn)，大部分時候是沒有用途。

xml——當(dāng)前搜索對象是HTML還是XML文檔，若是HTML，則xml參數(shù)為false。

4.2.3 代碼說明

內(nèi)部變量

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

dirruns——每次執(zhí)行通過matcherFromGroupMatchers組織的預(yù)編譯代碼時都會產(chǎn)生一個偽隨機(jī)數(shù)，用以區(qū)別不同的執(zhí)行過程。
doneName——每次執(zhí)行addCombinator函數(shù)時，done變量都會加1，用以區(qū)別生成的不同的位置關(guān)系匹配函數(shù)。

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

代碼解釋

復(fù)制代碼代碼如下:

while ((elem = elem[dir])) {

 if (elem.nodeType === 1 || checkNonElements) {

  // 若elem節(jié)點(diǎn)的expando屬性不存在，則賦予空對象，并同時賦予outerCache

  // 若elem節(jié)點(diǎn)的expando屬性存在，則將其值賦予outerCache

  outerCache = elem[expando] || (elem[expando] = {});

  /* 

   * 若outCache[dir]有值，且其第一個元素等于當(dāng)前的dirkey，

   *     則說明當(dāng)前位置選擇器在本次執(zhí)行過程中已檢測過該節(jié)點(diǎn)，執(zhí)行if內(nèi)的語句，從緩存中直接獲取結(jié)果

   * 若outCache[dir]不存在，或第一個元素不等于當(dāng)前的dirkey，

   *     則說明當(dāng)前位置選擇器在本次執(zhí)行過程中還未檢測過該節(jié)點(diǎn)，執(zhí)行else內(nèi)的語句，匹配節(jié)點(diǎn)并將結(jié)果放入緩存

   */

  if ((cache = outerCache[dir])

    && cache[0] === dirkey) {

   // 若緩存中檢測結(jié)果等于true或cachedruns的值，則返回檢測結(jié)果（非true皆為false），

   // 否則繼續(xù)循環(huán)獲取上一個符合位置關(guān)系的節(jié)點(diǎn)進(jìn)行匹配

   if ((data = cache[1]) === true

     || data === cachedruns) {

    return data === true;

   }

  } else {

   // 將數(shù)組[ dirkey ]賦予outerCache[dir]及cache

   cache = outerCache[dir] = [ dirkey ];

   // 將匹配成功，將true賦予cache[1]，否則將cachedruns的值賦予cache[1]

   cache[1] = matcher(elem, context, xml)

     || cachedruns;

   // 若匹配結(jié)果為true，則返回true，否則繼續(xù)循環(huán)獲取上一個符合位置關(guān)系的節(jié)點(diǎn)進(jìn)行匹配

   if (cache[1] === true) {

    return true;

   }

  }

 }

}