回到正题，如jQuery般易用的api风格？那到底是什么样的风格呢？个人觉得比较重要的有两点，一是对dom操作的链式调用，并且都呈队列状态，不仅仅使代码的可读语义变得通俗易懂，而且省去了对同一dom元素的多个链式操作时的回调中嵌回调的方式，这是很重要的一点。
二是对元素的批量操作，这是建立在它强大的选择器上的。jq选择器很强大，这是人所众知的，就不多说了。而且肯定也不是一两天就能实现的了的，所以下面就对我所说的这两点谈谈我的看法。
基于它强大的选择器，jquery所有的dom操作都依赖于根据它选择器取到的一个数组，很多人喜欢把这叫做jq对象。那咱们暂时也先这样叫吧。然后所有的dom操作都是依赖于这个jq对象中每一个元素并发批量执行的。具体到每一个dom操作，大部分的都是呈链式回调的状态，也就是说在这个方法链里面，直接根据方法调用在链中的先后顺序就能知道他们执行的顺序。这种方法链并且串行的形式是它的一大特色。
以至于很多人喜欢用jquery，基本就看中它两点，选择器确实很强大，链式调用确实很方便很易用，代码逻辑瞬间变得简单。正因为他把很多的代码逻辑都放到自己内部去处理了，留给编码者考虑的问题就少了很多，所以一方面你觉得好用的同时，也就失去了一次锻炼编码逻辑的机会。因此我不建议初学者直接学习使用jquery或者其他的框架，因为他们会让你对js的理解越来越少。我的观点是所有的框架或者库都是拿来使用的，拿来提高开发效率和管理便利度的，而不是拿来学习的。（当然，研究源码的除外）。
那么，既然觉得jquery的api风格好用，那我们何尝不尝试一下构建这种类似的api风格呢？（声明：以下尝试都仅仅是提供一种思路，代码并不完善...）
复制代码 代码如下:
var get = function (ids) {
var d = document, a = -1;
this.elements = [];
if (typeof ids != 'string' && !!ids.length) {
for (var i=0; i<ids.length; i++) {
var id = ids[i], o;
o = typeof id == 'string' ? d.getElementById(id) : id;
this.elements.push(o);
}
} else {
while (typeof arguments[++a] == 'string') {
this.elements.push(d.getElementById(arguments[a]));
}
}
}
然后为它扩展一些操作dom的方法
复制代码 代码如下:
get.prototype = {
each : function () {},
animate : function () {}
}
当然，这种方式和jQuery看起来不太一样，但能理解就行，jquery可能是这个样子：
复制代码 代码如下:
jQuery = window.jQuery = window.$ = function( selector, context ) {
return new jQuery.fn.init( selector, context );
}
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {}
}
接下来对获取的队列进行批量操作，不可避免的就需要一个each的遍历方法。
复制代码 代码如下:
each : function (fn) {
for (var i=0; i<this.elements.length; i++) {
fn.call(this, this.elements[i])
}
return this;
},
each为get.prototype扩展出的方法，提供一个参数function，并且遍历dom列表，把function绑定到每一个元素上。然后让它返回get.prototype，因为prototype本身具有类似于“超类”的性质，所以凡是返回给prototype对象的方法都能继续调用prototype扩展出来到方法。
为了使这个尝试更有意义一点，接下来来做一个animate的函数吧。这个函数是jquery对dom操作很常用的一个方法，有了它，大部分的动画都变得那么简单和容易了。下面会是一个简单的实现：
复制代码 代码如下:
animate: function (config) {
if (!this.animQueue) this.animQueue = HR._animQueue = [];
var a = 0, time, tween, ease, callback;
while (arguments[++a]) {
if (typeof arguments[a] == 'number') time = arguments[a];
if (typeof arguments[a] == 'string') {
if (/^ease*/.test(arguments[a])) ease = arguments[a];
else tween = arguments[a];
}
if (HR.isFunction(arguments[a])) callback = arguments[a];
}
this.animQueue.push({
config: config,
time: time,
tween: tween,
ease: ease,
callback: callback
});
if (this.animQueue.length == 1) this.execute(this.animQueue);
return this;
},
光看这一段可能看不出什么端倪，是的，因为要像jquery一样做成串行的方法链，就需要一个临时队列来操作，要不然即使方法链形成了，但这些方法都是并行的，达不到我们想要的效果。所以上面一段代码主要是处理animate推入队列的一个逻辑，然后对参数arguments做了一些判断，以便在写参数的时候能更加随意，除了第一个参数和最后一个callback外，其余参数不用考虑位置和是否必填，以增强易用性。
核心的变换函数在execute上，
复制代码 代码如下: