1. 首页
  2. 编程与技术

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

发布于 2016-11-09 02:25:29 | 128 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例，程序狗速度看过来！

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。

这篇文章主要介绍了jQuery选择器源码解读（五）：tokenize的解析过程,本文用详细的注释解读了tokenize方法的解析过程,需要的朋友可以参考下

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

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

/article/16/0821/272059.html
/article/16/0821/272054.html

下面是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')"再次提交解析时，会存入缓存。

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



最新网友评论  共有(0)条评论 发布评论 返回顶部
推荐阅读
  • 终极炫富——2016 年 iOS 开发者收入调查报告
  • 年度大片：Stack Overflow 2017 开发者调查报告发布！
  • 开发者需要大学学位吗？
  • 程序员多大年纪算高龄，届时该何去何从？
  • 2017 年高薪编程语言排行榜，你的语言上榜没？
  • 各编程语言开发者最常使用的按键，中了没?
  • 伤不起的三十岁，干不动的程序员要何去何从？
  • 2016年中国加班最狠IT公司排行
  • 一句话"面试"漫画：黑了苹果、谷歌、三星
  • 拿代码量算 KPI ……跟程序员们来这套？
  • 程序员遇到 Bug 时的 30 个反应，你是哪一种？
  • 2016年收入最高的5个编程语言 Java和C没在前五?
  • 为什么很少见人傻钱多的程序员炫富？
  • 阿里月薪两万是什么体验？
  • 代码缩进时 程序员更喜欢空格键还是Tab键？
    • 最新资讯
  • Python获取系统所有进程PID及进程名称的方法示例
  • Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
  • Python实现的根据IP地址计算子网掩码位数功能示例
  • 好的Python培训机构应该具备哪些条件
  • 详解Pytorch 使用Pytorch拟合多项式(多项式回归)
  • Python加载带有注释的Json文件实例
  • 对python的文件内注释 help注释方法
  • Python实现判断一行代码是否为注释的方法
  • Oracle数据库表中字段顺序的修改方法
  • ASP.NET MVC 4使用PagedList.Mvc分页的实现代码
  • Oracle实例启动时报错：ORA-32004的解决方法
  • 解读ASP.NET 5 & MVC6系列教程（7）：依赖注入
  • 详解IDEA用maven创建springMVC项目和配置
  • ASP.NET MVC5网站开发之展示层架构（五）
  • SpringBoot创建maven多模块项目实战代码
    • 后端技术
    前端技术
    数据库
    热门框架
    常用IDE
    其他
    Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务