jQuery技术内幕:深入解析jQuery架构设计与实现原理. 3.13 总结

简介:

3.13 总结

在本章中,对选择器引擎Sizzle做了完整的介绍和分析,总体源码结构见代码清单3-1,方法功能和调用关系见图3-1。在本章的最后还介绍和分析了jQuery对Sizzle的整合和扩展。

选择器表达式由块表达式和块间关系符组成。块表达式分为3种:简单表达式、属性表达式、伪类表达式;块间关系符分为4种:">"父子关系、""祖先后代关系、"+"紧挨着的兄弟元素、"~"之后的所有兄弟元素;块表达式和块间关系符组成了层级表达式。见图3-3。

Sizzle( selector, context, results, seed )用于查找与选择器表达式selector匹配的元素集合。如果浏览器支持原生方法querySelectorAll(),则调用该方法查找元素,如果不支持,则模拟该方法的行为。执行过程见图3-2。

正则chunker用于从选择器表达式中提取块表达式和块间关系符,其分解图和测试用例见图3-4。

Sizzle.find( expr, context, isXML )负责查找与块表达式匹配的元素集合。该方法按照表达式类型数组Sizzle.selectors.order规定的查找顺序(ID、CLASS、NAME、TAG)逐个尝试查找,如果未找到,则查找上下文的所有后代元素(*)。执行过程见图3-5。

Sizzle.filter( expr, set, inplace, not )负责用块表达式过滤元素集合。该方法通过调用过滤函数集Sizzle.selectors.filter中的过滤函数来执行过滤操作。执行过程见图3-6。

Sizzle.selectors包含了Sizzle在查找和过滤过程中用到的正则、查找函数、过滤函数,见图3-1。

Sizzle.selectors.order中定义了查找单个块表达式时的查找顺序,依次是ID、CLASS、NAME、TAG。其中,CLASS需要浏览器支持方法getElementsByClassName()。

Sizzle.selectors.match/leftMatch中存放了表达式类型和正则的映射,正则用于确定块表达式的类型,并解析其中的参数。解析图见图3-7~图3-14,测试用例见表3-3~表3-11。

Sizzle.selectors.find中定义了ID、CLASS、NAME、TAG所对应的查找函数。其中,CLASS需要浏览器支持方法getElementsByClassName()。查找函数会返回数组或undefined,内部通过调用相应的原生方法来查找元素,见表3-11。

Sizzle.selectors.relative中存放了块间关系符和对应的块间关系过滤函数。块间关系过滤函数用于检查映射集checkSet中的元素是否匹配块间关系符左侧的块表达式。支持的块间关系符和对应的过滤方式见表3-2。

Sizzle.selectors.preFilter中定义了CLASS、ID、TAG、CHILD、ATTR、PSEUDO、POS所对应的预过滤函数。预过滤函用于在过滤函数之前修正与过滤操作相关的参数,每种类型的预过滤函数的修正行为见表3-12;预过滤函数有3种返回值,见表3-13。

Sizzle.selectors.filters中定义了一组伪类和对应的伪类过滤函数。伪类过滤函数负责检查元素是否匹配伪类,返回一个布尔值。

Sizzle.selectors.setFilters中定义了一组位置伪类和对应的伪类过滤函数。位置伪类过滤函数通过比较下标来确定元素在集合中的位置,返回一个布尔值。

Sizzle.selectors.filter中定义了PSEUDO、CHILD、ID、TAG、CLASS、ATTR、POS对应的过滤函数。过滤函数负责检查元素是否匹配过滤表达式,返回一个布尔值。

相关文章
|
16天前
|
Linux 编译器 开发者
Linux设备树解析:桥接硬件与操作系统的关键架构
在探索Linux的庞大和复杂世界时🌌,我们经常会遇到许多关键概念和工具🛠️,它们使得Linux成为了一个强大和灵活的操作系统💪。其中,"设备树"(Device Tree)是一个不可或缺的部分🌲,尤其是在嵌入式系统🖥️和多平台硬件支持方面🔌。让我们深入了解Linux设备树是什么,它的起源,以及为什么Linux需要它🌳。
Linux设备树解析:桥接硬件与操作系统的关键架构
|
1月前
|
存储 搜索推荐 数据挖掘
ElasticSearch架构介绍及原理解析
ElasticSearch架构介绍及原理解析
101 0
|
2月前
|
架构师 安全 Java
资深架构师带你解析Synchronize关键字原理
众所周知 Synchronize 关键字是解决并发问题常用解决方案,有以下三种使用方式:
28 0
|
3月前
|
设计模式 Java 应用服务中间件
Tomcat 架构原理解析到设计借鉴
Tomcat 架构原理解析到设计借鉴
146 0
|
3月前
|
设计模式 Java 应用服务中间件
Tomcat 架构原理解析到架构设计借鉴
Tomcat 架构原理解析到架构设计借鉴
106 0
|
3月前
|
存储 缓存 关系型数据库
鱼和熊掌如何兼得?一文解析RDS数据库存储架构升级
阿里云RDS率先推出新型存储类型通用云盘,提供低延迟、低成本、高持久性的用户体验。
鱼和熊掌如何兼得?一文解析RDS数据库存储架构升级
|
1月前
|
消息中间件 Cloud Native Java
【Spring云原生系列】SpringBoot+Spring Cloud Stream:消息驱动架构(MDA)解析,实现异步处理与解耦合
【Spring云原生系列】SpringBoot+Spring Cloud Stream:消息驱动架构(MDA)解析,实现异步处理与解耦合
|
3月前
|
安全 Java 应用服务中间件
阿里技术官架构使用总结:Spring+MyBatis源码+Tomcat架构解析等
分享Java技术文以及学习经验也有一段时间了,实际上作为程序员,我们都清楚学习的重要性,毕竟时代在发展,互联网之下,稍有一些落后可能就会被淘汰掉,因此我们需要不断去审视自己,通过学习来让自己得到相应的提升。
|
2天前
|
前端开发 Java
SpringBoot之三层架构的详细解析
SpringBoot之三层架构的详细解析
13 0
|
26天前
|
canal 消息中间件 关系型数据库
【分布式技术专题】「分布式技术架构」MySQL数据同步到Elasticsearch之N种方案解析,实现高效数据同步
【分布式技术专题】「分布式技术架构」MySQL数据同步到Elasticsearch之N种方案解析,实现高效数据同步
74 0

推荐镜像

更多