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

 

下面将以$(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, 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 (unquotedwww.2cto.com
			&& 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')再次提交解析时，会存入缓存。

 

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