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 相关文章推荐
jQuery多级弹出菜单插件ZoneMenu
Dec 18 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
150行Node.js实现的dns代理工具
Aug 02 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 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准确计算复活节日期的方法
2015/04/18 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
jquery1.9 下检测浏览器类型和版本的方法
2013/12/26 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Django 实现下载文件功能的示例
2018/03/06 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
计算机毕业生自荐信范文
2014/03/23 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
母亲去世追悼词
2015/06/23 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
礼貌问候语大全
2015/11/10 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
Python图片处理之图片裁剪教程
2021/05/27 Python
Java完整实现记事本代码
2022/06/16 Java/Android