首頁 > web前端 > js教程 > jQuery選擇器原始碼解讀(五):tokenize的解析過程_jquery

jQuery選擇器原始碼解讀(五):tokenize的解析過程_jquery

WBOY
發布: 2016-05-16 16:06:45
原創
1282 人瀏覽過

以下分析基於jQuery-1.10.2.js版本。

以下將以$("div:not(.class:contain('span')):eq(3)")為例,說明tokenize和preFilter各段程式碼是如何協調完成解析的。若想了解tokenize方法和preFilter類別的每行程式碼的詳細解釋,請參考如下兩篇文章:

http://www.jb51.net/article/63155.htm
http://www.jb51.net/article/63163.htm

下面是tokenize方法的源碼,為了簡便期間,我把有關緩存、逗號的匹配以及關係符的匹配的代碼全部去掉了,只留了與當前例子有關的核心代碼。被去掉的程式碼很簡單,若需要可以看上述文章即可。

另外,程式碼統一寫在說明文字上方。

複製程式碼 程式碼如下:

function tokenize(selector, parseOnly) {
 var matched, match, tokens, type, soFar, groups, preFilters;
 
 soFar = selector;
 groups = [];
 preFilters = Expr.preFilter;

 while (soFar) {
  if (!matched) {
   groups.push(tokens = []);
  }
  
  matched = false;

  for (type in Expr.filter) {
   if ((match = matchExpr[type].exec(soFar))
     && (!preFilters[type] || (match = preFilters[type]
       (match)))) {
    matched = match.shift();
    tokens.push({
     value : matched,
     type : type,
     matches : match
    });
    soFar = soFar.slice(matched.length);
   }
  }

  if (!matched) {
   break;
  }
 }

 return parseOnly ? soFar.length : soFar ? Sizzle.error(selector) :
  tokenCache(selector, groups).slice(0);
}


首先,jQuery執行過程中由select方法首次呼叫tokenize,並將"div:not(.class:contain('span')):eq(3)"作為selector參數傳入此方法。
複製程式碼 程式碼如下:

 soFar = selector;

soFar = "div:not(.class:contain('span')):eq(3)"
第一次進入while迴圈時,由於matched還未被賦值,所以執行if內的如下語句體,該語句將初始化tokens變量,同時,將tokens壓入groups數組。

複製程式碼 程式碼如下:

groups.push(tokens = []); 

之後,進入for語句。

第一次for迴圈:從Expr.filter取出第一個元素"TAG"賦給type變量,執行迴圈體程式碼。

複製程式碼 程式碼如下:

   if ((match = matchExpr[type].exec(soFar))
     && (!preFilters[type] || (match = preFilters[type]
       (match)))) {

match = matchExpr[type].exec(soFar)的執行結果如下:

match =["div", "div"]

範例的第一個選擇器為div,符合matchExpr["TAG"]的正規表示式,且不存在preFilters["TAG"],故執行if內語句體。

複製程式碼 程式碼如下:

matched = match.shift(); 

移除match中的第一個元素div,並將該元素賦予matched變量,此時matched="div",match = ["div"]

複製程式碼 程式碼如下:

    tokens.push({
     value : matched,
     type : type,
     matches : match
    }

建立一個新物件{ value: "div", type:"TAG", matches: ["div"] },並將該物件壓入tokens陣列。

複製程式碼 程式碼如下:

    soFar = soFar.slice(matched.length);

soFar變數刪除div,此時,soFar=":not(.class:contain('span')):eq(3)"
第二次for迴圈:從Expr.filter取出第二個元素"CLASS"賦給type變量,執行迴圈體程式碼。

複製程式碼 程式碼如下:

   if ((match = matchExpr[type].exec(soFar))
     && (!preFilters[type] || (match = preFilters[type]
       (match)))) {

由於目前的soFar=":not(.class:contain('span')):eq(3)",不符合CLASS類型的正規表示式,故結束本次循環。
第三次for迴圈:從Expr.filter取出第三個元素"ATTR"賦給type變量,執行迴圈體程式碼。
同樣,由於目前剩餘選擇器不是屬性選擇器,故結束本次循環。

第四次for迴圈:從Expr.filter取出第四個元素"CHILD"賦給type變量,執行迴圈體程式碼。
同樣,由於目前剩餘選擇器不是CHILD選擇器,故結束本循環。

第五次for迴圈:從Expr.filter取出第五個元素"PSEUDO"賦給type變量,執行迴圈體程式碼。

複製程式碼 程式碼如下:

   if ((match = matchExpr[type].exec(soFar))
     && (!preFilters[type] || (match = preFilters[type]
       (match)))) {

match = matchExpr[type].exec(soFar)的執行結果如下:
[":not(.class:contain('span')):eq(3)", "not", ".class:contain('span')):eq(3", undefined, undefined, undefined, undefined , undefined, undefined, undefined, undefined]

由於存在preFilters["PSEUDO"],故執行其後的代碼:

複製程式碼 程式碼如下:

match = preFilters[type](match) 

preFilters["PSEUDO"]代碼如下:

複製程式碼 程式碼如下:

"PSEUDO" : function(match) {
 var excess, unquoted = !match[5] && match[2];

 if (matchExpr["CHILD"].test(match[0])) {
  return null;
 }

 if (match[3] && match[4] !== undefined) {
  match[2] = match[4];
 } else if (unquoted
   && rpseudo.test(unquoted)
   && (excess = tokenize(unquoted, true))
   && (excess = unquoted.indexOf(")", unquoted.length
     - excess)
     - unquoted.length)) {

  match[0] = match[0].slice(0, excess);
  match[2] = unquoted.slice(0, excess);
 }

 return match.slice(0, 3);
}

傳入的match參數等於:

複製程式碼 程式碼如下:

[":not(.class:contain('span')):eq(3)", "not", ".class:contain('span')):eq(3", undefined, undefined, undefined, undefined , undefined

複製程式碼 程式碼如下:

unquoted = !match[5] && match[2] 

unquoted = ".class:contain('span')):eq(3"

複製程式碼 程式碼如下:

if (matchExpr["CHILD"].test(match[0])) { 
    return null; 
}

 match[0] = ":not(.class:contain('span')):eq(3)",不符合matchExpr["CHILD"]正規表示式,不執行return null語句。

複製程式碼 程式碼如下:

if (match[3] && match[4] !== undefined) { 
    match[2] = match[4]; 

由於match[3]和match[4]都等於undefined,故執行else的語句體。

複製程式碼 程式碼如下:

else if (unquoted 
        && rpseudo.test(unquoted) 
        && (excess = tokenize(unquoted, true)) 
        && (excess = unquoted.indexOf(")", unquoted.length - excess) - unquoted.length) 

 此時,unquoted = ".class:contain('span')):eq(3",為真,而且由於unquoted含有:contain('span'),與正則表達式rpseudo匹配,故rpseudo. test(unquoted)為真,然後再呼叫tokenize對unquoted再次解析,如下語句:

複製程式碼 程式碼如下:

excess = tokenize(unquoted, true) 

此次呼叫tokenize函數時,傳入的selector參數等於".class:contain('span')):eq(3",parseOnly等於true。函數體內執行過程如下:

複製程式碼 程式碼如下:

soFar = selector; 

 soFar = ".class:contain('span')):eq(3"
第一次進入while迴圈時,由於matched還未被賦值,所以執行if內的如下語句體,該語句將初始化tokens變量,同時,將tokens壓入groups數組。

複製程式碼 程式碼如下:

groups.push(tokens = []); 

之後,進入for語句。

第一次for迴圈:從Expr.filter取出第一個元素"TAG"賦給type變量,執行迴圈體程式碼。

複製程式碼 程式碼如下:

if ((match = matchExpr[type].exec(soFar)) 
        && (!preFilters[type] || (match = preFilters[type] 
                (match)))) { 

由於目前剩餘選擇器不是TAG選擇器,故結束本次循環。
第二次for迴圈:從Expr.filter取出第二個元素"CLASS"賦給type變量,執行迴圈體程式碼。

match = matchExpr[type].exec(soFar)的執行結果如下:

match = ["class" , "class"]

由於不存在preFilters["CLASS"],故執行if內語句體。

複製程式碼 程式碼如下:

matched = match.shift(); 

 移除match中的第一個元素class,並將該元素賦予matched變量,此時matched="class",match = ["class"]

複製程式碼 程式碼如下:

tokens.push({ 
    value : matched, 
    type : type, 
    matches : match 

建立一個新物件{ value: "class", type:"CLASS", matches: ["class"] },並將該物件壓入tokens陣列。

複製程式碼 程式碼如下:

soFar = soFar.slice(matched.length); 

soFar變數刪除class,此時,soFar = ":contain('span')):eq(3"
第三次for迴圈:從Expr.filter取出第三個元素"ATTR"賦給type變量,執行迴圈體程式碼。
同樣,由於目前剩餘選擇器不是屬性選擇器,故結束本次循環。

第四次for迴圈:從Expr.filter取出第四個元素"CHILD"賦給type變量,執行迴圈體程式碼。
同樣,由於目前剩餘選擇器不是CHILD選擇器,故結束本循環。

第五次for迴圈:從Expr.filter取出第五個元素"PSEUDO"賦給type變量,執行迴圈體程式碼。

複製程式碼 程式碼如下:

if ((match = matchExpr[type].exec(soFar)) 
        && (!preFilters[type] || (match = preFilters[type] 
                (match)))) { 

 match = matchExpr[type].exec(soFar)的執行結果如下:
[":contain('span')", "contain", "'span'", "'", "span", undefined, undefined, undefined, undefined, undefined, undefined]

由於存在preFilters["PSEUDO"],故執行其後的代碼:

複製程式碼 程式碼如下:

match = preFilters[type](match)

 preFilters["PSEUDO"]程式碼如上所示,此處不再列舉。

複製程式碼 程式碼如下:

"PSEUDO" : function(match) { 
    var excess, unquoted = !match[5] && match[2]; 
 
    if (matchExpr["CHILD"].test(match[0])) { 
        return null; 
    } 
 
    if (match[3] && match[4] !== undefined) { 
        match[2] = match[4]; 
    } else if (unquoted 
            && rpseudo.test(unquoted) 
            && (excess = tokenize(unquoted, true)) 
            && (excess = unquoted.indexOf(")", unquoted.length 
                    - excess) 
                    - unquoted.length)) { 
 
        match[0] = match[0].slice(0, excess); 
        match[2] = unquoted.slice(0, excess); 
    } 
 
    return match.slice(0, 3); 

 傳入的match參數等於:
[":contain('span')", "contain", "'span'", "'", "span", undefined, undefined, undefined, undefined, undefined, undefined]

複製程式碼 程式碼如下:

unquoted = !match[5] && match[2]; 

unquoted = "span"

複製程式碼 程式碼如下:

 if (matchExpr["CHILD"].test(match[0])) {
  return null;
 }

由於":contain('span')"不符合matchExpr["CHILD"]正規表示式,故不執行內部語句體。

複製程式碼 程式碼如下:

 if (match[3] && match[4] !== undefined) {
  match[2] = match[4];
 }

 由於match[3] = "'",match[4] ="span",故執行if內部語句體,將"span"賦予match[2]

複製程式碼 程式碼如下:

return match.slice(0, 3); 

傳回match前三個元素的副本
此時回到tokenize方法的for迴圈內繼續執行,此時各變數值如下:

match = [":contain('span')", "contain", "span"]

soFar = ":contain('span')):eq(3"

複製程式碼 程式碼如下:

matched = match.shift(); 

 將":contain('span')"移除match數組,並賦予matched變數

複製程式碼 程式碼如下:

tokens.push({ 
    value : matched, 
    type : type, 
    matches : match 


 建立一個新物件{ value:
":contain('span')", type:"PSEUDO", matches: ["contain", "span"] },並將該物件壓入tokens陣列。

複製程式碼 程式碼如下:

soFar = soFar.slice(matched.length); 

soFar變數刪除":contain('span')",此時,soFar="):eq(3)",之後,直到for循環結束,且再次執行while循環,也沒有一個有效選擇器,故退出while循環。

複製程式碼 程式碼如下:

return parseOnly ? soFar.length : soFar ? Sizzle.error(selector) : 
    tokenCache(selector, groups).slice(0); 

 由於此時parseOnly = true,故返回此時soFar的長度6,繼續執行preFilters["PSEUDO"]的代碼

 

複製程式碼 程式碼如下:

 else if (unquoted 
        && rpseudo.test(unquoted) 
        && (excess = tokenize(unquoted, true)) 
        && (excess = unquoted.indexOf(")", unquoted.length - excess) - unquoted.length) 
 

 將6賦予excess變量,然後由代碼
 

複製程式碼 程式碼如下:

 excess = unquoted.indexOf(")", unquoted.length - excess) - unquoted.length 
 

 計算出:not選擇器結束位置(即右括號位置)22

複製程式碼 程式碼如下:

match[0] = match[0].slice(0, excess); 
match[2] = unquoted.slice(0, excess); 

分別計算出完整的:not選擇器字串(match[0])和其括號內的字串(match[2]),分別等於:

match[0] = ":not(.class:contain('span'))"

match[2] = ".class:contain('span')"

複製程式碼 程式碼如下:

return match.slice(0, 3);

傳回match中前三個元素的副本。
回到tokenize函數,此時match = [":not(.class:contain('span'))", "not", ".class:contain('span')"]

複製程式碼 程式碼如下:

matched = match.shift();

移除match中的第一個元素":not(.class:contain('span'))",並將該元素賦予matched變量,此時matched="":not(.class:contain( 'span'))"",
match = ["not", ".class:contain('span')"]

複製程式碼 程式碼如下:

tokens.push({ 
    value : matched, 
    type : type, 
    matches : match 

 建立一個新物件{ value: ":not(.class:contain('span'))"", type:"PSEUDO", matches:  ["not", ".class:contain('span') "]  },並將該物件壓入tokens陣列。此時tokens共有兩個元素分別是div和not選擇器。

複製程式碼 程式碼如下:

soFar = soFar.slice(matched.length); 

 soFar變數刪除":not(.class:contain('span'))",此時,soFar=":eq(3)",結束本次for循環後,再次回到while循環,同樣方式,取得tokens的第三個元素eq選擇器,過程與not一致,這裡就不再細講了。最後的groups的結果如下:
group[0][0] = {value: "div", type: "TAG", matches: ["div"]  }

group[0][1] = {value: ":not(.class:contain('span'))", type: "PSEUDO", matches: ["not", ".class:contain(' span')"] }

group[0][2] = {value: ":eq(3)", type: "PSEUDO", matches: ["eq", "3"] }

複製程式碼 程式碼如下:

return parseOnly ? soFar.length : soFar ? Sizzle.error(selector) : 
    tokenCache(selector, groups).slice(0); 

由於parseOnly = undefined,所以執行tokenCache(selector, groups).slice(0),該語句將groups壓入緩存,並傳回其副本。
由此,完成了所有的解析,或許有人會問,這裡第二個元素並沒有解析出來呀,是的,這個需要在實際運行中再次解析。當然,這裡若可以將剛才解析."class:contain('span')):eq(3"時,將有效選擇器的結果保存到快取內,那麼就可以避免再次解析,提高執行速度。但這也僅僅提高了當前這次運行速度。

至此,整個執行過程已經全部結束。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板