jQuery源码分析之Callbacks详解

本文将带您深入了解Callbacks（回调函数）的概念及其在编程中的应用。作为javascript编程的重要概念之一，Callbacks不仅帮助我们管理函数，更在异步编程中发挥着至关重要的作用。接下来，让我们一起什么是Callbacks、它的模型、基本模块实现以及其他相关功能。

在javascript中，由于函数式编程的特性以及单线程引擎的特性，函数的执行需要有序进行。为了管理这些函数，我们经常会将函数切割成各自的模块，并在特定条件下执行。这时，Callbacks（回调函数）就应运而生，帮助我们管理这些函数的有序执行。

什么是Callbacks？

在javascript中，我们经常遇到需要按顺序执行的函数。比如，在window.onload事件中，我们需要按顺序执行多个函数。回调函数就是将这些函数统一整理，按照一定的顺序执行。它的初衷是为了让代码更加整洁、有序。除了按顺序执行函数外，回调函数还能做什么呢？

Callbacks模型

Callbacks的核心是控制函数的有序执行。在javascript单线程引擎中，代码会被有序地压入一个队列中，然后逐个执行。回调函数正是迎合了这种单线程引擎的特性。在jQuery源码中，Callbacks不仅提供了一组函数的基本管理，还为Deferred（异步队列）提供了基础，服务于Queue（同步队列）。那么，我们如何来实现一个基本的Callbacks模型呢？

需要一个容器来存储函数，这个容器可以是数组。我们可以把每一个函数压入数组中，需要执行的时候，再循环数组项依次执行。但这个简单的模型还需要一个更加完善的工作模型。这个Callbacks应该具备强大的功能，不仅仅是压入函数然后执行那么简单。它需要提供良好的执行模型，确保函数的稳定执行。

其中，一个重要的特性是“once”。当Callbacks对象中的所有函数只执行一次后，就会被释放掉。这为使用Callbacks对象的用户提供了一个稳定有效的方案，确保函数只执行一次，之后不再执行，从而稳定了函数的线程。这样的设计对于处理异步任务非常有帮助，比如Ajax请求或setTimeout等。

基本模块实现

在实现Callbacks时，我们需要考虑如何管理这些回调函数、如何确保它们的有序执行、如何处理异步任务等问题。我们可以将Callbacks划分为几个基本模块来实现：容器模块、执行模块、管理模块等。每个模块都有其特定的功能，共同协作实现完整的Callbacks功能。

源码和源码下载

如果您想深入了解Callbacks的详细实现，可以参考一些开源项目的源码。通过学习和分析这些源码，您可以更好地理解Callbacks的实现原理、掌握其应用技巧。相关的源码和下载链接可以在文章或相关教程中找到。

在编程世界中，有一个非常有趣的自动执行模型，它涉及一种特殊的机制——Callbacks（回调）。在这个模型中，某些函数依赖于上一层函数的执行结果。例如，函数b的运作依赖于函数a的完成。针对这种情况，我们推出了这款自动执行模型。

当你首次启用这个Callbacks机制并添加函数后，每次新函数的加入都会自动触发已存在的函数执行，并将给定的参数数据传递过去。这一设计巧妙地消除了因依赖关系而产生的多次触发需求。这使得函数之间的依赖关系更加流畅，极大地简化了编程流程。

once & auto机制：为了让这个模型更加强大，我们引入了once和auto两种工作模式。在once模式下，当你添加新的函数到Callbacks中时，过去已经执行过的函数将不再重复执行。而auto模式则继续保持每次添加新函数时都会触发所有已存在的函数。这种灵活的切换模式使得我们的模型更加适应各种编程需求。

API接口介绍：

add(function)：此功能允许你轻松地将一个或多个函数添加到Callbacks对象中。即使你只是好奇地想要Callbacks而不打算添加任何函数，我们的系统也会包容你的好奇心，不会因此抛出异常。

remove(function)：既然有添加功能，我们也为你提供了移除功能。你可以移除Callbacks中的某个特定函数。我们理解你可能会对过去的行为有所反悔，因此始终欢迎你随时做出调整。

has(function)：通过这个功能，你可以快速判断某个函数是否存在于Callbacks中。即使你因忙碌而无法记住所有细节，我们仍然会为你提供明确的答案。

empty()：如果你认为这些函数对你已失去价值并希望清空Callbacks，我们可以满足你的需求。我们知道内存管理很重要，因此会妥善处理你的请求。

disable()：为了与现有代码兼容，我们提供了牺牲部分功能的选项——禁用Callbacks。一旦禁用，这个Callbacks将彻底失效，如同从未存在过一般。

disabled()：通过这个功能，你可以确认这个Callbacks是否已被禁用。如果你仍不确定其状态，这个功能将为你提供明确的答案。

lock(boolean)：为了确保Callbacks的稳定运行，我们提供了锁定功能。你可以通过传递一个Boolean值来决定是否锁定这个对象。无参数调用时，该功能将返回当前锁定状态。

fire(data)：最终的目的——执行Callbacks中的函数。所有参数将作为这些函数的输入参数进行传递。

fireWith(context,data)：与fire()相比，fireWith()提供了更多的自由度。它允许你指定函数的执行上下文，使得编程更加灵活多变。

fired()：这个功能记录了过去是否执行过该Callbacks。即使你忘记了过去的操作，我们仍然会为你提供准确的答案，确认其执行状态。

模块基础实现：Callbacks的简易构建

在编程的世界里，我们经常需要执行一系列连续的回调，这些回调可能依赖于前一个回调的结果。今天，我们来一起实现一个简单的Callbacks模块，以帮助我们更好地管理这些回调函数。

让我们来看一下基本的代码结构：

代码片段如下：

(function (window, undefined) {

var Callbacks = function () {

// 通过闭包保护私有变量

var list = [], // 存放回调函数的列表

fired = false; // 是否执行过回调的标志位

// 返回Callbacks对象

return {

// 后续代码...

};

};

// 将Callbacks注册到window对象上，方便全局访问

window.Callbacks = Callbacks;

}(window));

这个简单的Callbacks模块提供了添加回调、触发回调、检查回调是否执行过以及禁用回调等功能。我们可以通过链式调用的方式，轻松管理我们的回调函数。接下来，让我们测试一下这个模块的实际效果。

测试代码片段如下：

var test = new Callbacks(); // 创建新的Callbacks实例

test.add(function (value) { console.log('函数1，value是' + value); }); // 添加第一个回调函数

test.add(function (value) { console.log('函数2，value是' + value); }); // 添加第二个回调函数

test.fire('这是函数1和函数2的值'); // 触发回调，并传递参数

console.log('查看函数是否执行过' + test.fired()); // 检查回调是否执行过

test.disable(); // 禁用这个Callbacks实例

console.log('查看函数是否被废弃' + test.disabled()); // 检查Callbacks是否已被禁用

test.add(function () { console.log('添加第三个函数，这个函数不应该被执行'); }); // 添加第三个回调函数（理论上不会被执行）

test.fire(); // 再次触发回调，此时第三个函数不应被执行

现在，打开浏览器的控制台，我们可以清晰地看到运行结果符合预期。这个简单的Callbacks模块帮助我们实现了对回调的精细控制，让我们的代码更加整洁、易于管理。在实际项目中，我们可以根据需求对其进行扩展和优化，以满足更复杂的需求。once与auto（memory）模型在Callbacks中的实现

首先是once模式。这个模式的核心思想是：让回调函数列表中的函数只执行一次。这意味着一旦函数被触发并执行，它将不再参与后续的触发过程。这是如何实现的呢？我们可以通过一个全局变量来记录是否已经执行过。当fireWith()方法被调用时，我们检查这个全局变量。如果已经被执行过，我们就清空回调函数列表。代码如下：

```javascript

(function (window, undefined) {

var Callbacks = function (once) {

// 通过闭包保护这些私有变量

var list = [], // 回调函数列表

fired = false; // 是否执行过

return {

//...省略部分代码

fireWith: function (context, data) {

// 触发回调函数，并指定上下文

if (!fired && list) { // 确保只执行一次

fired = true; // 设置已执行标志位

for (var i = 0, len = list.length; i < len; i++) {

// 当Callbacks中某一个函数返回false的时候，停止Callbacks后续的执行

if (list[i].apply(context, data) === false) break;

}

}

//...省略部分代码

}, //其他方法的代码可以根据需求自行补充完整。这样我们的Callbacks对象就完成了构建。 if (once) list = undefined; // 如果配置了once模式，清空列表以阻止后续触发。这是once模式的核心实现。 return this;

}; // 返回闭包的Callbacks对象，使其可以在外部被调用和配置。 接下来我们可以注册这个对象到全局的window对象中以便使用。 接下来我们将这个对象注册到window对象中，这样就可以在任何地方使用这个对象了。 （省略注册到window的代码部分）现在我们已经完成了once模式的实现，接下来我们来一下auto（memory）模式。 这是一个很有趣的模式，它的作用是当第一次调用fire()方法后，后续通过add()方法添加的函数会自动被执行。这种模式在某些情况下非常有用，比如临时添加一个新的回调函数并且希望它立即执行。实现起来就是在add()的时候判断是否是auto模式，如果是则执行这个函数。但是要注意，只有在第一次fire()之后才自动执行，没有fire()过的Callbacks不应该被自动执行。，每次自动执行后还需要把一次使用的参数传递给这个自动执行的函数确保数据正确传递以保持代码的正确性下面我们来简单实现一下这个模式。假设我们已经完成了once模式的实现并且有了fireWith()和add()这两个方法（省略其他方法）。auto模式的实现就是在add()方法中添加判断逻辑在add()方法中我们可以增加一个参数来指定是否开启auto模式如果没有指定则默认为false表示不开启然后在添加函数到列表前先判断当前是否处于auto模式如果是则立即执行这个函数并将参数传递给它这样就可以实现auto模式了需要注意的是为了保证正确性我们需要确保只有在第一次fire()之后才自动执行后续的add()操作并不会触发自动执行同时每次自动执行后需要将参数传递以保持数据的正确性通过这种方式我们可以方便地实现once和auto两种模式为代码的可维护性和可读性提供了很好的支持在实际开发中可以根据需求选择使用哪种模式以提高开发效率和代码质量总的来说这两种模式为我们提供了强大的工具来处理异步操作中的回调函数它们的核心思想都是为了提高代码的灵活性和可维护性在实际使用中可以根据需求选择使用哪种模式以达到最佳的效果同时需要注意在使用过程中保持代码的清晰和简洁以确保代码的正确性和可读性希望以上内容能帮助你更好地理解once和auto两种模式在Callbacks中的实现并能在实际开发中加以应用"}`once与auto（memory）模型在Callbacks中的实现详解`

once模式：

```javascript

(function (window, undefined) {

var Callbacks = function (once) {

var list = [], // 回调函数列表

executed = false; // 是否已执行的标志位

return {

// ...省略其他方法和属性...

fireWith: function (context, data) {

```javascript

(function (window, undefined) {

// 创建一个名为Callbacks的函数，它拥有独特的执行模式与记忆功能

var Callbacks = function (mode) {

var list = [], // 存储回调函数的列表

lastData = null, // 保存上一次执行的参数数据

fired = false; // 记录是否已经执行过回调函数

return {

add: function (fn) { // 添加回调函数到列表

if (list) {

list.push(fn);

// 如果设置为自动执行模式，则立即触发回调函数，并将上下文传递给回调函数

if (mode === 'auto') {

this.fireWith(window, lastData);

}

}

return this;

},

fireWith: function (context, data) { // 使用指定的上下文和数据触发回调函数列表中的函数

if (list) {

lastData = data; // 记录这次使用的参数数据，作为下一次执行的参考

fired = true; // 标记已触发过回调函数

for (var i = 0, len = list.length; i < len; i++) {

if (list[i].apply(context, data) === false) { // 执行回调函数，并检查返回值，如果返回false则中断循环

break;

}

}

}

// 如果设置为一次性执行模式，清空列表准备下一次添加函数

if (mode === 'once' && fired) {

list = [];

}

return this; // 保持链式调用的能力

} // 其他代码部分省略...

}; // 返回包含回调函数的对象，拥有添加和触发函数的功能

}; // Callbacks函数定义结束

// 将Callbacks注册到全局对象window下，方便其他代码调用和使用

window.Callbacks = Callbacks;

}(window)); // 自执行函数结束，将window对象作为参数传入，使得代码可以在任何环境下运行。

```

当我们深入研究狼蚁网站的SEO优化代码时，会发现其非jQuery版本的实现思路巧妙地借鉴了jQuery的代码设计。尽管这不是原始的jQuery源码，但它同样展现出了强大的功能和吸引力。

这段代码采用了一种独特的模式，通过闭包将Callbacks对象封装在函数中，使得其在全局范围内可访问。该代码的主体部分是一个名为Callbacks的函数，它接收一个名为auto的参数。在这个函数内部，我们看到了一些重要的变量，如list、fired和memory。其中，memory的引入是非常关键的，它为回调函数的自动执行模式提供了可能。

核心的函数是coreFire，它负责触发回调函数。当list存在时，该函数会检查每个回调函数并依次执行。如果是自动执行模式（auto为true），那么coreFire会在添加回调函数时立即触发，并记录参数到memory中。这一设计使得回调函数的执行变得灵活且高效。

在代码中，我们看到了对jQuery的一种借鉴，即fireWith()函数的实现。在jQuery中，fireWith()用于在特定的上下文环境中触发回调函数，并传递额外的参数。在狼蚁网站的代码中，fireWith()被重新设计，将原本应该执行的逻辑抽离出来，形成了coreFire()函数。在fireWith()中，它将上下文和参数组合成一个数组，然后调用coreFire()来执行回调函数。这种设计不仅修复了丢失Context的问题，还使得代码更加清晰和易于理解。

在add()的舞台上，jQuery并未急于给变量auto（代表内存）赋予初始值。相反，它在coreFire()的舞台上巧妙地为auto（内存）注入了活力。这样，只有在第一次fire()的烈火燃烧后，自动执行的模式才会被激活。

如你所知，coreFire()接纳的参数其实是一个蕴藏丰富的数组。它的第一个元素是上下文，而第二个元素则是外界传递进来的参数。这个数组被赋予了auto（记忆一次传递的参数）的使命。这真是一石二鸟的神来之笔，让人不得不为之点赞。我之所以称之为auto，是因为它的本质就是一个自动执行的模型，同时还巧妙地把一次fire()的参数保存了下来。而jQuery将其命名为memory，也许也是其作者对这神奇之处的赞叹。

至于once和auto，它们就像是两个紧密相关的代码片段，相互融合。在coreFire()的运作中，如果是auto模式，那么就将list重置为一个全新的数组，否则就将其设置为undefined。

这是一份源码的解读，这份代码仿照了jQuery的精髓，融入了许多公共函数的元素，形成了一个完整的代码体系，可以直接引用并运行。

让我们深入其内部：

(function (window, undefined) {

//这是一个神秘的回调函数工具对象，一旦它的工作完成，就会清空其内部的数组。

//它提供了一组普通的API，但其工作模式却独具特色。

//它拥有两种工作模式：once - 单次执行模型，每工作一次后就不再工作；auto - 自动执行模型，每当添加一个回调函数时，会自动执行现有的所有回调函数集合，并将本次的参数传递给所有的回调函数。

//工具函数

var isIndexOf = Array.prototypedexOf, //Es6的索引查找方法

toString = Object.prototype.toString, //缓存的转换方法

toSlice = Array.prototype.slice, //数组的切片方法

isFunction = (function () { //判定一个对象是否为Function

//ie下对DOM和BOM的识别有独特之处

try {

return /^\s\bfunction\b/.test("" + fn);

} catch (x) {

return false;

}

} : isFunction = function (fn) { return toString.call(fn) === '[object Function]'; });

each = function () { //循环遍历方法

//第一个参数是要循环的数组，第二个参数是每次循环执行的函数

if (arguments.length < 2 || !isFunction(arguments[1])) return;

var list = toSlice.call(arguments[0]), //将传入的数组进行切片处理

fn = arguments[1], //获取传入的函数

item; //循环中的每一项

while ((item = list.shift())) { //使用shift方法取出数组的第一个元素并删除它

//为什么这里使用call就可以运行，而apply却不行？这可能是关于JavaScript中的函数调用方式的奥秘所在。 } });

这个源码犹如一个精巧的钟表，每一个部分都有其独特的功用和魅力。仔细品味，你会发现其中蕴含了编程的无穷智慧和乐趣。关于`apply`方法的独特之处与它的第二个参数要求

在JavaScript的世界里，`apply`方法是一个强大且富有特色的函数成员方法。当我们谈论其第二个参数时，它的需求非常明确且严格。这个方法要求这个参数必须是一个数组对象，不能是类似数组的结构或者其它非数组对象。这与某些其他函数或方法的调用要求有所不同，比如`call`方法就没有这样的严格限制。

在JavaScript中，当我们使用`apply`方法时，我们必须确保传递给它的第二个参数是一个有效的数组。否则，如果不满足这个条件，将会引发一个TypeError错误。这是因为在JavaScript内部，`apply`方法需要处理数组中的每个元素，以便正确地执行函数调用。如果传递的不是一个数组，那么这种方法就无法正常工作。它必须严格地要求第二个参数必须是数组对象。

那么为什么要这么严格呢？这是因为`apply`方法的本质决定了它必须依赖于数组的结构来执行函数。它需要一个明确的、结构化的数据输入，以便知道如何正确地处理函数调用。这种要求确保了函数的稳定性和准确性。虽然在某些情况下，可能可以通过其他方式绕过这个限制（例如使用其它方法模拟数组的行为），但这样做可能会带来不确定性和潜在的风险。为了确保代码的健壮性和准确性，我们应该始终遵守这一规则。

在深层次的编程逻辑中，有这么一段代码，如同一个精巧的钟表，精细地运转着。这是一个关于`Callbacks`的构造器，它管理着一系列的回调函数，确保在适当的时候被触发。它拥有一种独特的工作方式，就像是在执行一场精心编排的舞蹈。

让我们了解一下这个`Callbacks`的核心组成部分。它是一个拥有多种状态的对象，每一个新建的`Callbacks`实例都有自己独立的回调列表(`list`)、锁定列表(_list)、执行状态(`fired`)等。这些组成部分共同协作，让回调函数能够按照预设的顺序执行。

现在，让我们聚焦于这个`fire`方法。它是触发回调函数的引擎，负责启动整个回调序列的执行。当数据传入时，它首先检查是否需要自动执行，然后标记已经触发过回调函数。接着，它遍历回调列表，执行每一个函数。如果某个函数返回了`false`，那么整个执行过程会被中断。当所有的函数都执行完毕后，它会检查是否有更多的回调函数等待执行。如果有，它会继续执行下一个函数；如果没有，它会根据配置决定是否清空回调列表或禁用这个`Callbacks`对象。

现在，让我们来看看这个方法的实际应用场景。假设你有一个需要异步加载数据的程序，你可以在数据加载完成后触发一个回调函数。这个回调函数可以调用`fire`方法，依次执行一系列的函数，比如更新界面、处理数据等。这种机制使得你的代码更加灵活和可维护，因为你可以轻松地添加或删除回调函数，而不需要改变代码的逻辑结构。

在JavaScript的世界里，回调是一个重要的概念。有时候我们需要执行一段代码，然后在这段代码完成后执行其他的代码，这就涉及到了回调。为此，我们有一个特殊的对象 Callbacks 来管理这些回调。它不仅能够帮助我们存储回调函数，还能帮助我们触发它们，甚至在特定的情况下移除它们。让我们深入了解这个强大的工具。

我们创建一个名为 Callbacks 的对象。这个对象拥有多种功能，包括添加回调、触发回调、移除回调等。它就像一个调度员，管理着一系列的回调函数。当某个事件发生时，它会知道应该执行哪个回调函数。它还具备一些其他功能，比如检查是否包含某个回调函数、清空回调列表、禁用回调等等。让我们来详细了解一下其中的一些功能。

添加回调非常简单。只需调用 Callbacks 对象的 add 方法即可。这个方法会将回调函数添加到列表中。如果当前没有执行任何回调函数并且设置为自动执行模式，那么它会立即执行这个新添加的回调函数。然后，我们可以使用 fire 方法来触发所有的回调函数。这个方法会将上下文和参数传递给每个回调函数。它还具备一个特殊的 fireWith 方法，可以在特定的上下文中触发回调函数。这对于处理异步操作非常有用。我们还可以移除一个回调函数。只需调用 remove 方法并传入要移除的回调函数即可。这个方法会在列表中查找并移除该回调函数。如果正在执行某个函数列表，那么它会相应地调整索引和长度。Callbacks 对象还具备一些其他功能，如检查是否包含一个回调函数、清空回调列表、禁用回调等等。这使得我们可以灵活地管理我们的回调函数。这个 Callbacks 对象就像一个强大的调度员，帮助我们管理复杂的异步操作。无论是在浏览器环境中还是在服务器端使用Node.js的环境中，都可以方便地利用这个工具来管理我们的代码逻辑。无需复杂操作或特殊配置即可轻松上手和使用。这就是我们今天要分享的全部内容了，希望大家能够喜欢并善用 Callbacks 这个强大的工具。对于进一步的了解和使用，您可以下载我们的代码并在GitHub上查看详细的使用方法和示例。

Cambrian呈现——文章的生动演绎与重新诠释

开篇，我们让Cambrian呈现的是那充满魅力的“body”。这个主体在文章中显得尤为关键，也是我们赋予生动和丰富性的焦点。如同一块待雕琢的宝石，我们将通过细致的笔触对其进行精细打磨，使其展现出独特的光彩。

内容的生动性是我们的追求。我们运用丰富的文体和细腻的笔触，将文章中的每一个细节都刻画得栩栩如生。无论是情感的高潮还是思考的，我们都力求将其展现得淋漓尽致，让读者在阅读的过程中产生共鸣。

最终呈现出的这篇文章，既保留了原文的精髓，又注入了新的生命力。每一个字、每一个句都经过精心的雕琢和打磨，旨在为读者带来一次美妙的阅读体验。让我们一同期待这个全新的文章世界，感受Cambrian呈现的独特魅力。