JQuery中的回调对象

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：

1. callbacks.add()
   向回调函数列表中增加一个回调函数或回调函数集合。
2. callbacks.remove()
   从回调函数列表中删除一个回调函数或回调函数的集合。
3. callbacks.disable()
   禁用改回调函数列表，不在执行任何动作。
4. callbacks.disabled()
   回调函数列表是否被禁用。
5. callbacks.empty()
   清空回调函数列表。
6. callbacks.has()
   如果带有参数，则表示该参数是否在回调函数列表中，否则表示回调函数列表是否为空。
7. callback.fire()
   指定参数调用列表中所有的回调函数。
8. callback.fireWith()
   指定上下文和参数调用列表中所有的回调函数。
9. callback.fired()
   回调函数是否被执行过。
10. callback.lock()
    锁定回调函数列表，使其保持当前的状态不变。
11. 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），当发布者的任务或活动完成时，会通知订阅者。
这种设计模式的主要目的就是为了达到程序之间的松耦合。