首页 / 脚本样式 / JavaScript / jQuery选择器源码解读（五）：tokenize的解析过程

以下分析基于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"时，将有效选择器的结果保存到缓存内，那么就可以避免再次解析，提高执行速度。但这也仅仅提高了当前这次运行速度。因为在执行过程中，对".class:contain（"span"）"再次提交解析时，会存入缓存。
至此，整个执行过程已经全部结束。