JQuery中的回调对象

回调对象（Callbacks object）模块是JQuery中的一个很基础的模块，很多其他的模块（比如Deferred、Ajax等）都依赖于Callbacks模块的实现。本文主要描述回调对象的基本功能、具体实现，以及使用到的设计思想。

1. 基本功能

从jquery的 API 中可以了解到，Callbacks对象是JQuery自1.7以后提供的一个管理回调函数的工具，提供基本的增加、删除、调用和禁用回调函数的能力。

1.1 基本配置

Callbacks提供如下四个配置供开发者使用：

once 保证所有回调函数只能执行一次。 memory 记录上一次调用回调函数的参数值。如果在调用回调函数之后又通过add新回调函数，那么会立即使用memory记录的值调用新增的回调函数。 unique 保证每个回调函数只能被添加一次，即回调函数列表中每个函数都唯一。 stopOnFalse 如果一个回调函数返回false，则终止调用其他剩余会回调函数。

开发者可以通过以上配置的字符串组合（以空格分隔）初始化回调对象。

var callbacks = $.Callbacks('unique memory'); //回调函数列表中每个函数必须唯一，且要记录上一次调用的参数值 1.2 基本API

Callbacks提供如下API：

callbacks.add()
向回调函数列表中增加一个回调函数或回调函数集合。 callbacks.remove()
从回调函数列表中删除一个回调函数或回调函数的集合。 callbacks.disable()
禁用改回调函数列表，不在执行任何动作。 callbacks.disabled()
回调函数列表是否被禁用。 callbacks.empty()
清空回调函数列表。 callbacks.has()
如果带有参数，则表示该参数是否在回调函数列表中，否则表示回调函数列表是否为空。 callback.fire()
指定参数调用列表中所有的回调函数。 callback.fireWith()
指定上下文和参数调用列表中所有的回调函数。 callback.fired()
回调函数是否被执行过。 callback.lock()
锁定回调函数列表，使其保持当前的状态不变。 callback.locked()
回调函数列表是否被锁定。 2. 具体实现 2.1 add和fire/fireWith

从上面的API中已经可以基本看出Callbacks的基本实现方式了，即维护一个回调函数列表（list）和一个参数队列（queue）。每次通过add向list中增加回调函数，然后通过fire/fireWith从queue中取出参数按序执行回调函数。JQuery的Callbacks模块代码很简单，其核心就是一个内部的fire函数（非api中fire函数，请看下文fire介绍）：

// Actual callback list list = [], // Stack of fire calls for repeatable lists stack = !options.once && [], // Fire callbacks fire = function( data ) { memory = options.memory && data; fired = true; firingIndex = firingStart || 0; firingStart = 0; firingLength = list.length; firing = true; for ( ; list && firingIndex < firingLength; firingIndex++ ) { if ( list[ firingIndex ].apply( data[ 0 ], data[ 1 ] ) === false && options.stopOnFalse ) { memory = false; // To prevent further calls using add break; } } firing = false; if ( list ) { if ( stack ) { if ( stack.length ) { fire( stack.shift() ); } } else if ( memory ) { list = []; } else { self.disable(); } } }

以上代码摘自 JQuery-1.12版本 ,代码中的list就是回调函数列表，stack就是参数队列queue。可以看出，每次执行fire函数都会遍历list，用传进来的参数调用每个回调函数，如果参数队列不为空，则递归的执行，一直到参数队列取空为止。

我们再看add函数的代码：

add: function() { if ( list ) { // First, we save the current length var start = list.length; (function add( args ) { jQuery.each( args, function( _, arg ) { var type = jQuery.type( arg ); if ( type === "function" ) { if ( !options.unique || !self.has( arg ) ) { list.push( arg ); } } else if ( arg && arg.length && type !== "string" ) { // Inspect recursively add( arg ); } }); })( arguments ); // Do we need to add the callbacks to the // current firing batch? if ( firing ) { firingLength = list.length; // With memory, if we're not firing then // we should call right away } else if ( memory ) { firingStart = start; fire( memory ); } } return this; }

add函数会根据参数类型将参数添加到回调函数列表中，即如果参数是一个函数（且要求unique），那么就直接放进回调函数列表中，如果参数是一个类数组，那么就递归调用add函数，将参数中的所有回调函数放进对调函数列表中。请注意，如果在初始化Callbacks对象时设置了memory，那么在调用add函数的时候，会使用memory记住的参数值调用每一个新加的回调函数。

再看fire和fireWith函数：

// Call all callbacks with the given context and arguments fireWith: function( context, args ) { if ( list && ( !fired || stack ) ) { args = args || []; args = [ context, args.slice ? args.slice() : args ]; if ( firing ) { stack.push( args ); } else { fire( args ); } } return this; }, // Call all the callbacks with the given arguments fire: function() { self.fireWith( this, arguments ); return this; },

这两个函数将参数放进参数队列中，最终都调用内部fire函数将参数传递给回调函数。

2.2 disable和lock

此处要特别说明一下disable和lock的区别，先看这两个函数的实现：

// Have the list do nothing anymore disable: function() { list = stack = memory = undefined; return this; }, // Lock the list in its current state lock: function() { stack = undefined; if ( !memory ) { self.disable(); } return this; },

这两个函数都禁用了回调函数队列，即不能再通过fire/fireWith调用回调函数。但是，如果我们在初始化Callbacks对象的时候，设置了memory的话，那么当回调函数被lock之后，通过add新增的回调函数依然可以使用memory的值调用。

3. 总结

不难看出，整个Callbacks的设计思想就是基于发布订阅（Pub/Sub）的观察者模式。与一般实现方式相比较而言，一个对象不再直接调用另一个对象的方法，而是观察另一个对象的某个特定的任务或活动，这个观察的对象就叫订阅者（Subscriber），被观察的对象就叫发布者（Publisher），当发布者的任务或活动完成时，会通知订阅者。这种设计模式的主要目的就是为了达到程序之间的松耦合。