jQuery选择器源码解读(五):tokenize的解析过程


Posted in Javascript onMarch 31, 2015

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

下面将以$("div: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,并将"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')"再次提交解析时,会存入缓存。

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

Javascript 相关文章推荐
让焦点自动跳转
Jul 01 Javascript
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
JavaScript 学习笔记(四)
Dec 31 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
jQuery操作之效果详解
May 19 jQuery
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 #Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 #Javascript
JavaScript制作简易的微信打飞机
Mar 31 #Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 #Javascript
JS实现为表格动态添加标题的方法
Mar 31 #Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 #Javascript
jQuery选择器源码解读(三):tokenize方法
Mar 31 #Javascript
You might like
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
python中关于日期时间处理的问答集锦
2013/03/08 Python
python发送arp欺骗攻击代码分析
2014/01/16 Python
python下MySQLdb用法实例分析
2015/06/08 Python
Python实现登陆文件验证方法
2018/10/06 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
酒店总经理欢迎词
2014/01/15 职场文书
工商治理实习生的自我评价
2014/01/15 职场文书
颁奖晚会主持词
2014/03/25 职场文书
师德模范事迹材料
2014/06/03 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android