jQuery.Callbacks源码解读

序言：

最近在学习jQuery.Callbacks对象，看jQuery.Callbacks的API文档，不是很懂，因此看看其源码部分，理解其使用方法，记录下自己在阅读源码时的记录并分享给大家。

有理解不透的地方望同仁指点，代码来源：jQuery 1.9.1版本。作者：华子yjh，欢迎转载，转载时请注明出处并附上原文链接。

一、源码解读

/*
 * Create a callback list using the following parameters:
 *
 *    options: an optional list of space-separated options that will change how
 *            the callback list behaves or a more traditional option object
 *
 * By default a callback list will act like an event callback list and can be
 * "fired" multiple times.
 *
 * Possible options:
 *
 *    once:          确保回调列表仅只fire一次
                     will ensure the callback list can only be fired once (like a Deferred)
 *
 *    memory:        在执行过fire后，保存之前fire时的参数，该参数会传递给在add中执行的最新添加的回调
                     will keep track of previous values and will call any callback added
 *                    after the list has been fired right away with the latest "memorized"
 *                    values (like a Deferred)
 *
 *    unique:        确保在add操作中，阻止存在回调列表中的回调再次被添加到回调列表中
                     will ensure a callback can only be added once (no duplicate in the list)
 *
 *    stopOnFalse:   当正在执行的回调返回false，将中断其他未执行回调的执行
                     interrupt callings when a callback returns false
 *
 */

var optionsCache = {},
    // Used for splitting on whitespace
    core_rnotwhite = /\S+/g;

// Convert String-formatted options into Object-formatted ones and store in cache
function createOptions( options ) {
    // optionsCache[ options ] 用于缓存 object所引用的值
    var object = optionsCache[ options ] = {};
    jQuery.each( options.match( core_rnotwhite ) || [], function( _, flag ) {
        object[ flag ] = true;
    });
    return object;
}

jQuery.Callbacks = function( options ) {

    // Convert options from String-formatted to Object-formatted if needed
    // (we check in cache first)
    options = typeof options === "string" ?
        // 只有当执行$.Callbacks(参数相同)二次及以上时，才不会执行createOptions函数
        ( optionsCache[ options ] || createOptions( options ) ) :
        // 说明也可以这样$.Callbacks({once:true, memory:true})使用
        jQuery.extend( {}, options );

    var // Flag to know if list is currently firing
        firing,
        // Last fire value (for non-forgettable lists)
        memory,
        // Flag to know if list was already fired
        fired,
        // End of the loop when firing
        firingLength,
        // Index of currently firing callback (modified by remove if needed)
        firingIndex,
        // First callback to fire (used internally by add and fireWith)
        firingStart,
        // Actual callback list
        list = [],
        // Stack of fire calls for repeatable lists
        stack = !options.once && [],
        // Fire callbacks
        // data传递的是一个数组
        // 使用Callbacks.fireWidth时，data包含fireWith函数传递的一个上下文环境和一个数组
        // 使用Callbacks.fire时，data包含Callbacks对象和fire函数的arguments对象
        fire = function( data ) {
            // 如果options.memory为true，记录下data传递的数组
            memory = options.memory && data;
            fired = true;
            // 如果options.memory为true，firingStart为上一次Callbacks.add后回调列表的length值
            firingIndex = firingStart || 0;
            // 重置firingStart为0
            firingStart = 0;
            firingLength = list.length;
            firing = true;
            for ( ; list && firingIndex < firingLength; firingIndex++ ) {
                // 将data作为参数，执行回调列表中的所有回调
                // 如果回调列表中其中一个回调返回false，且options.stopOnFalse为true，则中断接下来其他回调的执行
                // 如果options.memory为true，将memory设置为false，阻止在Callbacks.add中新增回调的执行
                if ( list[ firingIndex ].apply( data[ 0 ], data[ 1 ] ) === false && options.stopOnFalse ) {
                    memory = false; // To prevent further calls using add
                    break;
                }
            }
            firing = false;
            if ( list ) {
                // 如果options.once为false
                if ( stack ) {
                    // stack在fireWith操作时可能拥有成员
                    // 当stack拥有成员时(只有一个),并将其成员作为参数传递给将要执行的所有回调
                    if ( stack.length ) {
                        fire( stack.shift() );
                    }
                }
                // 如果options.memory为true且options.once为true，那么在add中执行一次fire(只执行最新添加的回调)
                // 这里设置list = []，那么再次fire时，将不会有任何操作
                else if ( memory ) {
                    list = [];
                }
                // 如果存在options.once为true，options.memory为false的其他情况，将禁用Callbacks对象
                else {
                    self.disable();
                }
            }
        },
        // Actual Callbacks object
        self = {
            // Add a callback or a collection of callbacks to the list
            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 );
                            // 如果arg是一个函数
                            if ( type === "function" ) {
                                // arg为要新增到回调列表中的回调
                                // 如果arg不存在回调列表中，则将它增加到回调列表中
                                // 如果arg存在回调列表中，且options.unique为false，则将它增加到回调列表中
                                // 如果arg存在回调列表中，且options.unique为true，则不执行push动作
                                if ( !options.unique || !self.has( arg ) ) {
                                    list.push( arg );
                                }
                            }
                            // 如果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?
                    // 如果回调列表中的回调正在执行时，其中的一个回调函数执行了Callbacks.add操作
                    // 上句话可以简称：如果在执行Callbacks.add操作的状态为firing时
                    // 那么需要更新firingLength值
                    if ( firing ) {
                        firingLength = list.length;
                    // With memory, if we're not firing then
                    // we should call right away
                    // 如果options.memory为true，则将memory做为参数，应用最近增加的回调函数
                    } else if ( memory ) {
                        firingStart = start;
                        fire( memory );
                    }
                }
                return this;
            },
            // Remove a callback from the list
            remove: function() {
                if ( list ) {
                    jQuery.each( arguments, function( _, arg ) {
                        var index;
                        // 通过找到arguments成员在回调列表中索引位置遍历arguments对象，并将arguments成员从回调列表中移除
                        while( ( index = jQuery.inArray( arg, list, index ) ) > -1 ) {
                            list.splice( index, 1 );
                            // Handle firing indexes
                            // 如果在执行Callbacks.remove操作的状态为firing时
                            // 则更新firingLength和firingIndex的值
                            if ( firing ) {
                                if ( index <= firingLength ) {
                                    firingLength--;
                                }
                                // 特殊处理，如果移除的回调的索引小于当前正在执行回调的索引，则firingIdex--
                                // 后面未执行的回调则得以正常执行
                                if ( index <= firingIndex ) {
                                    firingIndex--;
                                }
                            }
                        }
                    });
                }
                return this;
            },
            // Check if a given callback is in the list.
            // If no argument is given, return whether or not list has callbacks attached.
            // 检查fn是否存在回调列表中
            has: function( fn ) {
                return fn ? jQuery.inArray( fn, list ) > -1 : !!( list && list.length );
            },
            // Remove all callbacks from the list
            // 清空回调列表中的所有回调
            empty: function() {
                list = [];
                return this;
            },
            // Have the list do nothing anymore
            // 禁用Callbacks对象
            disable: function() {
                list = stack = memory = undefined;
                return this;
            },
            // Is it disabled?
            // 检查回调列表是否被禁用
            disabled: function() {
                return !list;
            },
            // Lock the list in its current state
            // 锁定回调对象，阻止回调列表中的所有回调的执行
            lock: function() {
                stack = undefined;
                if ( !memory ) {
                    self.disable();
                }
                return this;
            },
            // Is it locked?
            // 检查回调对象是否被锁定
            locked: function() {
                return !stack;
            },
            // Call all callbacks with the given context and arguments
            fireWith: function( context, args ) {
                args = args || [];
                args = [ context, args.slice ? args.slice() : args ];
                if ( list && ( !fired || stack ) ) {
                    // 如果fired为true，options.once为false，且如果在执行fireWith操作的状态为firing
                    // 则将处理过的args作为stack数组的第一个数组项，并在firing为false后，将stack第一个数组项作为参数传递给将要执行的所有回调
                    
                    // 如果fired为true，options.once为true，则不执行任何操作
                    // 可以看出，$.Callbacks('once')表示回调对象只fire一次
                    if ( firing ) {
                        stack.push( args );
                    }
                    // 第一次执行fireWith时，一定执行else分支
                    else {
                        fire( args );
                    }
                }
                return this;
            },
            // Call all the callbacks with the given arguments
            // 将Callbacks对象，及Callbacks.fire函数中的arguments对象传递给Callbacks.fireWith函数，并执行
            fire: function() {
                self.fireWith( this, arguments );
                return this;
            },
            // To know if the callbacks have already been called at least once
            // 是否执行过fire函数
            fired: function() {
                return !!fired;
            }
        };
    
    //返回Callbacks对象
    return self;
};

二、jQuery.Callbacks内部中firing为true的实例

1、在Callbacks.add中firing为true的实例

$(function(){
    // 定义三个将要增加到回调列表的回调函数fn1,fn2,fn3        
    function fn1(arg){
        console.log( 'fn1 says:' + arg );
        // 在fn1中执行Callbacks.add操作，此时Callbacks函数内部的firingLength将会得到更新
        $callbacks.add(fn2);
    }
    function fn2(arg){
        console.log( 'fn2 says:' + arg );
    }
    function fn3(arg){
        console.log( 'fn3 says:' + arg );
    }
    
    // Callbacks传递了memory
    // 也可以这样使用$.Callbacks({ memory: true });
    var $callbacks = $.Callbacks('memory');
    
    // 将fn1增加到回调列表中，因为在fn1中有执行了add(fn2)操作，因此回调列表中的回调为fn1,fn2
    $callbacks.add(fn1);
    
    // output: fn1 says:foo
    // output: fn2 says:foo
    $callbacks.fire('foo');
    
    // 将之前fire的参数传递给最近增加的回调fn3，并执行fn3
    // output: fn3 says:foo
    $callbacks.add(fn3);
    
    // 再执行一次fire，注意此时回调列表中的回调一次是fn1,fn2,fn3,fn2
    // output: fn1 says:baz
    // output: fn2 says:baz
    // output: fn3 says:baz
    // output: fn2 says:baz
    // 如果期望回调列表中只有fn1,fn2,fn3，只需在Callbacks函数中传入unique
    $callbacks.fire('baz');
});

2、在Callbacks.fireWith中firing为true的实例

$(function(){    
    function fn1(arg){
        console.log( 'fn1 says:' + arg );
    }
    function fn2(arg){
        console.log( 'fn2 says:' + arg );
        $callbacks.fireWith(window, ['yjh']);
        
        // 一定要执行这一步，否则将会陷入死循环
        $callbacks.remove(fn2);
    }
    
    var $callbacks = $.Callbacks();
    $callbacks.add(fn1);
    
    // output: fn1 says:foo
    $callbacks.fire('foo');    

    $callbacks.add(fn2);    
    // output: fn1 says:baz
    // output: fn2 says:baz
    // output: fn1 says:yjh
    $callbacks.fire('baz');
});