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

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

设计思路:以"div.guo>p"为例.
1.从左向右:先查找"div.guo"匹配的元素集合,然后查找子元素中是"p"的元素.
2.从右向左:先查找"p"匹配的元素集合,然后检查其中每个元素的父元素是"div.guo"的元素.
无论是从哪种思路,都必须经过以下几个步骤.
1.首先要能正确的解析出div.guo>p中的div.guo,p,>;即解析出选择器中的表达式块和块间的关系符.这一步是必须的.,否则根本无法下手.
2.查找出各个表达式块的元素集合,即div.guo和p的两个模块集合.div.guo同时又分为div模块和.guo两个模块.
3.最后来处理各个模块的关系.即关系符">";
这一步中的从左到右和从右到左是截然不同的两种效果.
a.从左到右:找到div.guo匹配的元素集合的子元素集合,然后从中过滤出匹配"p"的子元素集合.
b.从右到左:检查每个匹配"p"的元素的父元素是否匹配"div.guo",只保留匹配的元素.
根据前面的分析思路,得出以下结论:
1.从左到右的总体思路是不断缩小上下文,即不断缩小查找范围.
2.从右到左的总体思路是先查找后过滤.
3.在从左到右的查找过程中,每次处理块间关系符时都需要处理未知数量的子元素或后代元素,而在从右向左的查找过程中,
处理块间关系符时只需要处理单个父元素或有限数量的祖先元素.因此,在大多数情况下,采用从右到左的查找方式效果要高于从左向右.
在了解了上面的分析后,在来看看Sizzle,他是一款从右向左查找的选择器引擎.
Sizzle提供了三个核心的接口:
1.chunker正则负责从选择器表达式中提取块表达式考核块间关系符.
2.Sizzle.find(expr,context,isXML)负责查找块表达式匹配的元素集合,方法Sizzle.filter(expr,set,inplace,not)负责用块表达式过滤元素集合;
3.对象Sizzle.selector.relative中的块间关系过滤函数根据块间关系符过滤元素集合.
函数Sizzle(selector,context,results,seed)将上面三个核心接口组织起来.

巴特西

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

最新文章

热门文章