jQuery Deferred深度解析：源码剖析与示例

"jQuery的 Deferred 对象与 Promise 的源码解析" 在JavaScript的世界里，Promise对象是一种处理异步操作的方法，它使得复杂的异步代码能够以一种顺序的方式编写，避免了回调地狱的问题。jQuery在其1.5版本引入了 Deferred 对象，这在ES6的Promise出现之前，提供了一种类似的解决方案。本文将深入探讨jQuery的 Deferred 对象以及其与Promise的关联，特别是从1.8版本开始的实现。 一、jQuery Deferred 基础 1. **创建 Deferred 对象** `$.Deferred()` 用于创建一个Deferred对象，这个对象包含了处理异步操作的状态（pending、resolved或rejected）和相关的方法。 2. **解决状态（resolve/reject）** 当异步操作完成时，我们可以调用 `def.resolve(value)` 或 `def.reject(reason)` 来改变Deferred的状态。这会触发已注册的回调函数执行。 3. **链式调用** `then()` 方法允许我们在异步操作完成后添加回调，如上面的代码所示。在jQuery1.8及以后的版本，`then()` 返回一个新的Promise，这意味着可以进行进一步的链式调用。 4. **done() 和 fail()** `done()` 用于注册成功（resolve）时的回调，而 `fail()` 注册失败（reject）时的回调。在上面的代码中，由于done方法在then方法之后，因此它无法接收到then方法返回的新Promise的状态变化，所以打印出'undefined'。 二、jQuery Deferred 源码解析 jQuery的源码实现中，Deferred对象的核心在于状态管理和回调队列的维护。主要包含以下几个核心部分： 1. **tuples** 数组 这个数组定义了三种操作（resolve、reject、notify）及其对应的回调队列类型，每个元组由四个元素：动作名称、添加监听器的方法、监听器列表以及最终状态。 2. **state** 属性 用于记录当前的异步操作状态，初始值为 'pending'。 3. **promise** 对象 提供了访问 Deferred 对象状态和方法的接口，包括 `state()`、`always()`、`then()` 等方法。 4. **resolveWith()** 和 **rejectWith()** 这两个方法用于改变状态并执行相应的回调，它们接收一个上下文参数，以便在回调函数中正确设置this。 5. **notifyWith()** 用于在异步操作过程中通知进度，调用对应的progress回调。 6. **Callbacks** 类 jQuery中的 `jQuery.Callbacks` 用于创建回调队列，它可以处理回调的添加、移除、触发等功能，并支持一次性执行（once memory）。 三、Promise与Deferred的关系 jQuery的 Deferred 对象实际上实现了 Promise A+ 规范的一个早期版本，它提供了Promise的基本功能。在1.8版本后，`then()` 方法返回的是一个受限的Promise对象，使得 Deferred 对象更符合Promise模式。 四、源码实现细节 jQuery的源码中，`jQuery.extend()` 方法用于合并对象，将 Deferred 的定义扩展到jQuery全局对象上。在内部， Deferred 实例通过 `new jQuery.Deferred([func])` 创建，其中 `func` 是可选的初始化函数，用于在创建实例时立即执行。 通过分析 Deferred 的源码，我们可以理解其如何管理异步操作的状态，如何存储回调函数，并在状态改变时触发回调。这对于我们理解和优化基于jQuery的异步代码非常有帮助，同时也为理解ES6的Promise打下基础。