jQuery源碼學習之Callbacks

jQuery源碼學習之Callbacks

jQuery的ajax、deferred經過回調實現異步，其實現核心是Callbacks。

使用方法

使用首先要先新建一個實例對象。建立時能夠傳入參數flags，表示對回調對象的限制，可選值以下表示。

• stopOnFalse:回調函數隊列中的函數返回false時中止觸發
• once:回調函數隊列只能被觸發一次
• memory:記錄上一次觸發隊列傳入的值，新添加到隊列中的函數使用記錄值做爲參數，並當即執行。
• unique:函數隊列中函數都是惟一的

var cb = $.Callbacks('memory');
cb.add(function(val){
    console.log('1: ' + val)
})
cb.fire('callback')
cb.add(function(val){
    console.log('2: ' + val)
})
// console輸出
1: callback
2: callback

Callbacks 提供了一系列實例方法來操做隊列和查看回調對象的狀態。

• add: 添加函數到回調隊列中，能夠是函數或者函數數組
• remove: 從回調隊列中刪除指定函數
• has: 判斷回調隊列裏是否存在某個函數
• empty: 清空回調隊列
• disable: 禁止添加函數和觸發隊列，清空回調隊列和上一個傳入的值
• disabled: 判斷回調對象是否被禁用
• lock: 禁用fire，若memory非空則同時add無效
• locked: 判斷是否調用了lock
• fireWith: 傳入context和參數，觸發隊列
• fire: 傳入參數觸發對象，context是回調對象

源碼解析

$.Callback()方法內部定義了多個局部變量和方法，用於記錄回調對象的狀態和函數隊列等，返回self，在self實現了上述回調對象的方法，用戶只能經過self提供的方法來更改回調對象。這樣的好處是保證除了self以外，沒有其餘修改回調對象的狀態和隊列的途徑。

其中，firingIndex爲當前觸發函數在隊列中的索引，list是回調函數隊列，memory記錄上次觸發的參數，當回調對象實例化時傳入memory時會用到，queue保存各個callback執行時的context和傳入的參數。self.fire(args)實際是self.fireWith(this,args)，self.fireWith內部則調用了在Callbacks定義的局部函數fire。

...
    // 如下變量和函數 外部沒法修改，只能經過self暴露的方法去修改和訪問
    var // Flag to know if list is currently firing
        firing,

        // Last fire value for non-forgettable lists
        // 保存上一次觸發callback的參數，調用add以後並用該參數觸發
        memory,

        // Flag to know if list was already fired
        fired,

        // Flag to prevent firing
        // locked==true fire無效 若memory非空則同時add無效
        locked,

        // Actual callback list
        // callback函數數組
        list = [],

        // Queue of execution data for repeatable lists
        // 保存各個callback執行時的context和傳入的參數
        queue = [],

        // Index of currently firing callback (modified by add/remove as needed)
        // 當前正觸發callback的索引
        firingIndex = -1,

        // Fire callbacks
        fire = function() {
            ...
        },
        
        // Actual Callbacks object
        self = {
            // Add a callback or a collection of callbacks to the list
            add: function() {
                ...
            },
            ...
            // Call all callbacks with the given context and arguments
            fireWith: function( context, args ) {
                if ( !locked ) {
                    args = args || [];
                    args = [ context, args.slice ? args.slice() : args ]; // :前爲args是數組，:後是string
                    queue.push( args );
                    if ( !firing ) {
                        fire();
                    }
                }
                return this;
            },

            // Call all the callbacks with the given arguments
            fire: function() {
                self.fireWith( this, arguments );
                return this;
            },
            ...
        }

經過self.add添加函數到回調隊列中，代碼以下。先判斷是否memory且非正在觸發，若是是則將fireIndex移動至回調隊列的末尾，並保存memory。接着使用當即執行函數表達式實現add函數，在該函數內遍歷傳入的參數，進行類型判斷後決定是否添加到隊列中，若是回調對象有unique標誌，則還要判斷該函數在隊列中是否已存在。若是回調對象有memory標誌，添加完畢以後還會觸發fire，執行新添加的函數。

add: function() {
                if ( list ) {

                    // If we have memory from a past run, we should fire after adding
                    // 若是memory非空且非正在觸發，在queue中保存memory的值,說明add後要執行fire
                    // 將firingIndex移至list末尾 下一次fire重新add進來的函數開始
                    if ( memory && !firing ) {
                        firingIndex = list.length - 1;
                        queue.push( memory );
                    }

                    ( function add( args ) {
                        jQuery.each( args, function( _, arg ) {
                            // 傳參方式爲add(fn)或add(fn1,fn2)
                            if ( jQuery.isFunction( arg ) ) {
                                /**
                                 * options.unique==false
                                 * 或
                                 * options.unique==true&&self中沒有arg
                                 */
                                if ( !options.unique || !self.has( arg ) ) {
                                    list.push( arg );
                                }
                            } else if ( arg && arg.length && jQuery.type( arg ) !== "string" ) {
                                // 傳參方式爲add([fn...]) 遞歸
                                // Inspect recursively
                                add( arg );
                            }
                        } );
                    } )( arguments ); //arguments爲參數數組 因此add的第一步是each遍歷

                    //添加到list後若memory真則fire，此時firingIndex爲回調隊列的最後一個函數
                    if ( memory && !firing ) {
                        fire();
                    }
                }
                return this;
            }

fire、fireWith方法內部實際調用了局部函數fire，其代碼以下。觸發時，須要更新fired和firing，表示已觸發和正在觸發。經過for循環執行隊裏中的函數。結束循環後，將firingIndex更新爲-1，表示下次觸發從隊列中的第一個函數開始。遍歷在fireWith中更新過的queue，queue是保存數組的數組，每一個數組的第一個元素是context,第二個元素是參數數組。執行函數時要是否返回false且回調對象有stopOnFalse標誌，若是是則中止觸發。

// Fire callbacks
        fire = function() {

            // Enforce single-firing
            // 執行單次觸發
            locked = locked || options.once;

            // Execute callbacks for all pending executions,
            // respecting firingIndex overrides and runtime changes
            // 標記已觸發和正在觸發
            fired = firing = true;
            // 循環調用list中的回調函數
            // 循環結束以後 firingIndex賦-1 下一次fire從list的第一個開始 除非firingIndex被修改過
            // 若設置了memory，add的時候會修改firingIndex並調用fire
            // queue在fireWith函數內被更新，保存了觸發函數的context和參數
            for ( ; queue.length; firingIndex = -1 ) {
                memory = queue.shift();
                while ( ++firingIndex < list.length ) { 

                    // Run callback and check for early termination
                    // memory[0]是content memory[1]是參數
                    if ( list[ firingIndex ].apply( memory[ 0 ], memory[ 1 ] ) === false &&
                        options.stopOnFalse ) {
                        
                        // Jump to end and forget the data so .add doesn't re-fire
                        // 當前執行函數範圍false且options.stopOnFalse==true 直接跳至list尾 終止循環
                        firingIndex = list.length;
                        memory = false;
                    }
                }
            }

            // 沒設置memory時不保留參數
            // 設置了memory時 參數仍保留在其中
            // Forget the data if we're done with it
            if ( !options.memory ) {
                memory = false;
            }

            firing = false;

            // Clean up if we're done firing for good
            if ( locked ) {

                // Keep an empty list if we have data for future add calls
                if ( memory ) {
                    list = [];

                // Otherwise, this object is spent
                } else {
                    list = "";
                }
            }
        },