您好,欢迎访问一九零五行业门户网

jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析_jquery

近期看了一些网上关于sizzle的分析文章,就匹配次序往往就说使用了从右到左的逆向匹配法,但是具体如何并没有详细介绍,或者就像我之前的几篇文章一样,就代码一行一行做详细介绍,但缺乏整体概念,这里就jquery-1.10.2版本的sizzle的匹配逻辑(预编译结果)做一整体说明,这里就不谈过多的细节了。
sizzle的匹配过程采用的是以从右到左的逆向匹配法为基础的改进版本,因为html的搜索毕竟和文本匹配有差异,它有自己独特的一面,所以,需要针对html的搜索进行优化。在此先申明一点,下面所说的关系选择器是指w3c中的combinator选择器,因本人觉得用关系选择器这个名字要比其它更加贴近实际意义,故用此命名。
1、简单介绍一下sizzle编译执行的两个主要函数:
a) matcherfromtokens——针对一个块选择器生成执行函数,所谓块选择器就是不包含逗号分隔的选择器字符串。
b) matcherfromgroupmatchers——将不同的块选择器生成的最终执行函数,该函数还负责将最终结果过滤掉重复对象。
2、matcherfromtokens函数针对不同类型的选择器产生不同的执行函数。若包含伪类,则返回setmatcher,否则返回的是elementmatcher,代码通过鉴别matcher是否包含expando属性来区别setmatcher和elementmatcher:
a) 针对非伪类且非关系选择器,直接从左到右依次生成执行函数,各函数作为同一个matchers数组的不同元素存在。
b) 针对关系选择器,将会把之前生成的matchers压入一个新的matchers数组中。
c) 针对伪类选择器,将通过setmatcher函数生成一个执行函数,调用setmatcher时,依次传入6个参数,分别是prefilter, selector, matcher, postfilter, postfinder, postselector。
      prefilter是在执行setmatcher函数之前已生成的matchers数组经elementmatcher函数加工过的最终函数,elementmatcher(matchers)将返回一个从后向前依次执行每一个matchers元素函数的新函数;。
      selector是matchers对应的选择器字符串;
      matcher是伪类自身的匹配函数;
      postfilter是伪类之后,到第一个伪类或关系符之间的选择器字符串对应的匹配函数,它是嵌套调用matcherfromtokens函数的返回结果;
      postfinder是postfilter对应选择器之后的所有选择器生成的匹配函数,同样也是通过嵌套调用matcherfromtokens函数的返回结果;
      postselector是postfinder对应的选择器字符串。
d) 若选择器字符串中没有伪类,那么,将返回elementmatcher(matchers)生成的最终匹配函数。
从上面的介绍可以看出,生成的执行函数之间存在着嵌套关系,简单的讲就是setmatcher包含matchers,关系选择器匹配函数包含非伪类且非关系选择器匹配函数。
3、执行过程的介绍:
a) 执行块选择器的执行函数:
      针对elementmatcher,从外到里从后到前依次执行,即从最外层数组到最里层数组依次执行,同一个数组中,从最后一个元素到第一个元素依次执行。
      针对setmatcher,先依据prefilter和selector获得匹配结果;然后执行matcher函数获取匹配结果;之后,执行postfilter函数,最后,依据postfinder和postselector获取匹配结果。
c) 依次执行每个块选择器的执行函数后,过滤掉重复数据,并返回结果。
看了上述大致过程,再去看各方法的详细介绍应该比较容易理解了,当然在这里没有谈到一些细节,例如初始结果集(seed)的生成及由此带来的函数执行逻辑细节上的差异等。
其它类似信息

推荐信息