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 相关文章推荐
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 Javascript
angular十大常见问题
Mar 07 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
原生js实现随机点名
Jul 05 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 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的正则处理函数总结分析
2008/06/20 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
详解python单例模式与metaclass
2016/01/15 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
人力资源管理专业学生自我评价
2013/11/20 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
拓展策划方案
2014/06/03 职场文书
2014高考励志标语
2014/06/05 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
2014年学校工作总结
2014/11/20 职场文书
班主任先进事迹材料
2014/12/17 职场文书