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 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
图片自动更新(说明)
Oct 02 Javascript
jquery 锁定弹出层实现代码
Feb 23 Javascript
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
一系列Bootstrap导航条使用方法分享
Apr 29 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
js中apply和call的理解与使用方法
Nov 27 Javascript
JS如何实现手机端输入验证码效果
May 13 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中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
php 地区分类排序算法
2013/07/01 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
vue 递归组件的简单使用示例
2021/01/14 Vue.js
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
Python实现迭代时使用索引的方法示例
2018/06/05 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
python自动发微信监控报警
2019/09/06 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
浅谈Python3中print函数的换行
2020/08/05 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
英文留学推荐信范文
2014/01/25 职场文书
高中运动会入场词
2014/02/14 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
2016新年年会主持词
2015/07/06 职场文书
Python采集股票数据并制作可视化柱状图
2022/04/04 Python