前端如何写出高效选择器？

首先，我要说没必要来实现选择器这种轮子，虽然我不反对造轮子，但选择器这种轮子已经非常成熟了，而且现代浏览器已经内置了选择器。

不过如果你坚持还是要继续的话，我可以简单探讨下。顺便说一下，jquery的选择器用的是sizzle，它以前用的是自己写的，不过后来大概也觉得这个轮子没啥意思。。。

第一步，解析
首先要把你的查询字符串解析成查询链，这个过程简单但是繁杂，因为除了常见的css选择器，还有各种伪类。我们就拿最简单的一个查询来举例子把，我把我们的选择器叫做X

X('#header .nav ul');
这段代码经过我们的解析后会变成类似这样的结构

[

{type: 'id', value: 'header'},
{type: 'class', value: 'nav'},
{type: 'tag', value: 'ul'}

]
OK，这样一个简单的查询链就出来了，理论上我们按照这个顺序一步一步就可以得到期望的结果了。

第二步，查询
注意，如果你没有用querySelector这个函数，那么基本上就是利用 getElementById, getElementsByName, getElementsByTagName, getElementsByClassName 这几个函数来实现了

我们可以把上面查询链的type给映射到具体的操作，类似

var handlers = {

'id' : function (el, value) {
    return el.getElementById(value);
},
...

};
最后，我们遍历这条查询链，根据每个节点的type来查询value，然后把每个节点结果作为下一个查询的el，依此类推

注意，以上只是做一个选择器的基本原理，实际情况要复杂的多