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 Prototype对象
Jan 07 Javascript
jQuery 全选效果实现代码
Mar 23 Javascript
input 输入框内的输入事件详细分析
Mar 17 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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 smarty函数扩展
2010/03/15 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
PHP实现的策略模式示例
2019/03/20 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
JavaScript 构造函数 面相对象学习必备知识
2010/06/09 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
Python入门篇之字符串
2014/10/17 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
python中kmeans聚类实现代码
2018/02/23 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
python实现银行管理系统
2019/10/25 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
公司口号大全
2014/06/11 职场文书
小学生春游活动方案
2014/08/20 职场文书
团队拓展活动总结
2014/08/27 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
原生JS实现分页
2022/04/19 Javascript