开发者社区> 问答> 正文

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

css也好jq也好?
怎么样的选择器是高效的?

展开
收起
a123456678 2016-03-26 11:03:14 1603 0
1 条回答
写回答
取消 提交回答
  • 首先,我要说没必要来实现选择器这种轮子,虽然我不反对造轮子,但选择器这种轮子已经非常成熟了,而且现代浏览器已经内置了选择器。

    不过如果你坚持还是要继续的话,我可以简单探讨下。顺便说一下,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,依此类推

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

    2019-07-17 19:15:47
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
Vue.js 在前端服务化上的探索与实践 立即下载
阿里文娱大前端技术实践 立即下载
前端代码是怎样智能生成的 立即下载