jQuery源码分析-04 选择器-Sizzle-工作原理分析


Posted in Javascript onNovember 14, 2011

作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com
声明:本文为原创文章,如需转载,请注明来源并保留原文链接。
在分析Sizzle源码之前,先整理一下选择器的工作原理

先明确一些选择器中用到的名词,后边阅读时不会有歧义:

选择器表达式: "div > p"
块表达式: "div" "p"
并列选择器表达式: "div, p"
块分割器: Sizzle中的chunker正则,对选择器表达式从左向右分割出一个个块表达式
查找器: 对块表达式进行查找,找到的DOM元素数组叫候选集
过滤器: 对块表达式和候选集进行过滤
关系过滤器 对块表达式之间的关系进行过滤,共有四种关系:"+" 紧挨着的兄弟关系;">" 父子关系;"" 祖先关系;"~" 之后的所有兄弟关系
候选集: 查找器的结果,待过滤器进行过滤
映射集: 候选集的副本,过滤器和关系过滤器对映射集进行过滤

工作流程:

1. 使用块分割器对选择器表达式进行分割,从左向右
如果遇到用逗号","分割的并列选择器表达式,只分割至第一个逗号前边的选择器表达式1,将剩余部分记录下来

2. 对最后一个块表达式进行查找Sizzle.find,结果放入候选集set,并将块表达式中匹配的字符串部分删除
查找器Sizzle.find从正则集Expr.match获取对应的正则表达式,对块表达式进行匹配,匹配成功则从查找函数集Expr.find获取对应的查找函数执行
查找顺序定义在Expr.order中,依次是:ID CLASS NAME TAG,查找时CLASS需要浏览器支持getElementsByClassName
Expr.match中设定了ID CLASS NAME ATTR TAG CHILD POS PSEUDO的正则匹配表达式

3. 如果最后一个块表达式不为空(字符串),过滤器Sizzle.filter对set进行过滤
过滤器Sizzle.filter仅对单个块表达式起作用,仅对候选集set中的元素起作用,检查候选集set中的元素满足剩余的块表达式
在过滤器Sizzle.filter的过滤过程中,不符合条件的被设置为false,符合条件的不做修改
过滤时从正则集Expr.leftMatch获取对应的正则表达式,对块表达式进行匹配,匹配成功则从Expr.filter获取对应的过滤函数执行
Expr.leftMatch定义了与Expr.match同样数量的正则表达式:ID CLASS NAME ATTR TAG CHILD POS PSEUDO
过滤函数集Expr.filter定义了PSEUDO CHILD ID TAG CLASS ATTR POS的过滤函数
过滤器Sizzle.filter进行过滤之前,会先调用预过滤器Expr.preFilter对过滤所需的参数进行修正,但是CLASS是个例外
在CLASS进行预过滤时做了优化,直接将匹配class的元素作为候选集返回,缩小过滤范围,缩小候选集范围
将以上查找和过滤得到候选集set复制,放入映射集checkSet,后边的过滤操作在checkSet上进行
对最后一个块表达式的查找和过滤到这里结束,得到一个候选集set和映射集checkSet

4. 在映射集checkSet上将剩余的块表达式从右向左进行过滤,根据与前一个块表达式的关系,从关系过滤器集Expr.relative中获取对应的函数执行关系过滤
在关系过滤器Expr.relative的过滤过程中,不符合条件的被设置为false,符合条件的则被设置为父元素、祖先元素、兄长元素
元素之间的关系共有四种:"+" 紧挨着的兄弟关系;">" 父子关系;"" 祖先关系;"~" 之后的所有兄弟关系
在关系过滤器Expr.relative的过滤过程中,如果遇到块表达式是标签TAG的情况,则直接比较标签类型nodeName是否相等
如果不是标签TAG的情况,则会调用过滤器Sizzle.filter进行过滤,过滤过程见第3步
从右向左过滤,直到所有块表达式全部过滤完

5. 根据过滤后的映射集checkSet,从候选集set中挑选最终的结果集,在映射集checkSet中
如果是null、false,将被过滤
如果不是Element(nodeType===1),将被过滤
如果上下文不是Document而是某个Element,不是Element的子元素的,将被过滤

6. 如果存在并列表达式,重复1~5,并将得到的最终结果集合并、排序、去重
如果仅有一个选择器表达式,没有并列选择器表达式,不需要排序

以下过程不属于Sizzle,属于jQuery对Sizzle的扩展

7. 如果存在多个上下文,对每个上下文重复1~6
多个上下文例子:$('div').find('div > p'),$('div')可能找到多个div
其实第7步是jQuery选择器的入口,从第7步去调用1~6,调用时传入一个空的jQuery对象作为结果集
默认以document为上下文:(context || rootjQuery).find( selector )

8. 将从多个上下文找到的结果集合并、去重,返回结果集

done!

Javascript 相关文章推荐
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
javascript操作excel生成报表全攻略
May 04 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 #Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 #Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 #Javascript
jQuery源码分析-01总体架构分析
Nov 14 #Javascript
js Form.elements[i]的使用实例
Nov 13 #Javascript
jquery中使用ajax获取远程页面信息
Nov 13 #Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 #Javascript
You might like
PHP禁止个别IP访问网站
2013/10/30 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
javascript 闭包疑问
2010/12/30 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
Python字符串格式化输出方法分析
2016/04/13 Python
python2.7到3.x迁移指南
2018/02/01 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
浅析Django中关于session的使用
2019/12/30 Python
详解python破解zip文件密码的方法
2020/01/13 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
Java文件和目录(IO)操作
2014/08/26 面试题
配件采购员岗位职责
2013/12/03 职场文书
初一生物教学反思
2014/01/18 职场文书
求职简历中自我评价
2014/01/28 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
课外活动实习计划
2015/01/19 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL