jQuery-v2.0.3源碼淺析03-Callbacks

廢話不多說我們今天來看下jQuery的Callbacks函數(shù)。
在看Callbacks源碼之前，我們先來看看Callbacks的簡單使用吧。
Callbacks用來統(tǒng)一管理函數(shù)的。

function aaa(){
    console.log(1);
}
function bbb(){
    console.log(2);
}
var cb= $.Callbacks();
cb.add(aaa);
cb.add(bbb);
cb.fire();

以上代碼執(zhí)行完畢之后，在控制臺會依次輸出1和2。
如果用傳統(tǒng)的方式

function aaa(){
    console.log(1);
}
function bbb(){
    console.log(2);
}
aaa();
bbb();

對比之后可以看出最終函數(shù)的執(zhí)行callbacks只需要調(diào)用fire就可以依次執(zhí)行add添加的函數(shù)了。
當然這只是callbacks最簡單的使用。

我們再來看一個例子

function aaa(){
  console.log(1);
}
(function(){
  function bbb(){
    console.log(2);
  }
})();
aaa();
bbb();

這個時候會發(fā)現(xiàn)bbb根本找不到，因為bbb函數(shù)定義在子作用域里面
我們再來看看callbacks的寫法

var cb= $.Callbacks();
function aaa(){
    console.log(1);
}
cb.add(aaa);
(function(){
    function bbb(){
        console.log(2);
    }
    cb.add(bbb);
})();
cb.fire();

我們發(fā)現(xiàn)只要我們把cb定義在全局就可以解決這種作用域問題，是不是很方便。

當然再看源碼之前我們可以自己模擬一下這個callbacks函數(shù)

function callbacks(){
    var list = [],
        self = {
            add: function(fn){
                list.push(fn);
            },
            fire: function(){
                for(var i = 0; i < list.length; ++i){
                    var item = list[i];
                    item && item();
                }
            }
        }
    return self;
}
function a(){
    console.log(1);
}
function b(){
    console.log(2);
}
var cb = callbacks();
cb.add(a);
cb.add(b);
cb.fire();

我們可以看到控制臺依次輸出了1和2。
其實Callbacks最基礎(chǔ)的實現(xiàn)部分就是這樣的。

讓我們再看看Callbacks的參數(shù)吧，Callbacks可以接受'once'、'memory'、'unique'、'stopOnFalse'這種類型，還可以4種類型隨便組合用空格隔開例如'once memory'。

先看once參數(shù)吧，從單詞意思可以看出來這個參數(shù)的意思就是讓add的方法只執(zhí)行一次，例如：

function a(){
    console.log(1);
}
function b(){
    console.log(2);
}
var cb = $.Callbacks();
cb.add(a);
cb.add(b);
cb.fire();
cb.fire();
//如果不傳參數(shù)控制臺會輸出1、2、1、2 ，如果這樣調(diào)用
var cb = $.Callbacks(‘once’);
//會發(fā)現(xiàn)控制臺只會輸出一遍1、2

這個時候我們可以嘗試修改自己的callbacks函數(shù)來實現(xiàn)這個效果

function createOptions(options){
    var object = {};
    var list = options.split(' ') || [];
    for(let i = 0; i < list.length; ++i){
        object[list[i]] = true;
    }
    return object;
}
function callbacks( options ){
    //轉(zhuǎn)換一下參數(shù)方便判斷
    options = createOptions(options);

    var firingIndex,
        firingLength,
        list = [],
        self = {
            add: function(fn){
                list.push(fn);
            },
            fire: function(){
                firingLength = list.length;
                if(!options.once || options.once && firingIndex == null) firingIndex = 0;

                for(;list && firingIndex < firingLength; ++firingIndex){
                    var item = list[firingIndex];
                    item && item();
                }
            }
        }
    return self;
}
function a(){
    console.log(1);
}
function b(){
    console.log(2);
}
var cb = callbacks('once');
cb.add(a);
cb.add(b);
cb.fire();
cb.fire();

然后我們再來看一下比較簡單的一個參數(shù)'stopOnFalse'，stopOnFalse的作用就是當list里面函數(shù)執(zhí)行完畢之后如果返回false就停止執(zhí)行，例如：

function a(){
    console.log(1);
    return false;
}
function b(){
    console.log(2);
}
var cb = $.Callbacks('stopOnFalse');
cb.add(a);
cb.add(b);
cb.fire();

控制臺只會輸出1

我們也可以改造一下我們的代碼來實現(xiàn)這個效果

function createOptions(options){
    var object = {};
    var list = options.split(' ') || [];
    for(let i = 0; i < list.length; ++i){
        object[list[i]] = true;
    }
    return object;
}
function callbacks( options ){
    //轉(zhuǎn)換一下參數(shù)方便判斷
    options = createOptions(options);

    var firingIndex,
        firingLength,
        list = [],
        self = {
            add: function(fn){
                list.push(fn);
            },
            fire: function(){
                firingLength = list.length;
                if(!options.once || options.once && firingIndex == null) firingIndex = 0;

                for(;list && firingIndex < firingLength; ++firingIndex){
                    var item = list[firingIndex];
                    if(item && item() === false && options.stopOnFalse){
                        break;
                    }
                }
            }
        }
    return self;
}
function a(){
    console.log(1);
    return false;
}
function b(){
    console.log(2);
}
var cb = callbacks('stopOnFalse');
cb.add(a);
cb.add(b);
cb.fire();

接下來我們看看'memory'的用法，memory的作用是當fire方法調(diào)用之后，我們再使用add添加新的函數(shù)的時候直接執(zhí)行。

function a(){
    console.log(1);
}
function b(){
    console.log(2);
}
var cb = $.Callbacks();
cb.add(a);
cb.fire();
cb.add(b);
//發(fā)現(xiàn)控制臺只會打印1
//接下來我們來改一下參數(shù)
var cb = $.Callbacks('memory');
//這個時候控制臺會輸出1和2

這個時候按照我們自己的思路來設(shè)計的話處理邏輯是不是應(yīng)該放在add方法中，判斷一下當前狀態(tài)如果已經(jīng)fire過的話，就直接執(zhí)行,
我們接著來改造一下我們的代碼

function createOptions(options){
    var object = {};
    var list = options.split(' ') || [];
    for(let i = 0; i < list.length; ++i){
        object[list[i]] = true;
    }
    return object;
}
function callbacks( options ){
    //轉(zhuǎn)換一下參數(shù)方便判斷
    options = createOptions(options);

    var firingIndex,
        firingLength,
        list = [],
        fired,
        self = {
            add: function(fn){
                if(fired){
                    fn && fn();
                }else{
                    list.push(fn);
                }
            },
            fire: function(){
                fired = true;
                firingLength = list.length;
                if(!options.once || options.once && firingIndex == null) firingIndex = 0;

                for(;list && firingIndex < firingLength; ++firingIndex){
                    var item = list[firingIndex];
                    if(item && item() === false && options.stopOnFalse){
                        break;
                    }
                }
            }
        }
    return self;
}
function a(){
    console.log(1);
}
function b(){
    console.log(2);
}
var cb = callbacks('memory');
cb.add(a);
cb.fire();
cb.add(b);

接下來我們再看一下'unique'參數(shù)，unique參數(shù)的作用就是控制add進來的函數(shù)不能有重復(fù)的。例如：

function a(){
    console.log(1);
}
var cb = $.Callbacks();
cb.add(a);
cb.add(a);
cb.fire();
//執(zhí)行完畢之后控制臺會輸出兩個1
//我們來改一下參數(shù)
var cb = $.Callbacks('unique');
//控制臺只會輸出一個1

我們來該找一下自己的callbacks吧

function createOptions(options){
    var object = {};
    var list = options.split(' ') || [];
    for(let i = 0; i < list.length; ++i){
        object[list[i]] = true;
    }
    return object;
}
function callbacks( options ){
    //轉(zhuǎn)換一下參數(shù)方便判斷
    options = createOptions(options);

    var firingIndex,
        firingLength,
        list = [],
        fired,
        self = {
            add: function(fn){
                if(fired){
                    fn && fn();
                }else{
                    if(options.unique && list.indexOf(fn) > -1){
                        return;
                    }
                    list.push(fn);
                }
            },
            fire: function(){
                fired = true;
                firingLength = list.length;
                if(!options.once || options.once && firingIndex == null) firingIndex = 0;

                for(;list && firingIndex < firingLength; ++firingIndex){
                    var item = list[firingIndex];
                    if(item && item() === false && options.stopOnFalse){
                        break;
                    }
                }
            }
        }
    return self;
}
function a(){
    console.log(1);
}
var cb = callbacks('unique');
cb.add(a);
cb.add(a);
cb.fire();

上面我們對callbacks進行了簡單實現(xiàn)，但還有非常多的情況沒有判斷，我們來看一下jQuery是如何處理的吧。
源碼注釋版

//緩存options下次如果又傳了同樣的參數(shù)就不需要重新計算一邊了，提高性能類似 {'once memory': { 'once': true, 'memory': true }}
var optionsCache = {};
// 將字符串類型的options轉(zhuǎn)換成對象，并且緩存起來
function createOptions( options ) {
    var object = optionsCache[ options ] = {};
    jQuery.each( options.match( core_rnotwhite ) || [], function( _, flag ) {
        object[ flag ] = true;
    });
    return object;
}
jQuery.Callbacks = function( options ) {

    //轉(zhuǎn)換options對象，options還可以接收類似 { 'once': true, 'memory': true } 的對象
    options = typeof options === "string" ?
        ( optionsCache[ options ] || createOptions( options ) ) :
        jQuery.extend( {}, options );

    var memory,
        fired,
        firing,
        firingStart,
        firingLength,
        firingIndex,
        list = [],
        stack = !options.once && [],//如果設(shè)置了once則stack=false，如果沒有設(shè)置once則stack=[]可以存儲后續(xù)操作
        fire = function( data ) {
            memory = options.memory && data;//如果設(shè)置了memory則memory = data，否則memory=false
            fired = true;//如果執(zhí)行過fire函數(shù)就把fired設(shè)置成true，代表已經(jīng)fire過了
            firingIndex = firingStart || 0;
            firingStart = 0;
            firingLength = list.length;
            firing = true;//fire過程中記錄一下狀態(tài)
            for ( ; list && firingIndex < firingLength; firingIndex++ ) {
                if ( list[ firingIndex ].apply( data[ 0 ], data[ 1 ] ) === false && options.stopOnFalse ) {//如果函數(shù)執(zhí)行完畢之后返回false并且設(shè)置了stopOnFalse，直接跳出循環(huán)
                    memory = false; 
                    break;
                }
            }
            firing = false;//fire完畢把狀態(tài)改回來
            if ( list ) {//如果這個Callbacks沒有銷毀
                if ( stack ) {//在存在在fire過程中調(diào)用fire，在fire完畢之后再執(zhí)行
                    if ( stack.length ) {
                        fire( stack.shift() );
                    }
                } else if ( memory ) {//設(shè)置了once又設(shè)置了memory才會執(zhí)行將list清空確保不重復(fù)執(zhí)行
                    list = [];
                } else {//如果設(shè)置once，沒有設(shè)置memory 則在一次執(zhí)行完畢之后 銷毀Callbacks
                    self.disable();
                }
            }
        },
        self = {
            add: function() {
                if ( list ) {
                    var start = list.length;//記錄list下標，在使用'memory'參數(shù)的時候使用
                    (function add( args ) {//循環(huán)push函數(shù)
                        jQuery.each( args, function( _, arg ) {
                            var type = jQuery.type( arg );
                            if ( type === "function" ) {
                                if ( !options.unique || !self.has( arg ) ) {//如果使用了'unique'并且添加重復(fù)函數(shù)會直接忽略
                                    list.push( arg );
                                }
                            } else if ( arg && arg.length && type !== "string" ) {//add也可以接收一個數(shù)組或者類似數(shù)組
                                add( arg );
                            }
                        });
                    })( arguments );
                    if ( firing ) {
                        /**
                            考慮到在fire過程中，發(fā)現(xiàn)函數(shù)里面調(diào)用了add方法，這個時候需要更新一下循環(huán)長度
                            例如：
                            function a(){
                                console.log(1);
                                funciton b(){
                                    console.log(2);
                                }
                                cb.add(b);
                            }
                        **/
                        firingLength = list.length;
                    } else if ( memory ) {//如果fire過一次并且設(shè)置了memory
                        firingStart = start;
                        fire( memory );
                    }
                }
                return this;
            },
            remove: function() {//移除list中的某一函數(shù)
                if ( list ) {
                    jQuery.each( arguments, function( _, arg ) {
                        var index;
                        while( ( index = jQuery.inArray( arg, list, index ) ) > -1 ) {
                            list.splice( index, 1 );
                            if ( firing ) {//判斷一下是否在fire過程中進行了remove
                                if ( index <= firingLength ) {
                                    firingLength--;
                                }
                                if ( index <= firingIndex ) {
                                    firingIndex--;
                                }
                            }
                        }
                    });
                }
                return this;
            },
            has: function( fn ) {//判斷數(shù)組中是否包含fn
                return fn ? jQuery.inArray( fn, list ) > -1 : !!( list && list.length );
            },
            empty: function() {//清空list，可以重新添加調(diào)用
                list = [];
                firingLength = 0;
                return this;
            },
            disable: function() {//銷毀掉這個Callbacks，不可進行其他操作
                list = stack = memory = undefined;
                return this;
            },
            disabled: function() {//判斷是否被銷毀
                return !list;
            },
            lock: function() {//鎖住
                stack = undefined;
                if ( !memory ) {
                    self.disable();
                }
                return this;
            },
            locked: function() {//判斷是否鎖住了
                return !stack;
            },
            fireWith: function( context, args ) {//處理一下參數(shù)，可以設(shè)置回調(diào)函數(shù)的最終context
                if ( list && ( !fired || stack ) ) {
                    args = args || [];
                    args = [ context, args.slice ? args.slice() : args ];
                    if ( firing ) {//如果fire過程中又調(diào)用了fire先存儲起來
                        stack.push( args );
                    } else {//調(diào)用fire函數(shù)，并傳入?yún)?shù)
                        fire( args );
                    }
                }
                return this;
            },
            fire: function() {
                self.fireWith( this, arguments );
                return this;
            },
            fired: function() {//判斷是否fire過
                return !!fired;
            }
        };

    return self;
};
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容