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


Posted in Javascript onNovember 14, 2011

作者: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!

Javascript 相关文章推荐
Prototype Array对象 学习
Jul 19 Javascript
浅谈javascript 面向对象编程
Oct 28 Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
在vs2010中调试javascript代码方法
Feb 11 Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 Javascript
Openlayers绘制聚合标注
Sep 28 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 #Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 #Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 #Javascript
jQuery源码分析-01总体架构分析
Nov 14 #Javascript
js Form.elements[i]的使用实例
Nov 13 #Javascript
jquery中使用ajax获取远程页面信息
Nov 13 #Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 #Javascript
You might like
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
提高php编程效率技巧
2015/08/13 PHP
PHP钩子实现方法解析
2019/05/21 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
浅析javascript闭包 实例分析
2010/12/25 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
jQuery的框架介绍
2016/05/11 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
高三英语教学反思
2014/01/13 职场文书
员工培训邀请函
2014/02/02 职场文书
服务员态度差检讨书
2014/10/28 职场文书
语文教师求职信范文
2015/03/20 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
Python编程编写完善的命令行工具
2021/09/15 Python