jQuery选择器源码解读（五）：tokenize的解析过程

以下分析基于jquery-1.10.2.js版本。

下面将以$("p:not(.class:contain('span')):eq(3)")为例，说明tokenize和prefilter各段代码是如何协调完成解析的。若想了解tokenize方法和prefilter类的每行代码的详细解释。

下面是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，并将"p:not(.class:contain('span')):eq(3)"作为selector参数传入该方法。

代码如下:

 sofar = selector;

 

sofar = "p: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 =["p", "p"]

示例的第一个选择器为p，匹配matchexpr["tag"]的正则表达式，且不存在prefilters["tag"]，故执行if内语句体。

代码如下:

matched = match.shift(); 

 

移除match中的第一个元素p，并将该元素赋予matched变量，此时matched="p"，match = ["p"]

 

代码如下:

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

 

创建一个新对象{ value: "p", type:"tag", matches: ["p"] }，并将该对象压入tokens数组。

代码如下:

    sofar = sofar.slice(matched.length);

 

sofar变量删除p，此时，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共有两个元素分别是p和not选择器。

代码如下:

sofar = sofar.slice(matched.length); 

 

 sofar变量删除":not(.class:contain('span'))"，此时，sofar=":eq(3)"，结束本次for循环后，再次回到while循环，同样方式，获取tokens的第三个元素eq选择器，过程与not一致，这里就不再细讲了。最后的groups的结果如下：
group[0][0] = {value: "p", type: "tag", matches: ["p"]  }

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"时，将有效选择器的结果保存到缓存内，那么就可以避免再次解析，提高执行速度。但这也仅仅提高了当前这次运行速度。因为在执行过程中，对".class:contain('span')"再次提交解析时，会存入缓存。

至此，整个执行过程已经全部结束。