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 相关文章推荐
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 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
用php实现选择排序的解决方法
2013/05/04 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
php实现用户登陆简单实例
2017/04/04 PHP
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
js密码强度校验
2015/11/10 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
js前端实现图片懒加载(lazyload)的两种方式
2017/04/24 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
微信小程序实现无限滚动列表
2020/05/29 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
关于Python错误重试方法总结
2021/01/03 Python
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
自愿离婚协议书2015
2015/01/26 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
观看建国大业观后感
2015/06/01 职场文书
六五普法学习心得体会
2016/01/21 职场文书
《社戏》教学反思
2016/02/22 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
Spring Boot实现文件上传下载
2022/08/14 Java/Android