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 相关文章推荐
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
JS获取input[file]的值并显示在页面的实现方法
Mar 09 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出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
php通用防注入程序 推荐
2011/02/26 PHP
php cookies中删除的一般赋值方法
2011/05/07 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
php 获取本地IP代码
2013/06/23 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
python实现日志按天分割
2019/07/22 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
美术课外活动总结
2014/07/08 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python