“松散耦合”、“颗粒度”是相对于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,
tmp=null;
for(var i=0,l=p.length;i<l;i++){
(tmp=query(tagName,[p[i]])) && (returnEl[index++]=tmp[0]);
}
return returnEl;
});
///////////////////////////////////////////////////////////
query.config.addSelector(":l",function(q,p){
var tagName = q.split(":l")[0],
returnEl = [],
index=0,
tmp=null;
for(var i=0,l=p.length;i<l;i++){
(tmp=query(tagName,[p[i]])) && (returnEl[index++]=tmp[tmp.length-1]);
}
return returnEl;
});
[/javascript]
通过这样的方式,使得core核心代码尽可能的小,可扩展性强,同时也提供给使用者更多的编码空间,了解javascript这门语言的核心知识。目前经过压缩过后的query2-min.js和未压缩的query2.js提供浏览。并附带实例:《点点看呗》
扯谈完毕,欢迎拍砖~
代码很精短, 很赞. 层次比较清晰.
按照西红柿一贯的习惯,效率应该是没问题的.呵呵.
给你这么一说,立马重新看代码,修改了实现细节,哈哈
效率上在IE6下测试,跟jQuery差不多。
引用: 更加DIY的selector查询DOM | 西红柿青炒番茄