jQuery技术内幕:深入解析jQuery架构设计与实现原理. 3.6 Sizzle.find( expr, context, isXML )

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介:

3.6 Sizzle.find( expr, context, isXML )

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

 

图3-3 Sizzle( selector, context, results, seed )的执行过程

 

 

方法Sizzle.find( expr, context, isXML )执行的5个关键步骤如下:

1)先用正则集合Sizzle.selectors.leftMatch中的正则确定表达式类型。

2)然后调用查找函数集Sizzle.selectors.find中对应类型的查找函数,查找匹配的元素集合。

3)然后删除块表达式中已查找过的部分。

4)如果没有找到对应类型的查找函数,则读取上下文的所有后代元素。

5)最后返回格式为{set:候选集, expr:块表达式剩余部分}的对象。

下面来看看该方法的源码实现。

1.?定义Sizzle.find( expr, context, isXML )

相关代码如下所示:

4051 Sizzle.find = function( expr, context, isXML ) {

第4051行:定义方法Sizzle.find( expr, context, isXML ),它接受3个参数:

参数expr:块表达式。

参数context:DOM元素或文档对象,作为查找时的上下文。

参数isXML:布尔值,指示是否运行在一个XML文档中。

2.?遍历表达式类型数组Sizzle.selectors.order

相关代码如下所示:

4052     var set, i, len, match, type, left;

4053

4054     if ( !expr ) {

4055         return [];

4056     }

4057

4058     for ( i = 0, len = Expr.order.length; i < len; i++ ) {

4059         type = Expr.order[i];

4060        

第4054~4056行:如果块表达式expr是空字符串,则直接返回空数组[]。

第4058行:表达式类型数组Sizzle.selectors.order中定义了查找单个块表达式时的顺序,依次是ID、CLASS、NAME、TAG,其中,CLASS需要浏览器支持方法getElements

ByClassName()。关于Sizzle.selectors.order的具体说明请参见3.9.1节。

(1)确定块表达式类型Sizzle.selectors.leftMatch[ type ]

相关代码如下所示:

4061         if ( (match = Expr.leftMatch[ type ].exec( expr )) ) {

4062             left = match[1];

4063             match.splice( 1, 1 );

4064

第4061行:检查每个表达式类型type在Sizzle.selectors.leftMatch中对应的正则是否匹配块表达式expr,如果匹配,则可以确定块表达式的类型。

第4062~4063行:对象Sizzle.selectors.leftMatch中存放了表达式类型和正则的映射,正则可以用于确定块表达式的类型,并解析其中的参数。它是基于对象Sizzle.selectors.match初始化的,具体请参见3.9.2节。

(2)查找匹配元素Sizzle.selectors.find[ type ]

相关代码如下所示:

4065             if ( left.substr( left.length - 1 ) !== "\\" ) {

4066                 match[1] = (match[1] || "").replace( rBackslash, "" );

4067                 set = Expr.find[ type ]( match, context, isXML );

4068

第4065行:如果匹配正则的内容以反斜杠"\\"开头,表示反斜杠"\\"之后的字符被转义了,不是期望的类型,这时会认为类型匹配失败。

第4066行:过滤其中的反斜杠,以支持将某些特殊字符(例如,“#”、“.”、“[”)作为普通字符使用。举个例子,假设某个input元素的属性id是"a.b",则对应的选择器表达式应该写作$("#a\\.b"),这里替换掉了反斜杠,又会变回"a.b",因此仍然可以通过执行document.getElementsById("a.b")查找到input元素。

第4067行:调用表达式类型type在查找函数集Sizzle.selectors.find中对应的查找函数,查找匹配的元素集合。Sizzle.selectors.find中定义了ID、CLASS、NAME、TAG所对应的查找函数,具体请参见3.9.3节。

(3)删除块表达式中已查找过的部分

相关代码如下所示:

4069                 if ( set != null ) {

4070                     expr = expr.replace( Expr.match[ type ], "" );

4071                     break;

4072                 }

4073             }

4074         }

4075     }

4076

第4069~4072行:如果set不是null和undefined,表示对应的查找函数执行了查找操作,则不管有没有找到匹配元素,都将块表达式expr中已查找过的部分删除,并结束方法Sizzle.find( expr, context, isXML )的查找过程。

第4070行:用对象Sizzle.selectors.match中对应的正则来匹配已查找过的部分,具体请参见3.9.2节。

3.?如果没有找到对应类型的查找函数,则读取上下文的所有后代元素

相关代码如下所示:

4077     if ( !set ) {

4078         set = typeof context.getElementsByTagName !== "undefined" ?

4079             context.getElementsByTagName( "*" ) :

4080             [];

4081     }

4082

第4077~4081行:如果set是null或undefined,(大多数情况下)表示没有在Sizzle.selectors.find中找到对应的查找函数,例如,$(":input")会读取上下文的所有后代元素作为候选集。

4.?返回{ set:候选集, expr:块表达式剩余部分}

相关代码如下所示:

4083     return { set: set, expr: expr };

4084 };

方法Sizzle.find( expr, context, isXML )的执行过程可总结为图3-5。

 

图3-5 Sizzle.find( expr, context, isXML )的执行过程

相关文章
|
1月前
|
存储 SQL 关系型数据库
MySQL进阶突击系列(03) MySQL架构原理solo九魂17环连问 | 给大厂面试官的一封信
本文介绍了MySQL架构原理、存储引擎和索引的相关知识点,涵盖查询和更新SQL的执行过程、MySQL各组件的作用、存储引擎的类型及特性、索引的建立和使用原则,以及二叉树、平衡二叉树和B树的区别。通过这些内容,帮助读者深入了解MySQL的工作机制,提高数据库管理和优化能力。
|
1月前
|
人工智能 前端开发 编译器
【AI系统】LLVM 架构设计和原理
本文介绍了LLVM的诞生背景及其与GCC的区别,重点阐述了LLVM的架构特点,包括其组件独立性、中间表示(IR)的优势及整体架构。通过Clang+LLVM的实际编译案例,展示了从C代码到可执行文件的全过程,突显了LLVM在编译器领域的创新与优势。
94 3
|
12天前
|
Java Linux C语言
《docker基础篇:2.Docker安装》包括前提说明、Docker的基本组成、Docker平台架构图解(架构版)、安装步骤、阿里云镜像加速、永远的HelloWorld、底层原理
《docker基础篇:2.Docker安装》包括前提说明、Docker的基本组成、Docker平台架构图解(架构版)、安装步骤、阿里云镜像加速、永远的HelloWorld、底层原理
251 89
|
4天前
|
存储 缓存 监控
ClickHouse 架构原理及核心特性详解
ClickHouse 是由 Yandex 开发的开源列式数据库,专为 OLAP 场景设计,支持高效的大数据分析。其核心特性包括列式存储、字段压缩、丰富的数据类型、向量化执行和分布式查询。ClickHouse 通过多种表引擎(如 MergeTree、ReplacingMergeTree、SummingMergeTree)优化了数据写入和查询性能,适用于电商数据分析、日志分析等场景。然而,它在事务处理、单条数据更新删除及内存占用方面存在不足。
87 21
|
4天前
|
存储 消息中间件 druid
Druid 架构原理及核心特性详解
Druid 是一个分布式、支持实时多维OLAP分析的列式存储数据处理系统,适用于高速实时数据读取和灵活的多维数据分析。它通过Segment、Datasource等元数据概念管理数据,并依赖Zookeeper、Hadoop和Kafka等组件实现高可用性和扩展性。Druid采用列式存储、并行计算和预计算等技术优化查询性能,支持离线和实时数据分析。尽管其存储成本较高且查询语言功能有限,但在大数据实时分析领域表现出色。
45 19
|
4天前
|
存储 SQL NoSQL
Doris 架构原理及核心特性详解
Doris 是百度内部孵化的OLAP项目,现已开源并广泛应用。它采用MPP架构、向量化执行引擎和列存储技术,提供高性能、易用性和实时数据处理能力。系统由FE(管理节点)和BE(计算与存储节点)组成,支持水平扩展和高可用性。Doris 适用于海量数据分析,尤其在电商、游戏等行业表现出色,但资源消耗较大,复杂查询优化有局限性,生态集成度有待提高。
37 15
|
1天前
|
Java 网络安全 开发工具
Git进阶笔记系列(01)Git核心架构原理 | 常用命令实战集合
通过本文,读者可以深入了解Git的核心概念和实际操作技巧,提升版本管理能力。
|
20天前
|
机器学习/深度学习 算法 PyTorch
深度强化学习中SAC算法:数学原理、网络架构及其PyTorch实现
软演员-评论家算法(Soft Actor-Critic, SAC)是深度强化学习领域的重要进展,基于最大熵框架优化策略,在探索与利用之间实现动态平衡。SAC通过双Q网络设计和自适应温度参数,提升了训练稳定性和样本效率。本文详细解析了SAC的数学原理、网络架构及PyTorch实现,涵盖演员网络的动作采样与对数概率计算、评论家网络的Q值估计及其损失函数,并介绍了完整的SAC智能体实现流程。SAC在连续动作空间中表现出色,具有高样本效率和稳定的训练过程,适合实际应用场景。
91 7
深度强化学习中SAC算法:数学原理、网络架构及其PyTorch实现
|
1月前
|
运维 监控 持续交付
微服务架构解析:跨越传统架构的技术革命
微服务架构(Microservices Architecture)是一种软件架构风格,它将一个大型的单体应用拆分为多个小而独立的服务,每个服务都可以独立开发、部署和扩展。
367 36
微服务架构解析:跨越传统架构的技术革命
|
2天前
|
机器学习/深度学习 人工智能 自然语言处理
一文彻底讲透GPT架构及推理原理
本篇是作者从开发人员的视角,围绕着大模型正向推理过程,对大模型的原理的系统性总结,希望对初学者有所帮助。

推荐镜像

更多