jQuery源码分析-04选择器-Sizzle-工作原理分析
作者:手浪用户2502876054 | 来源:互联网 | 2022-10-13 17:23
在分析Sizzle源码之前,先整理一下选择器的工作原理,先明确一些选择器中用到的名词,后边阅读时不会有歧义
作者: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!
推荐阅读
这一篇主要总结一下jQuery这个js在引入的时候做的一些初始化工作第一句window.undefinedwindow.undefined;是为了兼容低版本的IE而写的因为在低版本 ...
[详细]
蜡笔小新 2024-09-30 13:40:32
摘要 文本生成图像作为近几年的热门研究领域,其解决的问题是从一句描述性文本生成与之对应的图片。近一周来,我通过阅读了近几年发表于顶会的近10篇论文,做出本文中对该方向的 ...
[详细]
蜡笔小新 2024-09-29 11:02:00
Lodash中文文档(v3.10.1)–“Collection”要领TranslatedbyPeckZegOriginalDocs:Lodashv3.10.1Docs乞助翻译文档的 ...
[详细]
蜡笔小新 2024-09-28 08:08:39
1.研究背景及其意义互联网从发展到至今,已经深入到人们的日常生活中,并且不论老人还是小孩,多少都会接触到互联网。在这个越来越信息化的社会& ...
[详细]
蜡笔小新 2024-09-27 16:52:06
本文目录一览:1、java中判断字符串是否为纯数字 ...
[详细]
蜡笔小新 2024-09-27 16:26:40
1、创建高级对象使用构造函数来创建对象构造函数是一个函数,调用它来例示并初始化特殊类型的对象。可以使用new关键字来调用一个构造函数。下面给出了使用构造函数的新示例。 ...
[详细]
蜡笔小新 2024-09-27 16:12:55
蜡笔小新 2024-09-27 15:01:41
篇首语:本文由编程笔记#小编为大家整理,主要介绍了js正则表达式属性及方法的使用相关的知识,希望对你有一定的参考价值。正则表达式直接量 ...
[详细]
蜡笔小新 2024-09-27 14:19:50
shell命令四剑客1.grepUnix中用于文本搜索的工具,它能够接受正则表达式和通配符。也是日常开发调试中用的最多的。用于处理每行的文本grep匹配文本通配符 ...
[详细]
蜡笔小新 2024-09-27 13:40:13
前几天线上一个项目监控信息突然报告异常,上到机器上后查看相关资源的使用情况,发现CPU利用率将近100%。通过Java自带的线程Dump工具 ...
[详细]
蜡笔小新 2024-09-27 10:18:16
这篇文章主要介绍了Numpy中np.random.rand()和np.random.randn()用法和区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考 ...
[详细]
蜡笔小新 2024-09-27 00:01:46
记录工作和学习中遇到和使用过的Python库。Target四个Level整理Collect学习Learn练习Practice掌握Master1.Python原生和功能增强1.1py ...
[详细]
蜡笔小新 2024-09-26 15:52:28
1)2003CPTCode:90801-PsychiatricDiagnos2)y1983ClinicHospital,firsthospitaliz ...
[详细]
蜡笔小新 2024-09-26 12:41:31
re正则表达式1.什么是正则?正则就是用一系列具有特殊含义的字符组成的规则,该规则用来描述具有某一特征的字符串。正则就是用来在一个大的字符串匹配出符合规则的子字符串2.为什么用正则 ...
[详细]
蜡笔小新 2024-09-26 09:46:36
这是网页上的script我要获取的是00914这个数字直接使用正则表达式即可运行结果:源码:importrefrombs4importBeautif ...
[详细]
蜡笔小新 2024-09-25 20:51:39
手浪用户2502876054
这个家伙很懒,什么也没留下!