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


Posted in Javascript onMarch 31, 2015
/*
 * 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);
}
Javascript 相关文章推荐
各情景下元素宽高的获取实现代码
Sep 13 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
jquery slibings选取同级其他元素的实现代码
Nov 15 Javascript
js字符串操作方法实例分析
May 06 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
JS FormData对象使用方法实例详解
Feb 12 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
javascript制作游戏开发碰撞检测的封装代码
Mar 31 #Javascript
jQuery选择器源码解读(二):select方法
Mar 31 #Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 #Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 #Javascript
jQuery Ajax调用WCF服务详细教程
Mar 31 #Javascript
JavaScript父子窗体间的调用方法
Mar 31 #Javascript
JavaScript操作cookie类实例
Mar 31 #Javascript
You might like
一个PHP分页类的代码
2011/05/18 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
div模拟滚动条效果示例代码
2013/10/16 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
详解Python中如何写控制台进度条的整理
2018/03/07 Python
机器学习实战之knn算法pandas
2019/06/22 Python
python 使用while写猜年龄小游戏过程解析
2019/10/07 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
财务主管自我鉴定
2014/01/17 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
绿色城市实施方案
2014/03/19 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
2014年内勤工作总结
2014/11/24 职场文书
初中差生评语
2014/12/29 职场文书
会计试用期工作总结2015
2015/05/28 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python