微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

下面是tokenize方法的源码,为了简便期间,我把有关缓存、逗号的匹配以及关系符的匹配的代码全部去掉了,只留了与当前例子有关的核心代码。被去掉的代码很简单,若需要可以看一下上述文章即可。

另外,代码统一写在说明文字上方。

代码如下:
SEOnly) { 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 = "div:not(.class:contain('span')):eq(3)" 第一次进入while循环时,由于matched还未被赋值,所以执行if内的如下语句体,该语句将初始化tokens变量,同时,将tokens压入groups数组。

代码如下:
之后,进入for语句。

第一次for循环:从Expr.filter中取出第一个元素"TAG"赋给type变量,执行循环体代码

代码如下:

match = matchExpr[type].exec(soFar)的执行结果如下:

match =["div","div"]

示例的第一个选择器为div,匹配matchExpr["TAG"]的正则表达式,且不存在preFilters["TAG"],故执行if内语句体。

代码如下:

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

代码如下:

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

代码如下:

soFar变量删除div,此时,soFar=":not(.class:contain('span')):eq(3)" 第二次for循环:从Expr.filter中取出第二个元素"CLASS"赋给type变量,执行循环体代码

代码如下:

由于当前的soFar=":not(.class:contain('span')):eq(3)",不匹配CLASS类型的正则表达式,故结束本次循环。 第三次for循环:从Expr.filter中取出第三个元素"ATTR"赋给type变量,执行循环体代码。 同样,由于当前剩余选择器不是属性选择器,故结束本次循环。

第四次for循环:从Expr.filter中取出第四个元素"CHILD"赋给type变量,执行循环体代码。 同样,由于当前剩余选择器不是CHILD选择器,故结束本次循环。

第五次for循环:从Expr.filter中取出第五个元素"PSEUDO"赋给type变量,执行循环体代码

代码如下:

match = matchExpr[type].exec(soFar)的执行结果如下: [":not(.class:contain('span')):eq(3)","not",".class:contain('span')):eq(3",undefined,undefined]

由于存在preFilters["PSEUDO"],故执行其后的代码

代码如下:

preFilters["PSEUDO"]代码如下:

代码如下:

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参数等于:

代码如下:

代码如下:

unquoted = ".class:contain('span')):eq(3"

代码如下:

match[0] = ":not(.class:contain('span')):eq(3)",不匹配matchExpr["CHILD"]正则表达式,不执行return null语句。

代码如下:

由于match[3]和match[4]都等于undefined,故执行else的语句体。

代码如下:

此时,unquoted = ".class:contain('span')):eq(3",为真,而且由于unquoted含有:contain('span'),与正则表达式rpseudo匹配,故rpseudo.test(unquoted)为真,然后再次调用tokenize对unquoted再次解析,如下语句:

代码如下:

此次调用tokenize函数时,传入的selector参数等于".class:contain('span')):eq(3",parSEOnly等于true。函数体内执行过程如下:

代码如下:

soFar = ".class:contain('span')):eq(3" 第一次进入while循环时,由于matched还未被赋值,所以执行if内的如下语句体,该语句将初始化tokens变量,同时,将tokens压入groups数组。

代码如下:

之后,进入for语句。

第一次for循环:从Expr.filter中取出第一个元素"TAG"赋给type变量,执行循环体代码

代码如下:

由于当前剩余选择器不是TAG选择器,故结束本次循环。 第二次for循环:从Expr.filter中取出第二个元素"CLASS"赋给type变量,执行循环体代码

match = matchExpr[type].exec(soFar)的执行结果如下:

match = ["class","class"]

由于不存在preFilters["CLASS"],故执行if内语句体。

代码如下:

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

代码如下:

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

代码如下:

soFar变量删除class,此时,soFar = ":contain('span')):eq(3" 第三次for循环:从Expr.filter中取出第三个元素"ATTR"赋给type变量,执行循环体代码。 同样,由于当前剩余选择器不是属性选择器,故结束本次循环。

第四次for循环:从Expr.filter中取出第四个元素"CHILD"赋给type变量,执行循环体代码。 同样,由于当前剩余选择器不是CHILD选择器,故结束本次循环。

第五次for循环:从Expr.filter中取出第五个元素"PSEUDO"赋给type变量,执行循环体代码

代码如下:

match = matchExpr[type].exec(soFar)的执行结果如下: [":contain('span')","contain","'span'","'","span",undefined]

由于存在preFilters["PSEUDO"],故执行其后的代码

代码如下:

preFilters["PSEUDO"]代码如上所示,此处不再列举。

代码如下:
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,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')",undefined]

代码如下:

unquoted = "span"

代码如下:

由于":contain('span')"不匹配matchExpr["CHILD"]正则表达式,故不执行内部语句体。

代码如下:

由于match[3] = "'",match[4] ="span",故执行if内部语句体,将"span"赋予match[2]

代码如下:

返回match前三个元素的副本 此时回到tokenize方法的for循环内继续执行,此时各变量值如下:

match = [":contain('span')","span"]

soFar = ":contain('span')):eq(3"

代码如下:

将":contain('span')"移除match数组,并赋予matched变量

代码如下:

创建一个新对象{ value: ":contain('span')",type:"PSEUDO",matches: ["contain","span"] },并将该对象压入tokens数组。

代码如下:

soFar变量删除":contain('span')",此时,soFar="):eq(3)",之后,直至for循环结束,且再次执行while循环,也没有一个有效选择器,故退出while循环。

代码如下:
SEOnly ? soFar.length : soFar ? Sizzle.error(selector) : tokenCache(selector,groups).slice(0);

由于此时parSEOnly = true,故返回此时soFar的长度6,继续执行preFilters["PSEUDO"]的代码

代码如下:

将6赋予excess变量,然后由代码

代码如下:

计算出:not选择器结束位置(即右括号位置)22

代码如下:

分别计算出完整的:not选择器字符串(match[0])和其括号内的字符串(match[2]),分别等于:

match[0] = ":not(.class:contain('span'))"

match[2] = ".class:contain('span')"

代码如下:

返回match中前三个元素的副本。 回到tokenize函数,此时match = [":not(.class:contain('span'))",".class:contain('span')"]

代码如下:

移除match中的第一个元素":not(.class:contain('span'))",并将该元素赋予matched变量,此时matched="":not(.class:contain('span'))"", match = ["not",".class:contain('span')"]

代码如下:

创建一个新对象{ value: ":not(.class:contain('span'))"",matches: ["not",".class:contain('span')"] },并将该对象压入tokens数组。此时tokens共有两个元素分别是div和not选择器。

代码如下:

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",".class:contain('span')"] }

group[0][2] = {value: ":eq(3)",matches: ["eq","3"] }

代码如下:
SEOnly ? 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')"再次提交解析时,会存入缓存。

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐