在上一篇文章中（谈谈松散耦合、颗粒度）提到的将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，具体示例可以查看谈谈松散耦合、颗粒度中给出的代码例子。源码展示如下：
“松散耦合”、“颗粒度”是相对于javascript库或者javascript框架来说的，它涉及的概念和包含的知识是很多的，而其中之一，就是说javascript库或者框架从整理来看是容易拆分，也容易自定义的组合，来实现特定需求的功能。之前有很多说法说YUI的编写方法才更接近于javascript的本质，虽然上手的门槛很高，但是对于一个真正的javascript程序员来说，反而更值得；而jQuery似乎另类了，改变了普通的编写javascript的编写方式，虽然说它封装的很好，“用最少的代码实现复杂的功能”，但是它的可读性就很差了，虽然门槛很低，毫无javascript基础的程序员在看了它的API文档之后都能够利用它写出很多丰富的效果。但是，作为程序员，这样下去行吗？ jQuery是毒药 —— 很多人都这么说。本人也举得，从一个程序员的成长来看，jQuery是弊大于利。我们更应该做的是学习它的原理和架构，而不是拿来用而已。 一个很经常会发生的问题：我只需要用到一个javascript库中的几个方法，却需要加载整个库的体积，而整个库封装的又十分复杂，拆分起来十分繁琐，怎么办？自己写呗…… 一个javascript库的本意虽然说是为了提高开发效率、解决浏览器的兼容性问题、统一开发规范以及解决安全隐患等等。但是在设计javascript库的时候，我们是不是应该多留多点空间给使用者去DIY它的具体的功能，让使用者多点接触到javascript的本质，以及非常容易的缩减库的体积呢？就从这几点出发，YUI3是比较符合“松散耦合”、“颗粒度”的原则的，虽然说jQuery可以通过fn方法来扩展，但都是基于它整个已经封装好的库来说的。但是YUI3也有它的缺点：学习成本高、整体体积庞大、可能一步小心在use方法里多加载几个文件，或者使用”*”，那么需要异步加载的js文件也是很多的、以及它内部组件之间的依赖关系也是比较复杂的。 为了说明我的想法，首先从我编写的query鸡查询函数（目前还没完善，先拿来做例子）开始说起，我的想法是：只在query里实现最基本的selector查询，比如ID、class、tag、属性，之后用户可以自定义selector添加到查询函数当中，来实现自己特定的查询需求，从这点出发，改写了之前所写的query代码（之前的query.js），目前它只集合了ID、class、tag、属性选择器（或者也可以干脆连这些使用者都可以重新定义自己的功能函数，自己来实现，DIY很爽~），其他的自定义选择器都可以自己DIY，并且编写它的实现方式（留给使用者更多的编写底层代码的空间，爱怎么实现就怎么实现，方法是多样的），比如：给selector添加“:first”和“:l”来实现CSS3中的:first-child和:last-child的功能： [javascript] //q:表示当前的selector，比如“div p:first”，就是div和p:first，使用split通过空格切分的单个selector //p:表示是上一级查询的结果，是数组类型的。 query.config.addSelector(":first",function(q,p){ var tagName = q.split(":first")[0], returnEl = [], index=0, … 了解更多
刚上班，首先是文档哥，之后就是无聊哥了，真杯具。但是杯具下就好了，人不杯具。消遣的最好方式就是练练脑，写代码，query就是杯具下的产物。先出土个雏形，有时间还成无聊哥了再来扩展下。 query根据CSS规则来查询DOM，提供了基础的CSS选择符： tag,.class,#id,[attr],tag[attr],tag[attr="value"]… 在测试跟jquery的查询速度比较的时候，再添加了对querySelectorAll（语法是：baseElement.querySelectorAll(selector)，这里的baseElement其实是可以为除了文本节点和空节点之外的任何的DOM节点的，别以为只是document而已）的支持。编写的代码中加入了本人认为不错的编写方式，如果你对阅读代码有兴趣，那就看看吧，欢迎提出更好的方式(如果这里显得难看了，就自己下载来看：query.js)：