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动态调整TextArea高度的代码
Dec 28 Javascript
js常用排序实现代码
Dec 28 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
vue中appear的用法
Aug 17 Javascript
js生成word中图片处理方法
Jan 06 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
实例讲解React 组件生命周期
Jul 08 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使之能同时支持GIF和JPEG
2006/10/09 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
jquery.validate使用攻略 第二部
2010/07/01 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
Python中几个比较常见的名词解释
2015/07/04 Python
Python找出9个连续的空闲端口
2016/02/01 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
基于python实现聊天室程序
2018/07/27 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
python调用摄像头的示例代码
2020/09/28 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
简历自我评价怎么写呢?
2014/01/06 职场文书
培训协议书范本
2014/04/22 职场文书
工业设计专业自荐书
2014/06/05 职场文书
死亡证明书样本说明
2014/10/18 职场文书
大学生逃课检讨书
2015/05/04 职场文书
微观世界观后感
2015/06/10 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
Redis特殊数据类型bitmap位图
2022/06/01 Redis