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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
js 分栏效果实现代码
Aug 29 Javascript
jquery 笔记 事件
Nov 02 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 Javascript
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/08/09 PHP
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
理解JavaScript中的对象 推荐
2011/01/09 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
Javascript复制实例详解
2016/01/28 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
python抓取网页中的图片示例
2014/02/28 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
Python中最大递归深度值的探讨
2019/03/05 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
Python Django view 两种return的实现方式
2020/03/16 Python
Python日志处理模块logging用法解析
2020/05/19 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
客户代表自我评价范例
2013/09/24 职场文书
酒店管理毕业生自荐信
2013/10/24 职场文书
项目建议书范文
2014/05/12 职场文书
社区科普工作方案
2014/06/03 职场文书
告知书格式
2015/07/01 职场文书
调解协议书范本
2016/03/21 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android