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

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 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 )的执行过程

相关文章
|
15天前
|
存储 算法 Java
解析HashSet的工作原理,揭示Set如何利用哈希算法和equals()方法确保元素唯一性,并通过示例代码展示了其“无重复”特性的具体应用
在Java中,Set接口以其独特的“无重复”特性脱颖而出。本文通过解析HashSet的工作原理,揭示Set如何利用哈希算法和equals()方法确保元素唯一性,并通过示例代码展示了其“无重复”特性的具体应用。
35 3
|
4天前
|
开发者 容器
Flutter&鸿蒙next 布局架构原理详解
本文详细介绍了 Flutter 中的主要布局方式,包括 Row、Column、Stack、Container、ListView 和 GridView 等布局组件的架构原理及使用场景。通过了解这些布局 Widget 的基本概念、关键属性和布局原理,开发者可以更高效地构建复杂的用户界面。此外,文章还提供了布局优化技巧,帮助提升应用性能。
62 4
|
4天前
|
存储 Dart 前端开发
flutter鸿蒙版本mvvm架构思想原理
在Flutter中实现MVVM架构,旨在将UI与业务逻辑分离,提升代码可维护性和可读性。本文介绍了MVVM的整体架构,包括Model、View和ViewModel的职责,以及各文件的详细实现。通过`main.dart`、`CounterViewModel.dart`、`MyHomePage.dart`和`Model.dart`的具体代码,展示了如何使用Provider进行状态管理,实现数据绑定和响应式设计。MVVM架构的分离关注点、数据绑定和可维护性特点,使得开发更加高效和整洁。
141 3
|
3天前
|
算法 Java 数据库连接
Java连接池技术,从基础概念出发,解析了连接池的工作原理及其重要性
本文详细介绍了Java连接池技术,从基础概念出发,解析了连接池的工作原理及其重要性。连接池通过复用数据库连接,显著提升了应用的性能和稳定性。文章还展示了使用HikariCP连接池的示例代码,帮助读者更好地理解和应用这一技术。
13 1
|
7天前
|
监控 API 调度
开放源代码平台Flynn的架构与实现原理
【10月更文挑战第21天】应用程序的生命周期涉及从开发到运行的复杂过程,包括源代码、构建、部署和运行阶段。
|
8天前
|
数据采集 存储 编解码
一份简明的 Base64 原理解析
Base64 编码器的原理,其实很简单,花一点点时间学会它,你就又消除了一个知识盲点。
36 3
|
16天前
|
容器
Flutter&鸿蒙next 布局架构原理详解
Flutter&鸿蒙next 布局架构原理详解
|
27天前
|
前端开发 Java 应用服务中间件
21张图解析Tomcat运行原理与架构全貌
【10月更文挑战第2天】本文通过21张图详细解析了Tomcat的运行原理与架构。Tomcat作为Java Web开发中最流行的Web服务器之一,其架构设计精妙。文章首先介绍了Tomcat的基本组件:Connector(连接器)负责网络通信,Container(容器)处理业务逻辑。连接器内部包括EndPoint、Processor和Adapter等组件,分别处理通信、协议解析和请求封装。容器采用多级结构(Engine、Host、Context、Wrapper),并通过Mapper组件进行请求路由。文章还探讨了Tomcat的生命周期管理、启动与停止机制,并通过源码分析展示了请求处理流程。
|
24天前
|
开发框架 缓存 前端开发
electron-builder 解析:你了解其背后的构建原理吗?
本文首发于微信公众号“前端徐徐”,详细解析了 electron-builder 的工作原理。electron-builder 是一个专为整合前端项目与 Electron 应用的打包工具,负责管理依赖、生成配置文件及多平台构建。文章介绍了前端项目的构建流程、配置信息收集、依赖处理、asar 打包、附加资源准备、Electron 打包、代码签名、资源压缩、卸载程序生成、安装程序生成及最终安装包输出等环节。通过剖析 electron-builder 的原理,帮助开发者更好地理解和掌握跨端桌面应用的构建流程。
57 2
|
25天前
|
存储 分布式计算 druid
大数据-155 Apache Druid 架构与原理详解 数据存储 索引服务 压缩机制
大数据-155 Apache Druid 架构与原理详解 数据存储 索引服务 压缩机制
43 3

推荐镜像

更多