js selector设计及实现（一）――实现思路 -- JavaScript -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> JavaScript --> js selector设计及实现（一）――实现思路

js selector设计及实现（一）――实现思路

浏览:1913次出处信息

前言

前阵子和伟大的JK同学学习了一下目前我们框架里新版本的selector，这里列的是第一版selector的代码思路。

后一版本调优性能，多了些函数，从性能上与各大框架的性能比还是有竞争力的。

说句实在话，虽然各大框架和库都实现了selector。但看他们的selector实现其他的人看上去无疑都是难看懂。

而google,baidu上query出的结果基本都是说使用方式的文章，基本没有类似针对selector设计和具体实现上的文章。

所以，决定将整个思路和实现写出来，一来是增加印象，二来是给目前想写的人以参考。

我是以我学习及写selector的角度及把我向JK学习思路和我自己的设计，代码写的思路写出来。

这篇文章我也想不到写了这么长。建议这么看比较好：不熟悉selector用户先去熟悉了休息会，再看此文；文中没有写详细的selector的具体内容，只是为了描述，大略的提了下；selector了解了之后再看看思路；顺序解析还是比较容易看懂的；后文中的js代码里，我做了详细的注释，结构也和文中提的代码结构一样，有兴趣的同学可以读下。我的blog没有代码高亮，所以看代码会有点累。>_<

OK，开始吧。

为什么有selector？

selector原来是用于CSS开发时方便样式与结构分离的策略。

而在如今做JS/DOM开发的时候，绝大部分的代码之一都是选择目标元素/集合。

在XML里有XPATH来实现该功能；同理的，在JS/DOM开发时自然出现了selector。

现在selector的火很大程度上除了需要感谢国家，还要感谢jquery。它如同当年Prototype带来了Ruby风格，一大批的前端开发人员都投入到jquery的怀抱。给了很多前端开发人员以快速上手，插件copy的方式来开发前端程序。

jquery是推进selector使用的催化剂。现在很多浏览器都支持了selector，但各实现都不尽相同，所以做一个适合自己的selector目前来看是有必要的。

selector简单实用，减少无技术含量的工作。

还可以重新约束一下前端的UI框架，在render接口不是耦合HTML结构，而是与CSS selector做为桥接

具体可以点这里可以看我之前写的一篇文章(降低HTML结构与脚本之间的强耦合)，这里不再多述。

selector的应用接口

selector提供给外部的接口应该尽量遵循标准。开放的接口应该包括：document|element.querySelector(str)document|element.querySelectorAll(str)举例说明：

Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)

var element = document.querySelector(selectors);

var matches = document.querySelectorAll("div.note, div.alert");

具体在代码里的表现形式

Dom.querySelector(strSelector, context);

Dom.querySelectorAll(strSelector, context);

selector及其类型

selector是一种选择DOM元素/集合的一种符号。它包括以下的类型：包括通配选择符――*类型选择符――如E { sRules } 属性选择符――它包含四种等式：E [ attr ] { sRules } 选择具有 attr 属性的 E

E [ attr = value ] { sRules } 选择具有 attr 属性且属性值等于 value 的 E

E [ attr ~= value ] { sRules } 选择具有 attr 属性且属性值为一用空格分隔的字词列表，其中一个等于 value 的 E 。这里的 value 不能包含空格

E [ attr |= value ] { sRules } 选择具有 attr 属性且属性值为一用连字符分隔的字词列表，由 value 开始的 E

包含选择符(祖先)――如E1 E2 { sRules } 选择所有被 E1 包含的 E2 。即 E1.contains(E2)==true 。子对象选择符――如E1 > E2 { sRules } 选择所有作为 E1 子对象的 E2 。 ID选择符――#ID { sRules } 以文档目录树(DOM)中作为对象的唯一标识符的 ID 作为选择符。类选择符――E.className { sRules } ，它是属性选择符的一种简写形式。其效果等同于E [ class ~= className ] 。伪类选择符――E : Pseudo-Classes { sRules } JS selector里取到的伪类有如下几种："first-child","last-child", "only-child","nth-child","nth-last-child","first-of-type","last-of-type",

"only-of-type","nth-of-type","nth-last-of-type","empty","parent",

"not","enabled","disabled","checked","contains"

伪对象选择符。E : Pseudo-Elements { sRules } 这在JS selector里可不实现（在DOM树里无法找到）总结归纳selector语法

要想写好selector，必然要熟悉selector的语法，功能。这也是重中之重。

观察selector的语法，将所有selector分为四类：标签元素――标签就不解释了，但需要注意的是如果没有标签元素，则为选择符里的通配符。例如这样的selector："div .link"表示，div后裔节点中所有节点里属性className为link的元素集。

选择符――包含“通配符、类型符、属性符。”（注：属性选择符包括了".link"这样的selector。也包括了"#id"这样的selector。）伪类――例如：last-child，first-child等伪类。关系符――包括：“祖先、儿子、相邻兄弟。”总结，任意一个selector由上面所述四类构成。

以下是描述selector规则，伪正则描述。

引用

(关系符{1}(标签元素{1})((?:属性选择符)*)(:伪类)?)+

细心些的人应该会提出这样的问题，如果给出这样的selector：document.querySelectorAll(".link") 应该怎么理解？

――这代表着document根元素下所有className为link的节点集合。可以等价为document.querySelectorAll(" .link")（注意：.link前有空格）

也就是说，如果传入的selector第一个字符不是关系符，那么我们默认会认为它以空格关系符开始

解析selector表达式与实现思路

从接口（需求）上分析，先暂不考虑效率问题的情况下，去考虑理论实现流程：1.从入口的参数进行解析，即document.querySelectorAll("div.note, div.alert")参数解析成格式化好的形式方便处理。2.循环解析出来的单个selector，将快捷选择符转换为标准选择符。如上所述，例如将#id属性选择转成[id='id']。3.用getElementsByTagName得到集合，再根据条件进行过滤。4.最后除重。将所有找到的元素集合concat连接，再除重过滤。这里顺便提一下，为什么要除重，例如：document.querySelectorAll("div a","div.alert a")，很明显，"div a"包含"div.alert a"，所谓除重就是求各子selector的并集。

6.之后可能会有针对不同的selector作优化或者作特殊处理。――例如nth-child、selector解析优化。有个简单印象之后再随之实践：

引用

假设selector传入为：Dom.querySelectorAll("div.panel div[className='shadow']");

假设HTML结构为:

Copy Code(拷贝代码)-Run HTML(运行代码)-Save Code(另存代码)

要找到这个节点