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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
[原创]网络复制内容时常用的正则+editplus
Nov 30 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
子窗体与父窗体传值示例js代码
Aug 01 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
小白谈谈对JS原型链的理解
May 03 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 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
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
使用PHP计算两个路径的相对路径
2013/06/14 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
python查看微信好友是否删除自己
2016/12/19 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
python 列表推导式使用详解
2019/08/29 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
python 实现return返回多个值
2019/11/19 Python
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
AOP的定义以及作用
2013/09/08 面试题
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
工业自动化专业毕业生推荐信
2013/11/18 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
2014年师德师风工作总结
2014/11/25 职场文书