DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery選擇器源碼解讀(八):addCombinator函數
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 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、功能

生成關系選擇器的執行函數。

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved