JavaScipt 动画引擎

Posted 2020-08-27 黄银

队列操作

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动画队列处理的。

这里有一个hooks？

仔细分析下这个内部 queueHooks

_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]);
        })
    });
}

我们说了dequeue不仅是取出来还需要执行，在执行的时候把next与hooks传递给外部的回调，这就是js的逻辑上的很绕的地方，在内部可以传递一个引用出去，又能提供外部调用或者执行。

fn.call(elem, next, hooks)

因为传递了next，所以我们的代码可以参考右边代码，next内部仍然调用$.dequeue，这样可以接着执行队列中的下一个 callback，$.dequeue 里的 hooks 是当队列里所有的 callback 都执行完后(此时 startLength 为0)进行最后的一个清理工作。

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

钩子其实就是 jQuery.Callbacks 对象,可以实现一个收集器的功能，至于在什么情况下时候，之后动画中开始分析，所以队列的本质是利用 Array 的 push 和 shift 来完成先进先出(First In First Out)，但是这个方法的缺点也很明显，无法单独做一个独立的模块处理，因为它必须要跟 jQuery 对象吻合，而且对传递的数据只能是函数。