jQuery源码分析-04 选择器-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！

赞 (0)

相关推荐

  • jquery选择器原理介绍($()使用方法)

    每次申明一个jQuery对象的时候,返回的是jQuery.prototype.init对象,很多人就会不明白,init明明是jQuery.fn的方法啊,实际上这里不是方法,而是init的构造函数,因为js的prototype对象可以实现继承,加上js的对象只是引用不会是拷贝,new jQuery,new jQuery.fn和new jQuery.fn.init的子对象是一样的,只是有没有执行到init的不同. 当我们使用选择器的时候$(selector,content),就会执行init(sel

  • jQuery原理系列-css选择器的简单实现

    jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和document.querySelectorAll直接查找元素,如果是做移动端开发的,使用jQuery的必要性大大降低. 用js代码实现css选择器,必然是用正则表达式来识别字符串了,当然浏览器提供的原生api 效率更高,以下代码只做原理性展示,并未优先性能, 例如 1)查找id显然是用document.

  • jQuery选择器的工作原理和优化分析

    每次申明一个jQuery对象的时候,返回的是jQuery.prototype.init 对象,很多人就会不明白,init明明是jQuery.fn的方法啊,实际上这里不是方法,而是init的构造函数,因为js的prototype对象可 以实现继承,加上js的对象只是引用不会是拷贝,new jQuery,new jQuery.fn和new jQuery.fn.init的子对象是一样的,只是有没有执行到init的不同,这里就不讲原因了,等下一篇再讲为什么会是这样. 当我们使用选择器的时候$(selec

  • 详解jquery选择器的原理

    详解jquery选择器的原理 html部分 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="js/minijquery.js"></script> </head> <body>

  • Jquery选择器 $实现原理

    但由于工作的原因,很久不曾做过网站项目了,也没有时间去好好研究Jquery的源码,这个疑问也一直没有得到解决了, 今天,空闲之余,打开Jquery的源码看看,才明天它实现的原理,原来在加入jquery的js这个文件时,实际上是执行了一个函数,在这个函数里己经初始化了$和JQuery变量, 实现这个功能源码如下(代码已删减和更改,并不影响说明实现原理): 复制代码 代码如下: (function() { var // Will speed up references to window, and

  • jQuery源码分析-04 选择器-Sizzle-工作原理分析

    作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 在分析Sizzle源码之前,先整理一下选择器的工作原理 先明确一些选择器中用到的名词,后边阅读时不会有歧义: 选择器表达式: "div > p" 块表达式: "div" "p" 并列选择器表达式: "div, p" 块分割器: Sizzle中的chunker正则,

  • jQuery源码中的chunker 正则过滤符分析

    jQuery源码中的chunker 正则过滤符分析

    复制代码 代码如下: var chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^[\]]*\]|['"][^'"]*['"]|[^[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g, 这是Jq中最长的一个正则了,也研究了很久,一直很懵懂,感觉还是通过调试,然后一步一步的分析值理解起来比较容易, 我尝试做成图形比较直观一点,以

  • jQuery源码分析-01总体架构分析

    1. 总体架构 1.1 自调用匿名函数 self-invoking anonymous function 打开jQuery源码,首先你会看到这样的代码结构: 复制代码 代码如下: (function( window, undefined ) { // jquery code })(window); 1. 这是一个自调用匿名函数.什么东东呢?在第一个括号内,创建一个匿名函数:第二个括号,立即执行 2. 为什么要创建这样一个"自调用匿名函数"呢? 通过定义一个匿名函数,创建了一个"

  • jQuery源码解读之addClass()方法分析

    本文较为详细的分析了jQuery源码解读之addClass()方法.分享给大家供大家参考.具体分析如下: 给jQuery原型对象扩展addClass功能,jQuery.fn就是jQuery.prototype 复制代码 代码如下: jQuery.fn.extend({ /* 可以看出这是一个函数名叫addClass的插件方法. */     addClass: function( value ) {         var classes, elem, cur, clazz, j, finalV

  • jQuery源码解读之hasClass()方法分析

    本文较为详细的分析了jQuery源码解读之hasClass()方法.分享给大家供大家参考.具体分析如下: 复制代码 代码如下: jQuery.fn.extend({     hasClass: function( selector ) { //将要检查的类名selector赋值给className, l为选择器选择的当前要检查的jQuery对象数组的长度.         var className = " " + selector + " ",          

  • jQuery源码解读之removeAttr()方法分析

    本文较为详细的分析了jQuery源码解读之removeAttr()方法.分享给大家供大家参考.具体分析如下: 扩展jQuery原型对象的方法: 复制代码 代码如下: jQuery.fn.extend({ //name,传入要DOM元素要移除的属性名.     removeAttr: function( name ) { //使用jQuery.fn对象,即jQuery原型对象的each方法遍历当前选择器选择的jQuery对象数组,并返回该jQuery对象以便链式调用.         return

  • jQuery源码分析-03构造jQuery对象-工具函数

    作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 读读写写,不对的地方请告诉我,多多交流共同进步,本章的的PDF等本章写完了发布. jQuery源码分析系列的目录请查看 http://nuysoft.iteye.com/blog/1177451,想系统的好好写写,目前还是从我感兴趣的部分开始,如果大家有对哪个模块感兴趣的,建议优先分析的,可以告诉我,一起学习. 3.4 其他静态工具函数

  • jQuery源码分析之jQuery.fn.each与jQuery.each用法

    本文实例讲述了jQuery源码分析之jQuery.fn.each与jQuery.each用法.分享给大家供大家参考.具体分析如下: 先上例子,下面代码的作用是:对每个选中的div元素,都给它们添加一个red类 复制代码 代码如下: $('div').each(function(index, elem){       $(this).addClass('red'); } }); 上面用的的.each,即jQuery.fn.each,其内部是通过jQuery.each实现的 复制代码 代码如下: j

  • jQuery源码解读之removeClass()方法分析

    本文较为详细的分析了jQuery源码解读之removeClass()方法.分享给大家供大家参考.具体分析如下: removeClass()方法和addClass()差别不大.这就来看看: 复制代码 代码如下: jQuery.fn.extend({     removeClass: function( value ) {         var classes, elem, cur, clazz, j, finalValue,             i = 0,             len

  • jQuery源码分析之Callbacks详解

    代码的本质突出顺序.有序这一概念,尤其在javascript--毕竟javascript是单线程引擎. javascript拥有函数式编程的特性,而又因为javascript单线程引擎,我们的函数总是需要有序的执行.优秀代码常常 把函数切割成各自的模块,然后在某一特定条件下执行,既然这些函数是有序的执行,那么我们为什么不编写一个统一管理的对象,来帮助我们管理这些函数--于是,Callbacks(回调函数)诞生. 什么是Callbacks javascript中充斥着函数编程,例如最简单的wind

随机推荐