JavaScipt 动画引擎

标签：cal   线性表   它的   ajax   type   基础   err   anim   功能   

队列操作

jquery中有一个Queue队列的接口，这个模块没有单独拿出来作为一个章节是因为这个是内部专门为动画服务的，Queue队列如同data数据缓存与Deferred异步模型一样，都是jQuery库的内部实现的基础设施

Queue队列

队列是一种特殊的线性表，只允许在表的前端（队头）进行删除操作（出队），在表的后端（队尾）进行出入操作（入队），队列的特点是先进先出，最先插入的元素最先被删除。

为什么要引入队列

var a = 1;

setTimeout(function(){

　　a=2;

},0)

alert(a);

我们一直习惯于线性的编写代码逻辑，但是在JavaScript编程几乎总是伴随着异步操作：

setTImeout，css3Transition/Animation,ajax,dom的绘制，postmessage，web Database 等等，大量异步操作所带来的回调函数会把我们的算法分解，对于“异步+回调”的模式，怎么“拉平”异步操作使之跟同步一样，因为异步操作进行流程控制的时候无非避免的要嵌套大量的回调逻辑，所以就会出现 promises 约定了。

那么 jQuery 引入队列其实从一个角度上可以认为：允许一系列函数被异步地调用而不会阻塞程序。

看一个代码段：

$("#Aaron").slideUp().fadeIn()

这是 jQuery 的一组动画链式序列，它的内部其实就是一组队列 Queue，所以队列和 Deferred 地位类似，是一个内部使用的基础设施。

• 当 slideUp 运行时，fadeIn 被放到 fx 队列中
• 当 slideUp 完成后，从队列中被取出运行

Queue 函数允许直接操作这个链式调用的行为，同时 Queue 可以指定队列名称获得其他能力而不局限于 fx 队列。

jQuery 提供了 2 组队列操作的 API：

jQuery.queue/dequeue
jQuery.fn.queue/dequeue

但是不同与普通队列定义的是：

• jQuery.queue 和 jQuery.fn.queue 不仅执行出队操作返回队头元素，还会自动执行返回的队头元素
• fn 是扩展在原型上的高级API是提供给实例使用的
• .queue/.dequeue 其内部是调用的 .queue，.dequeue 静态的底层方法实现入列与出列

queue与dequeue

$.queue：显示或操作匹配的元素上已经执行的函数队列这个方法有两个作用，它既是setter，又是getter，第一个参数elem是DOM元素，第二个参数type是字符串，第三个参数data可以是function或数组。

var body  = $(‘body‘);

function cb1(){alert(1)}

function cb2(){alert(2)}

//set 第三个参数是函数

$.queue(body,‘aa‘,cb1);

$.queue(body,‘aa‘cb2)；

//get

$.queue(body,‘aa‘);

这个方法有点类型get有点类似队列的push操作，jQuery的方法的接口重载是非常严重的，经常同一个接口既是set也是get，不管符不符合基本原则，但是它却很实用，无非就是把数据给缓存起来，为什么载体是一个jQuery对象，因为保存数据的手段是通过data数据缓存实现的

data 与 jQuery 对象之间是通过 uuid 建立了一个无耦合的映射关系，具体可以翻阅之前的关于“数据缓存”，源码有一个默认处理 type = (type || "fx") + "queue" 可见是专职供fx动画队列处理的。

_queueHooks: function(elem, type) {
    var key = type + "queueHooks";
    return data_priv.get(elem, key) || data_priv.access(elem, key, {
        empty: jQuery.Callbacks("once memory").add(function() {
            data_priv.remove(elem, [type + "queue", key]);
        })
    });
}

fn.call(elem, next, hooks)

if ( !startLength && hooks ) {
    hooks.empty.fire();
}

JavaScipt 动画引擎

标签：cal   线性表   它的   ajax   type   基础   err   anim   功能   

原文地址：http://www.cnblogs.com/huangyin1213/p/6270421.html