快捷導(dǎo)航

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

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

combinator——關(guān)系選擇器對(duì)應(yīng)Expr.relative中的值，Expr.relative中各種關(guān)系選擇器的值如下。使用該參數(shù)的first屬性來(lái)確定返回的是僅檢查緊鄰對(duì)象的函數(shù)還是遍歷所有可能對(duì)象的函數(shù)。將通過(guò)如下代碼：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的時(shí)候，若該值為true，則會(huì)執(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)系的第一個(gè)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；
有些人或許會(huì)問(wèn)，不是說(shuō)是緊鄰關(guān)系嗎？那代碼中為何要出現(xiàn)迭代獲取這一過(guò)程呢？這是因?yàn)椋瑐€(gè)別瀏覽器會(huì)把節(jié)點(diǎn)文本之間的換行符看成是TextNode，故在處理過(guò)程中，需要跳過(guò)這些節(jié)點(diǎn)，直到下一個(gè)element節(jié)點(diǎn)。
4.1.2 參數(shù)
elem——待檢查的單個(gè)節(jié)點(diǎn)元素。

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

xml——當(dāng)前搜索對(duì)象是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文檔，則其過(guò)程與4.1返回函數(shù)一致，見(jiàn)上述代碼中if ( XML ) { ... }中大括號(hào)內(nèi)的代碼。

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

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

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

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

4.2.3 代碼說(shuō)明

內(nèi)部變量

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

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

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

代碼解釋

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

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

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

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

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

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

  /* 

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

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

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

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

   */

  if ((cache = outerCache[dir])

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

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

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

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

    return true;

   }

  }

 }

}