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 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
js+css实现上下翻页相册代码分享
Aug 18 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 Javascript
javascript自定义加载loading效果
Sep 15 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 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
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
php array_intersect()函数使用代码
2009/01/14 PHP
不要轻信 PHP_SELF的安全问题
2009/09/05 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
php生成二维码
2015/08/10 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
使用pandas read_table读取csv文件的方法
2018/07/04 Python
Python封装原理与实现方法详解
2018/08/28 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
Pytorch之parameters的使用
2019/12/31 Python
Python版中国省市经纬度
2020/02/11 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
防邪知识进家庭活动方案
2014/08/26 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
碧霞祠导游词
2015/02/09 职场文书
2015年工程师工作总结
2015/04/30 职场文书
Golang 切片(Slice)实现增删改查
2022/04/22 Golang