jQuery.Callbacks 源码解读二

一、参数标记

/*

 * once: 确保回调列表仅只fire一次

 * unique: 在执行add操作中，确保回调列表中不存在重复的回调

 * stopOnFalse: 当执行回调返回值为false，则终止回调队列的执行

 * momery: 记录上一次fire时的参数，并在add中传递给fire和执行fire，执行时firingIndex为上一次fire时的firingLength

 */

二、源码解读分析

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 ) {

    // 多个变量指向同一对象(或数组)引用时，其中一个变量修改了被引用对象的内部结构，其他引用变量也会表现出来

    var object = optionsCache[ options ] = {};

    jQuery.each( options.match( core_rnotwhite ) || [], function( _, flag ) {

        object[ flag ] = true; // optionsCache[ options ][ 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" ?

        // 缓存所有的参数标志，当再次传递已传递过的参数标志，则使用缓存值optionsCache[ options ]        

        ( 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为fireWith内部整理的args数组

        fire = function( data ) {

            memory = options.memory && data;

            fired = true;



            // 处理在add中，options.memory = true;的情况

            firingIndex = firingStart || 0;

            firingStart = 0;



            firingLength = list.length;

            firing = true;

            for ( ; list && firingIndex < firingLength; firingIndex++ ) {

                // 正在执行的回调返回值为false 且 options.stopOnFalse为true，则终止回调队列的执行

                if ( list[ firingIndex ].apply( data[ 0 ], data[ 1 ] ) === false && options.stopOnFalse ) {

                    memory = false; // To prevent further calls using add

                    break;

                }

            }

            firing = false;

            if ( list ) {

                // 处理正在执行的回调中执行fireWith的操作;

                if ( stack ) {

                    if ( stack.length ) {

                        fire( stack.shift() );

                    }

                }

                // 上一分支状态为回调执行过，且可以执行多次

                // 此时 options.once = true; 这里将list设置为[]，只是确保下次执行fire时，无回调执行

                // 但是如果 options.memory = true; 仍然会执行add中的fire操作，因为此时回调列表中已有回调

                else if ( memory ) {

                    list = [];

                }

                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 );

                            if ( type === "function" ) {

                                // 回调不唯一 或 唯一且不存在，则push

                                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?

                    // 正在执行的回调执行了add操作，则更新firingLength

                    if ( firing ) {

                        firingLength = list.length;



                    // With memory, if we're not firing then

                    // we should call right away

                    // 如果options.memory为true，则再次执行fire，且参数相同，fire中的firingIndex为此时的firingStart

                    }

                    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;                

                        while( ( index = jQuery.inArray( arg, list, index ) ) > -1 ) {

                            // 查找到所对应的索引，则移除索引项

                            list.splice( index, 1 );



                            // Handle firing indexes

                            // 正在执行的回调执行了remvoe操作，则更新firingLength和firingIndex的值

                            if ( firing ) {

                                if ( index <= firingLength ) {

                                    firingLength--;

                                }

                                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.

            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

            // 禁用add,remove,fire主要方法的工作

            disable: function() {

                list = stack = memory = undefined;

                return this;

            },

            // Is it disabled?

            disabled: function() {

                return !list;

            },

            // Lock the list in its current state

            lock: function() {

                // 如果回调执行过，则将阻止self.fire操作

                // 但如果 options.memory = true，则仍然会执行fire操作

                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 ) ) {



                    // 正在执行的回调函数执行了fireWith操作( 暗指回调列表已执行过，且可以执行多次，stack = []; )

                    // 该函数需要条件执行，或有移除该函数的操作，否则陷入死循环，详见例2

                    if ( firing ) {

                        stack.push( args );

                    }

                    // 正在执行的回调函数没有执行fireWith操作

                    else {

                        fire( args );

                    }

                }

                return this;

            },

            // Call all the callbacks with the given arguments

            fire: function() {

                self.fireWith( this, arguments );

                return this;

            },

            // To know if the callbacks have already been called at least once

            fired: function() {

                return !!fired;

            }

        };

    return self;

};

三、示例

例1：

$(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');

});

View Code

例2

$(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');

});

View Code

PS:

此前写过一篇关于jQuery.Callbacks源码分析的随笔，理解不透彻，今天又重新翻阅了一下，记录一下自己的源码阅读，相比之前，感觉好多了。

阅读前，可以先看API，弄清楚四个参数标志，'once', 'memory', 'unique', 'stopOnFalse', 简单的执行add, fire操作，然后再看源码；

阅读顺序：

1、先阅读var声明的变量，fire函数的前半部分，self对象中的add, remove函数，有些难以理解暂时往下看；

2、然后阅读self对象中的fire，fireWith，最后再来阅读fire函数，弄清楚后再看其他self对象中的方法。

转载请注明出处：博客园华子yjh