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 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
jquery实现垂直手风琴菜单
Mar 04 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
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
js网页版计算器的简单实现
2013/07/02 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
Python Pandas 箱线图的实现
2019/07/23 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
CSS3绘制不规则图形的一些方法示例
2015/11/07 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
党员公开承诺书
2014/03/25 职场文书
教师批评与自我批评
2014/10/15 职场文书
环卫工人慰问信
2015/02/15 职场文书
公司人力资源管理制度
2015/08/05 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技
服务器nginx权限被拒绝解决案例
2022/09/23 Servers