jQuery选择器源码解读(三):tokenize方法_jquery

/*
 * 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',value:'span',matches:match}
 * 由上述结果可以看出,groups的每一个元素以逗号分隔的选择器块的解析结果,
 * 另外,上述结果中的matches等于模式匹配的结果,由于在此不方便写清楚,
 * 故只把代码matches:match写在这里。
 *
 * tokenize方法完成如下两个主要任务:
 * 1、解析选择器
 * 2、将解析结果存入缓存中,以备后用
 *
 *
 * @param selector 待解析的选择器字符串
 * @param parseOnly 为true时,说明本次调用是匹配子选择器
 *  举个例子:若初始选择器为"div:not(.class:not(:eq(4))):eq(3)"
 *  代码首先匹配出TAG选择器div,
 *  之后匹配出的pseudo选择器字符串是:not(.class:not(:eq(4))):eq(3),
 *  代码会把“.class:not(:eq(4))):eq(3”作为not的括号内的值进一步进行解析,
 *  此时代码在调用tokenize解析时,parseOnly参数会传入true.
 */
function tokenize(selector, parseOnly) {
	var matched, match, tokens, type, soFar, groups, preFilters,
	// 获取缓存中的结果
	cached = tokenCache[selector + " "];

	/*
	 * 若缓存中有selector对应的解析结果
	 * 则执行if中语句体
	 */
	if (cached) {
		// 若是对初始选择器解析(parseOnly!=true),则返回缓存结果,
		// 若不是,则返回0
		return parseOnly ? 0 : cached.slice(0);
	}

	/*
	 * 由于字符串在javascript中不是作为对象来处理的,
	 * 所以通过赋值,代码就自动复制了一个新字符串给了soFar,
	 * 这样,对soFar的任何处理都不会影响selector的原有数据
	 */
	soFar = selector;
	groups = [];
	// 此处赋值,仅仅用于减少后续代码字数,缩短执行路径
	preFilters = Expr.preFilter;

	while (soFar) {

		// Comma and first run
		/*
		 * rcomma = new RegExp("^" + whitespace + "*," + whitespace + "*")
		 * rcomma用来判定是否存在多个选择器块,即用逗号隔开的多个并列的选择器
		 *
		 * 下面条件判定依次为:
		 * !matched:若是第一次执行循环体,则为true;否则为false。
		 *   这里matched即作为是否第一次执行循环体的标识,
		 *   也作为本次循环中soFar是否以非法字符串(即非合法单一选择器)开头的标志。
		 * (match = rcomma.exec(soFar):获取符合rcomma的匹配项
		 */
		if (!matched || (match = rcomma.exec(soFar))) {
			if (match) {
				// Don't consume trailing commas as valid
				/*
				 * 剔除掉第一个逗号及之前的所有字符
				 * 举个例子:
				 * 若初始选择器为:"div.news,span.closed",
				 * 在解析过程中,首先由后续代码解析完毕div.news,剩下",span.closed"
				 * 在循环体内执行到这里时,将逗号及之前之后连续的空白(match[0])删除掉,
				 * 使soFar变成"span.closed",继续执行解析过程
				 *
				 * 在这里,若初始选择器的最后一个非空白字符是逗号,
				 * 那么执行下面代码时soFar不变,即soFar.slice(match[0].length)返回空字符串,
				 * 故最终返回的是||后面的soFar
				 */
				soFar = soFar.slice(match[0].length) || soFar;
			}

			/*
			 * 在第一次执行循环体或者遇到逗号分割符时,将tokens赋值为一个空数组,
			 * 同时压入groups数组
			 */
			groups.push(tokens = []);
		}

		matched = false;

		// Combinators
		/*
		 * rcombinators = new RegExp(
		 *		"^" + whitespace + "*([>+~]|" + whitespace + ")" + whitespace + "*"),
		 * rcombinators用来匹配四种关系符,即>+~和空白
		 *
		 * 若soFar中是以关系符开始的,则执行if内的语句体
		 */
		if ((match = rcombinators.exec(soFar))) {
			/*
			 * 将match[0]移除match数组,同时将它赋予matched
			 * 若原本关系符两边带有空格,则此时match[0]与matched是不相等的
			 * 举个例子:
			 * 若soFar = " + .div";
			 * 执行match = rcombinators.exec(soFar)后,
			 * match[0] = " + ",而match[1]="+";
			 * 执行完matched = match.shift()后,
			 * matched=" + ",而match[0]="+";
			 */
			matched = match.shift();
			// 将匹配结果压入tokens数组中
			tokens.push({
				value : matched,
				// Cast descendant combinators to space
				/*
				 * rtrim = new RegExp("^" + whitespace + "+|((?:^|[^\\\\])(?:\\\\.)*)"
				 *			+ whitespace + "+$", "g"),
				 * whitespace = "[\\x20\\t\\r\\n\\f]";
				 *
				 * 下面match[0].replace(rtrim, " ")的作用是将match[0]左右两边的空白替换为空格
				 * 但是由于其上的match.shift的作用,match[0]已经是两边不带空白的字符串了,
				 * 故此出的替换是没有用途的代码
				 */
				type : match[0].replace(rtrim, " ")
			});

			// 将关系符之后的字符串赋予soFar,继续解析
			soFar = soFar.slice(matched.length);
		}

		// Filters
		/*
		 * 下面通过for语句对soFar逐一匹配ID、TAG、CLASS、CHILD、ATTR、PSEUDO类型的选择器
		 * 若匹配到了,则先调用该类型选择器对应的预过滤函数,
		 * 然后,将结果压入tokens数组,继续本次循环。
		 */
		for (type in Expr.filter) {
			/*
			 * match = matchExpr[type].exec(soFar):对soFar调用type类型的正则表达式对soFar进行匹配,
			 *  并将匹配结果赋予match。若未匹配到数据,则match为undefined。
			 * !preFilters[type]:若不存在type类型的预过滤函数,则为true
			 * match = preFilters[type](match):执行预过滤,并将结果返回给match
			 *
			 */
			if ((match = matchExpr[type].exec(soFar))
					&& (!preFilters[type] || (match = preFilters[type]
							(match)))) {
				// 将match[0]移除match数组,同时将它赋予matched
				matched = match.shift();
				// 将匹配结果压入tokens数组中
				tokens.push({
					value : matched,
					type : type,
					matches : match
				});
				// 将匹配结果之后的字符串赋予soFar,继续解析
				soFar = soFar.slice(matched.length);
			}
		}

		/*
		 * 若matched==false,
		 * 则说明本次循环没有有效的选择器(包括关系符和id、class等类型选择器)
		 * 因此,解析到当前位置遗留下来的soFar是非法的选择器字符串
		 * 跳出while循环体
		 */
		if (!matched) {
			break;
		}
	}

	// Return the length of the invalid excess
	// if we're just parsing
	// Otherwise, throw an error or return tokens
	/*
	 * 若不是对初始选择器字符串进行解析(!parseOnly==true),
	 *  则返回soFar.length,此时的soFar.length代表连续有效的选择器最终位置,
	 *  后续文章将以实例进行说明
	 * 若是对初始选择器字符串进行解析,则看soFar是否还有字符,
	 *  若是,则执行Sizzle.error(selector)抛出异常;
	 *  若不是,则执行tokenCache(selector, groups).slice(0)将结果压入缓存,并返回结果的副本。
	 */
	return parseOnly ? soFar.length : soFar ? Sizzle.error(selector) :
	// Cache the tokens
	tokenCache(selector, groups).slice(0);
}

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, 选择器
, 源码解读
tokenize方法
,以便于您获取更多的相关知识。

时间: 2024-09-12 21:52:12

jQuery选择器源码解读(三):tokenize方法_jquery的相关文章

jQuery选择器源码解读(四):tokenize方法的Expr.preFilter_jquery

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

jQuery选择器源码解读(一):Sizzle方法_jquery

对jQuery的Sizzle各方法做了深入分析(同时也参考了一些网上资料)后,将结果分享给大家.我将采用连载的方式,对Sizzle使用的一些方法详细解释一下,每篇文章介绍一个方法. 若需要转载,请写明出处,多谢. /* * Sizzle方法是Sizzle选择器包的主要入口,jQuery的find方法就是调用该方法获取匹配的节点 * 该方法主要完成下列任务: * 1.对于单一选择器,且是ID.Tag.Class三种类型之一,则直接获取并返回结果 * 2.对于支持querySelectorAll方法

jQuery选择器源码解读(二):select方法_jquery

/* * select方法是Sizzle选择器包的核心方法之一,其主要完成下列任务: * 1.调用tokenize方法完成对选择器的解析 * 2.对于没有初始集合(即seed没有赋值)且是单一块选择器(即选择器字符串中没有逗号), * 完成下列事项: * 1) 对于首选择器是ID类型且context是document的,则直接获取对象替代传入的context对象 * 2) 若选择器是单一选择器,且是id.class.tag类型的,则直接获取并返回匹配的DOM元素 * 3) 获取最后一个id.cl

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

以下分析基于jQuery-1.10.2.js版本. 下面将以$("div:not(.class:contain('span')):eq(3)")为例,说明tokenize和preFilter各段代码是如何协调完成解析的.若想了解tokenize方法和preFilter类的每行代码的详细解释,请参看如下两篇文章: http://www.jb51.net/article/63155.htm http://www.jb51.net/article/63163.htm 下面是tokenize方

jQuery选择器源码解读(七):elementMatcher函数_jquery

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

jQuery选择器源码解读(八):addCombinator函数_jquery

function addCombinator(matcher, combinator, base) 1.源码 复制代码 代码如下: function addCombinator(matcher, combinator, base) {  var dir = combinator.dir, checkNonElements = base    && dir === "parentNode", doneName = done++;  return combinator.fi

jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析_jquery

近期看了一些网上关于Sizzle的分析文章,就匹配次序往往就说使用了从右到左的逆向匹配法,但是具体如何并没有详细介绍,或者就像我之前的几篇文章一样,就代码一行一行做详细介绍,但缺乏整体概念,这里就jQuery-1.10.2版本的Sizzle的匹配逻辑(预编译结果)做一整体说明,这里就不谈过多的细节了. Sizzle的匹配过程采用的是以从右到左的逆向匹配法为基础的改进版本,因为HTML的搜索毕竟和文本匹配有差异,它有自己独特的一面,所以,需要针对HTML的搜索进行优化.在此先申明一点,下面所说的关

jQuery源码解读之removeAttr()方法分析

 这篇文章主要介绍了jQuery源码解读之removeAttr()方法分析,较为详细的分析了removeAttr方法的实现技巧,非常具有实用价值,需要的朋友可以参考下     本文较为详细的分析了jQuery源码解读之removeAttr()方法.分享给大家供大家参考.具体分析如下: 扩展jQuery原型对象的方法: 代码如下: jQuery.fn.extend({ //name,传入要DOM元素要移除的属性名. removeAttr: function( name ) {   //使用jQue

jQuery源码解读之hasClass()方法分析

 这篇文章主要介绍了jQuery源码解读之hasClass()方法,以注释形式较为详细的分析了hasClass()方法的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文较为详细的分析了jQuery源码解读之hasClass()方法.分享给大家供大家参考.具体分析如下:   代码如下: jQuery.fn.extend({ hasClass: function( selector ) { //将要检查的类名selector赋值给className, l为选择器选择的当前要检查的j