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 相关文章推荐
[JS]点出统计器
Oct 11 Javascript
JavaScript 更严格的相等 [译]
Sep 20 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
canvas知识总结
Jan 25 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
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导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
pygame实现打字游戏
2021/02/19 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
如何卸载python插件
2020/07/08 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
会展策划与管理专业求职信
2014/06/09 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
python中的装饰器该如何使用
2021/06/18 Python
Python必备技巧之字符数据操作详解
2022/03/23 Python
Linux中sftp常用命令整理
2022/06/28 Servers