开发者社区> 华章计算机> 正文

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对应的过滤函数。过滤函数负责检查元素是否匹配过滤表达式,返回一个布尔值。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
深入理解设计模式!六大设计原则的分析与介绍
本篇文章开始介绍程序架构设计中的设计模式,介绍了设计模式的基本概念以及23设计模式。主要介绍了设计模式中的六大设计原则。开闭原则,里氏代换原则,依赖倒转原则,接口隔离原则,迪米特原则和合成复用原则。这几大原则是设计模式使用的基础,在使用设计模式时,应该牢记这六大原则。
101 0
深入理解设计模式!五大创建型模式的详细解析
本篇文章中介绍了设计模式中的五大创建型模式。包括工厂方法模式,抽象工厂模式,单例模式,建造者模式以及原型模式。通过对五种创建模式的基本介绍以及使用示例的分析,可以理解设计模式中创建型模式的使用方式和使用场景。
33 0
深入理解Java设计模式!七大结构型模式详细解析
本篇文章深入分析了设计模式中的七大结构型设计模式。主要包括适配器模式,装饰器模式,代理模式,外观模式,桥接模式,组合模式和享元模式。通过这篇文章的学习,基本上可以了解程序设计模式中的结构的模式的使用方式和使用场景。
314 0
让小程序在自有App中启动的技术来了:mPaaS小程序架构深度解析
mPaaS 小程序框架作为一款 App 通用框架,帮助开发者面向自身的 App 实现小程序投放。不止如此,小程序代码仅需撰写一次,便可多端投放至自有 App、支付宝、钉钉甚至其他小程序开放平台。
2083 0
9款设计独特的jQuery/CSS3插件
今天要为大家分享9款设计非常独特的jQuery/CSS3全新应用插件,插件包含菜单、jQuery焦点图、jQuery表单、jQuery图片特效等。下面大家一起来看看吧。
42 0
Spring源码剖析7:AOP实现原理详解
参考http://www.linkedkeeper.com/detail/blog.action?bid=1048 前言 前面写了六篇文章详细地分析了Spring Bean加载流程,这部分完了之后就要进入一个比较困难的部分了,就是AOP的实现原理分析。
2442 0
Java NIO三组件——Selecotr/Channel实现原理解析
Java NIO三组件——Selecotr/Channel实现原理解析
132 0
深入理解设计模式!详细解析11种行为型模式
本篇文章主要介绍了程序设计中设计模式的行为型模式。行为型模式包括策略模式,模板方法模式,观察者模式,迭代子模式,责任链模式,命令模式,备忘录模式,状态模式,访问者模式,中介者模式和解释器模式。详细说明了这11种行为型模式的使用方式和使用场景。
93 0
10059
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载