YUI3 css 选择器实现分析

当然，现代的库都判断了浏览器是否实现了 w3c selector-api ，如果没有才采用下面的方法，目前只有ie系列会执行了。

以前分析过 extjs 的css 选择器实现，也粗略看过 jquery的css 选择器实现，这次又看了 yui3的选择器实现，发现每种实现都不同，而yui3或许不是效率最高的一个，却是实现起来最简单的一个。

Extjs 与 Jquery

?

extjs ,jquery都是属于自顶向下的分析方法，不同之处在于jquery将复杂选择符分解为简单单元后直接开始查找，去重，而extjs则分为编译与执行两个阶段，编译期生成对应选择器的dom操作函数，执行器直接执行生成函数即可：

div span

jquery 每次都分析选择器字符串，如分解为为["div","span"],然后再找到页面所有 div，再对这些div的所有子孙span进行合并去重得到最终结果。

extjs 则只有在第一次分析选择符字符串，生成了下列命令组成的函数：

?

每个结构的tests即为当前的过滤条件，而combinator即为通过当前过滤条件后的下一个将要检测的节点。注意direct属性，若direct为true，则表示失败后，结束，而direct为false，则表述还可以继续循着这个方向检测，如
" " direct为false，则父节点检测失败后，可以继续检测祖父节点。如 div span， 假设dom树中 span的父节点为 td，则如果td的父节点为div也是可以的。而 ">" direct就为true了，表示父节点不通过，这个节点就被过滤掉了。

选择过滤阶段：

分析出简单选择符后就简单了，Y.Selector._bruteQuery函数：取出最后一个简单选择符的对应文档元素 ，这步可以利用 id，tag，以及class（支持getElementsByClassName）。

剩下的就是单纯过滤了：
?
Y.Selector._filterNodes函数：
?
对选择阶段选出的所有元素，按简单选择符从后往前根据combinator定方位来变换检测节点，以及根据tests检测是否符合简单选择符，若一直到第1个简单选择符都符合，则当前节点保留，否则就过滤掉了。


?
?
?
?
?
?