在分析 Sizzle 源码之前, 先整理一下选择器的工作原理
先明确一些选择器中用到的名词, 后边阅读时不会有歧义:
选择器表达式: "p> p"
块表达式: "p" "p"
并列选择器表达式: "p, 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
多个上下文例子:$('p').find('p> p'),$('p') 可能找到多个 p
其实第 7 步是 jQuery 选择器的入口, 从第 7 步去调用 1~6, 调用时传入一个空的 jQuery 对象作为结果集
默认以 document 为上下文:(context || rootjQuery).find( selector )
8. 将从多个上下文找到的结果集合并, 去重, 返回结果集
done!
来源: https://www.2cto.com/kf/201806/756700.html