西红柿爱番茄

Feed Rss

文章标签 ‘querySelectorAll’

在上一篇文章中(谈谈松散耦合、颗粒度)提到的将javascript库或者框架更加向开发人员开放,DIY功能,尽量保持核心代码的精简和稳定,只开放接口,让开发人员根据特定的需求去DIY功能,而不是内定一整套方法集,供开发人员去使用。对此我例举了我写的query2.js为例子,这里就特别拿它出来说说。 query2中查询方式也是从左到右,这个是比较普通也容易实现的方式,有人说从右到左进行查询的话,效率会比较高,查询的复杂度较低。我想这就要开具体的selector了,如果是这样的“.test p”,那么从右到左的话复杂度就更高一些了,可能还得递归到document.body节点查询父元素的className是否等于test。所以双方面都有利有弊。 但是从左到右的查询方式还有一个比较苦恼的问题,就是“去重”(这是昨天跟瓶子吃饭的时候他提及到的问题),比如: [html] <div> <div> <p>Hello world</p> </div> </div> [/html] 这时候如果使用“div p”来查询p标签元素的时候,如果不去重,就会导致使用getElementsByTagName查询到两个p元素,如果是在查询结果后给p标签添加事件,那么问题就大了。所以再进行查询的时候,必须得去重。 query2加入的去重的功能,同时还支持querySelectorAll(注意:对于不符合CSS指定的selector,querySelectorAll会报错),它最大的功能,就是可以DIY属于自己的selector,可以根据自己的需求来指定selector,具体示例可以查看谈谈松散耦合、颗粒度中给出的代码例子。源码展示如下:

刚上班,首先是文档哥,之后就是无聊哥了,真杯具。但是杯具下就好了,人不杯具。消遣的最好方式就是练练脑,写代码,query就是杯具下的产物。先出土个雏形,有时间还成无聊哥了再来扩展下。 query根据CSS规则来查询DOM,提供了基础的CSS选择符: tag,.class,#id,[attr],tag[attr],tag[attr="value"]… 在测试跟jquery的查询速度比较的时候,再添加了对querySelectorAll(语法是:baseElement.querySelectorAll(selector),这里的baseElement其实是可以为除了文本节点和空节点之外的任何的DOM节点的,别以为只是document而已)的支持。编写的代码中加入了本人认为不错的编写方式,如果你对阅读代码有兴趣,那就看看吧,欢迎提出更好的方式(如果这里显得难看了,就自己下载来看:query.js):