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


Posted in Javascript onMarch 31, 2015

近期看了一些网上关于Sizzle的分析文章,就匹配次序往往就说使用了从右到左的逆向匹配法,但是具体如何并没有详细介绍,或者就像我之前的几篇文章一样,就代码一行一行做详细介绍,但缺乏整体概念,这里就jQuery-1.10.2版本的Sizzle的匹配逻辑(预编译结果)做一整体说明,这里就不谈过多的细节了。

Sizzle的匹配过程采用的是以从右到左的逆向匹配法为基础的改进版本,因为HTML的搜索毕竟和文本匹配有差异,它有自己独特的一面,所以,需要针对HTML的搜索进行优化。在此先申明一点,下面所说的关系选择器是指W3C中的Combinator选择器,因本人觉得用关系选择器这个名字要比其它更加贴近实际意义,故用此命名。

1、简单介绍一下Sizzle编译执行的两个主要函数:

a) matcherFromTokens——针对一个块选择器生成执行函数,所谓块选择器就是不包含逗号分隔的选择器字符串。

b) matcherFromGroupMatchers——将不同的块选择器生成的最终执行函数,该函数还负责将最终结果过滤掉重复对象。

2、matcherFromTokens函数针对不同类型的选择器产生不同的执行函数。若包含伪类,则返回setMatcher,否则返回的是elementMatcher,代码通过鉴别matcher是否包含expando属性来区别setMatcher和elementMatcher:

a) 针对非伪类且非关系选择器,直接从左到右依次生成执行函数,各函数作为同一个matchers数组的不同元素存在。

b) 针对关系选择器,将会把之前生成的matchers压入一个新的matchers数组中。

c) 针对伪类选择器,将通过setMatcher函数生成一个执行函数,调用setMatcher时,依次传入6个参数,分别是preFilter, selector, matcher, postFilter, postFinder, postSelector。

      preFilter是在执行setMatcher函数之前已生成的matchers数组经elementMatcher函数加工过的最终函数,elementMatcher(matchers)将返回一个从后向前依次执行每一个matchers元素函数的新函数;。

      selector是matchers对应的选择器字符串;

      matcher是伪类自身的匹配函数;

      postFilter是伪类之后,到第一个伪类或关系符之间的选择器字符串对应的匹配函数,它是嵌套调用matcherFromTokens函数的返回结果;

      postFinder是postFilter对应选择器之后的所有选择器生成的匹配函数,同样也是通过嵌套调用matcherFromTokens函数的返回结果;

      postSelector是postFinder对应的选择器字符串。

d) 若选择器字符串中没有伪类,那么,将返回elementMatcher(matchers)生成的最终匹配函数。

从上面的介绍可以看出,生成的执行函数之间存在着嵌套关系,简单的讲就是setMatcher包含matchers,关系选择器匹配函数包含非伪类且非关系选择器匹配函数。

3、执行过程的介绍:

a) 执行块选择器的执行函数:

      针对elementMatcher,从外到里从后到前依次执行,即从最外层数组到最里层数组依次执行,同一个数组中,从最后一个元素到第一个元素依次执行。

      针对setMatcher,先依据preFilter和selector获得匹配结果;然后执行matcher函数获取匹配结果;之后,执行postFilter函数,最后,依据postFinder和postSelector获取匹配结果。

c) 依次执行每个块选择器的执行函数后,过滤掉重复数据,并返回结果。

看了上述大致过程,再去看各方法的详细介绍应该比较容易理解了,当然在这里没有谈到一些细节,例如初始结果集(seed)的生成及由此带来的函数执行逻辑细节上的差异等。

Javascript 相关文章推荐
ExtJS 下拉多选框lovcombo
May 19 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 #Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 #Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 #Javascript
JavaScript制作简易的微信打飞机
Mar 31 #Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 #Javascript
JS实现为表格动态添加标题的方法
Mar 31 #Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 #Javascript
You might like
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
onpropertypchange
2006/07/01 Javascript
javascript中获取选中对象的类型
2007/04/02 Javascript
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
Python中的ConfigParser模块使用详解
2015/05/04 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
大学生自我评价怎样写好
2013/10/23 职场文书
大学军训感言600字
2014/02/25 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
党员岗位承诺书
2014/03/25 职场文书
运动员获奖感言
2014/08/15 职场文书
担保书范文
2019/07/09 职场文书
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers