十七.jQuery源码解析之入口方法Sizzle(1)

函数Sizzle(selector,context,results,seed)用于查找与选择器表达式selector匹配的元素集合.该函数是选择器引擎的入口.
函数Sizzle执行的6个关键步骤如下:
1.解析选择器表达式,解析出块表达式和关系符.
2.如果存在位置伪类,则从左向右查找:
a.查找第一个块表达式匹配的元素集合,得到第一个上下文元素集合.
b.遍历剩余的块表达式和块间关系符,不断缩小上下文元素集合.
3.否则从右向左查找:
a.查找最后一个块表达式匹配的元素集合,得到候选集,映射集.
b.遍历剩余的块表达式和块间关系符,对映射集执行块间关系过滤.
4.根据映射集筛选候选集,将最终匹配的元素放入结果集.
5.如果存在并列选择器表达式,则递归Sizzle()查找匹配的元素集合,并合并,排序,去重.
6.最后返回结果集.

3967定义了sizzle.
selector:css选择器表达式.
context:上下文环境.
results:可选的数组或类数组,sizzle将把查找到的元素添加到其中.
seed:可选的元素集合.函数sizzle将从该元素集合中过滤出匹配选择器表达式的元素集合.

3968行:如果未传入参数results,则默认为空数组[].
3969行:如果未传入context,则默认为当前document对象.
3971行:备份上下文.因为如果参数selector是以#id开头的,可能会把上下文修正为#id所匹配的元素.这里备份的origContext用于存在并列选择器表达式的情况.
3973行:如果参数context不是元素,也不是document对象,则直接返回[];
3977行:如果参数selector是空字符串,或者不是字符串,则直接返回results.

m:用于存放正则chunker每次匹配选择器表达式selector的结果.

set:从右向左的查找方式中,变量set成为"候选集",最后一个块表达式匹配的元素集合,其他块表达式和块间关系符则会对候选集set经行过滤;对于从左向右的查找方式,变量set是当前块表达式匹配的元素集合,也是下一个块表达式的上下文.
checkSet:对于从右向左的查找方式,checkSet称为"映射集",其初始值是候选集set的副本,其他块表达式和块间关系符则会对映射集checkSet经行过滤,过滤时先根据块间关系将其中的元素替换为父元素,祖先元素或兄弟元素,然后把与块表达式不匹配的元素替换为false,最后根据映射集checkSet筛选候选集set;对于从右向左的查找方式,事实上在查找过程中并不涉及变量checkSet,只是在函数Sizzle()的最后为了统一筛选和合并匹配元素的代码,将变量checkSe与set指向了同一个数组.
extra:用于存储选择器表达式中第一个逗号之后的其他并列选择器表达式.如果存在并列选择器表达式,则会递归调用函数Sizzle()查找匹配元素集合,并执行合并,排序和去重操作.
ret:只在从右向左执行方式中用到,用于存放查找选择器Sizzle.find(expr,context,isXML)对最后一个块表达式的查找结果.
pop:只在从右向左的查找方式中用到,表示单个块表达式.
prune:只在从右向左的查找方式中用到,表示候选集set是否需要筛选,默认为true,表示需要筛选,如果选择器表达式中只有一个块表达式,则变量prune为false.
contextXML:表示上下文context是否是XML文档.
parts:存放了正则chunker从选择器表达式中提取的块表达式和块间关系符.
soFar:用于保存正则chunker每次从选择器表达式中提取了块表达式或块间关系符后的剩余部分,初始值为完整的选择器表达式.

3989~3990:正则chunker每次匹配选择器表达式的剩余部分之前,先通过匹配一个空字符来重置正则chunker的开始匹配位置,从而使得每次匹配时都会从头开始匹配.直接设置"chunker.lastIndex=0;"也能达到同样的效果.
3992~4001:如果正则chunker可以匹配选择器表达式的剩余部分,则将第三个分组(即经过当前匹配后的剩余部分)赋予变量soFar,下次do-while循环时继续匹配;通过这种方式也可以过滤掉一些垃圾字符(如空格);同时,将第一个分组中的块表达式或块间关系符插入数组parts中;此外,如果第二个分组不是空字符串,即遇到了逗号,表示接下来是一个并列选择器表达式,则将第三个分组保存在变量extra,然后结束循环.

十七.jQuery源码解析之入口方法Sizzle(1),布布扣,bubuko.com

时间: 2024-10-03 23:02:27

十七.jQuery源码解析之入口方法Sizzle(1)的相关文章

jQuery源码解析(架构与依赖模块)第一章 理解架构

1-1 jQuery设计理念 引用百科的介绍: jQuery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器.jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用).events.实现动画效果,并且方便地为网站提供AJAX交互.jQuery还有一个比较大的优势是,它

五.jQuery源码解析之jQuery.extend(),jQuery.fn.extend()

给jQuery做过扩展或者制作过jQuery插件的人这两个方法东西可能不陌生.jQuery.extend([deep],target,object1,,object2...[objectN]) jQuery.fn.extend([deep],target,object1,,object2...[objectN])这两个属性都是用于合并两个或多个对象的属性到target对象.deep是布尔值,表示是否进行深度合并,默认是false,不执行深度合并.通过这种方式可以在jQuery或jQuery.fn

四.jQuery源码解析之jQuery.fn.init()的参数解析

从return new jQuery.fn.init( selector, context, rootjQuery )中可以看出 参数selector和context是来自我们在调用jQuery方法时传过来的.那么selector和context都有哪些可能. 对于表格中的4~9行中的可能做具体分析. 如果selector是字符串,则首先检测是html代码还是#id. 126行的if语句:以"<"开头,以">"结尾,且长度>=3.则假设额这个是HT

二.jQuery源码解析之构建jQuery之构建函数jQuery的7种用法

一:$(selectorStr[,限制范围]),接受一个选择器(符合jQuery规范的字符串),返回一个jQuery对象;二:$(htmlStr[,文档对象]),$(html[,json对象])传入html字符串,创建一个新的dom元素 三:$(dom元素),$(dom元素集合)将dom元素转换成jQuery对象.四:$(自定义对象)封装普通对象为jQuery对象.五:$(回调函数)绑定ready事件监听函数,当Dom加载完成时执行.六:$(jQuery对象)接受一个jQuery对象,返回一个j

jquery源码解析:代码结构分析

本系列是针对jquery2.0.3版本进行的讲解.此版本不支持IE8及以下版本. (function(){ (21, 94)     定义了一些变量和函数,   jQuery = function(){}; (96,283)   给jQuery对象添加一些属性和方法(实例方法,通过$("div")这类的jQuery实例对象来调用) (285,347)   extend : jQuery的继承方法 (349,817)   jQuery.extend():扩展一些工具方法(静态方法,直接通

十五.jQuery源码解析之Sizzle总体结构.htm

Sizzle是一款纯javascript实现的css选择器引擎,它具有完全独立,无库依赖;小;易于扩展和兼容性好等特点. W3C Selectors API规范定义了方法querySelector()和querySelectorAll(),但是IE6,7不支持这两个方法. 在Sizzele内部,如果浏览器支持方法querySelectorAll(),则调用该方法查找元素,如果不支持,则模拟该方法的行为. Sizzle支持几乎所有的css3选择器,并且会按照文档位置返回结果. 上面截取的只是Siz

十六.jQuery源码解析之Sizzle设计思路.htm

为了便于后面的叙述,需要了解一些相关术语和约定. 并列选择器表达式:"div,p,a"====>div,p,a是并列的. 块表达式:"div>p"中的div和p就是两个块. 块表达式的类型:共8种.id,class,name,attr,tag,child,pos,pseudo(伪类表达式) 块间的关系符:共4种.">":父子关系,"+":紧挨着的兄弟关系,"~":后面的所有兄弟关系,&qu

十二.jQuery源码解析之.eq().first().last().slice()

eq(index):将集合中的索引为index的元素提取出来. first():返回集合中的第一个元素. .last():防护集合中的最后一个元素. .slice(start[,end]):返回集合中的给定区间段的元素. first()和last()调用eq(),eq()通过slice()实现,slice()通过 .pushStack()实现. 相关源码 285行:用法很奇特,通过一个"+"把可能为字符串的i转换成一个数值. 300~301:先借用数组方法slice()从当前jQuer

十一.jQuery源码解析之.pushStack()

pushStack()顾明思意,就是像桟中添加东西呗,现在看看他是如何添加东西的. 创建一个空的jQuery对象,然后把Dom元素集合放入这个jQuery对象中, 并保留对当前jQuery对象的引用. pushStack是核心方法之一,它为以下方法提供支持: jQuery对象遍历:.eq(),first(),.last(),.slice(),.map(); Dom查找,过滤:.find(),.not(),.filter(),.closest(),.add(),.andSelf(). Dom遍历: