第9章 jQuery高级进阶-【千锋教育】Jquery从入门到实战

第9章 jQuery高级进阶 函数队列 回调对象 模板引擎 QUnit单元测试 函数队列 回调对象 ☞点击查看本小节知识架构 模板引擎 ☞点击查看本小节知识架构 ☞点击查看本小节知识架构 9.2 9.3 9.1 QUnit单元测试 ☞点击查看本小节知识架构 9.4 学习目标 了解 理解 掌握 了解jQuery模板引擎 1 2 理解黑白盒测试 3 掌握队列及回调对象的使用方法 销售额 掌握知识 理解知识 熟悉知识 3.333333 3.333333 3.333333 jQuery提供了很多跟内部实现紧密相关的方法，这些方法不一定很常用，但是对于理解jQuery内部的实现原理以及优化复杂功能都是非常有意义的。 除了jQuery本身的使用外，还要对jQuery所涉及的一些周边生态有所了解，如模板引擎、单元测试等操作。这些操作可以帮助开发出更加强大、稳定的应用。 9.1 函数队列 9.1.1 queue()方法、dequeue()方法 返回目录 9.1.2 异步队列 9.1 函数队列 队列是一种常见的数据操作模式，分为入队与出队两个过程。就像排队购物一样，新来的用户需要排到队列的最后，队列的第一个用户购买结束后，才可以进行第二个用户的操作。所以说队列采用一种先进先出的数据操作方式。 jQuery中也有类似的操作，queue()方法为入队，dequeue()方法为出队，只不过它们操作的并不是用户，而是函数，所以在jQuery中称之为函数队列。利用jQuery函数队列，可以让函数按照顺序去执行，包括异步函数。 jQuery中函数队列分为两种写法，即工具写法和实例写法。 $.queue()和$.dequeue() $.queue()、$.dequeue()这两个工具方法分别表示入队与出队操作。$.queue()有三个参数，一参表示当前元素，二参表示队列名，三参表示入队函数。$.dequeue()有两个参数，一参表示当前元素，二参表示队列名。语法为： 9.1.1 queue()、dequeue()方法 9.1 函数队列 先来看入队的操作，首先创建一个名为qf的队列，并挂载到document对象下，然后再准备三个函数，分别进行入队操作，代码如下所示。 9.1.1 queue()、dequeue()方法 9.1 函数队列 qf队列的结构如图所示。 9.1.1 queue()、dequeue()方法 9.1 函数队列 虽然函数已经入队，但是页面并没有调用函数，因为只有调用出队方法，才能执行函数，并且调用一次出队方法，只会执行集合中的第一项，再次调用一次出队方法，才会执行集合中的第二项。 运行以上代码，结果如图所示。 9.1.1 queue()、dequeue()方法 9.1 函数队列 queue()和dequeue() queue()、dequeue()这两个为实例方法，也是表示入队与出队操作，写法和参数与工具方法类似。语法为： 9.1.1 queue()、dequeue()方法 9.1 函数队列 演示代码如下所示。 在以上的代码中可以看出queue()、dequeue()这两个实例方法的操作与工具方法也是完全相同的，所以在平时使用的时候，两种写法都是可行的。 9.1.2 异步队列 9.1 函数队列 函数队列主要的应用体现在异步操作中，尤其是内部实现中，如jQuery中的animate()动画方法就是利用函数队列来实现的，例如，添加一个宽300像素，高300像素的块，并向右浮动300像素的，代码如下所示。 9.1.2 异步队列 9.1 函数队列 理解了动画中的队列操作，就可以在调用中间添加一个入队操作，但不调用出队操作，此时动画会在执行完当前添加的操作后暂停执行后续的运动，等待出队操作，代码如下所示。 这里的运动数值会映射到队列的数组项中，在动画执行的时候程序会自动调用$.dequeue()进行出队操作，jQuery会给动画默认添加队列名fx。如图所示。 9.1.2 异步队列 9.1 函数队列 只有调用了出队方法，才可以继续向后执行，在以上的代码中添加dequeue()方法完成出队调用，代码如下所示。 运行以上代码，可以发现先前的蓝色背景的高度增加至300像素，然后向右浮动300像素的距离，如图所示。 9.1.2 异步队列 9.1 函数队列 利用这样一个特点，可以模拟出delay()方法的实现，其实jQuery内部的delay()方法就是利用函数队列来实现的，代码如下所示。 9.2 回调对象 9.2.1 基本方法 返回目录 9.2.2 应用场景 9.2.3 四大参数 9.2.4 延迟对象 9.2 回调对象 一个多用途的回调列表对象，提供了强大的回调函数列表管理功能。回调对象可以对函数进行