jQuery选择器代码详解(五)——实例说明tokenize的解析过程

原创文章,转载请写明出处,多谢!

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

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

jQuery选择器代码详解(三)——tokenize方法

jQuery选择器代码详解(四)——Expr.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参数传入该方法。

<span style="white-space:pre">	</span>soFar = selector;

soFar = "div:not(.class:contain(‘span‘)):eq(3)"

第一次进入while循环时,由于matched还未被赋值,所以执行if内的如下语句体,该语句将初始化tokens变量,同时,将tokens压入groups数组。

<span style="white-space:pre">	</span>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内语句体。

<span style="white-space:pre">				</span>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"],故执行其后的代码:

<span style="white-space:pre">				</span>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, undefined, undefined, undefined]

<span style="white-space:pre">	</span>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的语句体。

<span style="white-space:pre">	</span>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再次解析,如下语句:

<span style="white-space:pre">		</span>excess = tokenize(unquoted, true)

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

<span>	</span>soFar = selector;

soFar = ".class:contain(‘span‘)):eq(3"

第一次进入while循环时,由于matched还未被赋值,所以执行if内的如下语句体,该语句将初始化tokens变量,同时,将tokens压入groups数组。

<span>	</span>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内语句体。

<span>				</span>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"],故执行其后的代码:

<span>				</span>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]

<span style="white-space:pre">		</span>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"

<span style="white-space:pre">				</span>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"]的代码

<span>	</span>else if (unquoted
		&& rpseudo.test(unquoted)
		&& (excess = tokenize(unquoted, true))
		&& (excess = unquoted.indexOf(")", unquoted.length - excess) - unquoted.length)

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

<span style="white-space:pre">		</span>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‘)"

<span style="white-space:pre">	</span>return match.slice(0, 3);

返回match中前三个元素的副本。

回到tokenize函数,此时match = [":not(.class:contain(‘span‘))", "not", ".class:contain(‘span‘)"]

<span>				</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‘)"再次提交解析时,会存入缓存。

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

各位朋友,若觉得写得不错,帮我顶一下,给点动力,多谢!

jQuery选择器代码详解(一)——Sizzle方法

jQuery选择器代码详解(二)——select方法

jQuery选择器代码详解(三)——tokenize方法

jQuery选择器代码详解(四)——Expr.preFilter

时间: 2024-10-27 17:50:09

jQuery选择器代码详解(五)——实例说明tokenize的解析过程的相关文章

JQuery选择器代码详解(三)——tokenize方法

原创文章,转载请注明出处,多谢! /* * tokenize函数是选择器解析的核心函数,它将选择器转换成两级数组groups * 举例: * 若选择器为"div.class,span",则解析后的结果为: * group[0][0] = {type:'TAG',value:'div',matches:match} * group[0][1] = {type:'CLASS',value:'.class',matches:match} * group[1][0] = {type:'TAG'

jQuery选择器代码详解(七)——elementMatcher函数

要读懂Sizzle的Compile执行过程,首先需要弄清楚涉及的各个子程序的功能和关键变量和作用,我将逐一对jQuery-1.10.2版本的Compile代码进行说明,望能给予大家帮助. elementMatcher(matchers) 1.源码 function elementMatcher(matchers) { return matchers.length > 1 ? function(elem, context, xml) { var i = matchers.length; while

jQuery选择器代码详解(八)——addCombinator函数

function addCombinator(matcher, combinator, base) 1.源码 function addCombinator(matcher, combinator, base) { var dir = combinator.dir, checkNonElements = base && dir === "parentNode", doneName = done++; return combinator.first ? // Check a

jQuery选择器代码详解(四)——Expr.preFilter

原创文章,转载请注明出处,多谢! Expr.preFilter是tokenize方法中对ATTR.CHILD.PSEUDO三种选择器进行预处理的方法.具体如下: Expr.preFilter : { "ATTR" : function(match) { /* * 完成如下任务: * 1.属性名称解码 * 2.属性值解码 * 3.若判断符为~=,则在属性值两边加上空格 * 4.返回最终的mtach对象 * * match[1]表示属性名称, * match[1].replace(rune

jQuery选择器代码详解(二)——select方法

原创文章,转载请注明出处,多谢! /* * @param selector 已去掉头尾空白的选择器字符串 * @param context 执行匹配的最初的上下文(即DOM元素集合).若context没有赋值,则取document. * @param results 已匹配出的部分最终结果.若results没有赋值,则赋予空数组. * @param seed 初始集合 */ function select(selector, context, results, seed) { var i, to

jQuery选择器代码详解(一)——Sizzle方法

对jQuery的Sizzle各方法做了深入分析(同时也参考了一些网上资料)后,将结果分享给大家.我将采用连载的方式,对Sizzle使用的一些方法详细解释一下,每篇文章介绍一个方法. 若需要转载,请写明出处,多谢. /* * @param selector 选择器字符串 * @param context 执行匹配的最初的上下文(即DOM元素).若context没有赋值,则取document. * @param results 已匹配出的部分最终结果.若results没有赋值,则赋予空数组. * @

jquery.easyui代码详解,和遇到的问题,提供大家在使用的时候少走弯路(一)

初次使用jquery.easyui这个东东,虽然简单,但还是很费力的去研究了一下使用,在使用过程中遇到的问题,下面代码会详细的注释到 引用的文件jquery.min.js              jquery.easyui.min.js 样式:icon.css         easyui.css 页面初始化easy ui 插件 <html xmlns="http://www.w3.org/1999/xhtml"> <div class="cg-op&qu

JavaScript 身份证号有效验证详解及实例代码

JavaScript 身份证号有效验证详解及实例代码 这篇文章主要介绍了JavaScript 身份证号有效验证详解及实例代码的相关资料,需要的朋友可以参考下 JavaScript验证身份证号 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 <%@ page language="jav

正则表达式表单验证实例代码详解

正则表达式表单验证实例代码详解 这篇文章主要介绍了正则表达式表单验证实例详解的相关资料,大家可以参考下.正则表达式表单验证具体内容如下: 首先给大家解释一些符号相关的意义 * 匹配前面的子表达式零次或多次: ^ 匹配输入字符串的开始位置:$匹配输入字符串的结束位置 1. /^$/ 这个是个通用的格式. 2. 里面输入需要实现的功能. \d 匹配一个数字字符,等价于[0-9] + 匹配前面的子表达式一次或多次: ?匹配前面的子表达式零次或一次: 下面通过一段代码给大家分析表单验证正则表达式,具体代