jQuery源碼筆記——回調對象

標籤：style   blog   io   color   ar   sp   for   div   on   

回調對象是一個多用途的回調列表對象，提供了強大的的方式來管理回呼函數列表。

最簡單的緩衝對象

function Callbacks(){    var list = [],    self = {        add: function(fn){            list.push(fn);        },        remove: function(fn){            var  index;            if((index = list.indexOf(fn)) > -1){                list.splice( index, 1 );            }        },        fire: function(value){            for(var i in list){                list[i](value);            }        },    }    return self;}var callbacks = Callbacks();function fn1( value ) {    console.log( value );}callbacks.add(fn1);callbacks.fire( "foo!" );//foo!callbacks.remove(fn1);callbacks.fire( "foo!" );//nothing

回調對象是為了將回呼函數統一管理，如添加，刪除，調用等功能。

 

在jQuery當中，除了實現基本的管理，還提供了由Callbacks參數決定的回調對象的模式。這四個屬性有once，memory，unique，stopOnFalse；

once的實現

function Callbacks( options ){    var object = {};    object[options] = true;    options = object;    var list = [],    self = {        add: function(fn){            if ( list ) {                list.push(fn);            }        },        remove: function(fn){            if ( list ) {                var  index;                if((index = list.indexOf(fn)) > -1){                    list.splice( index, 1 );                }            }        },        fire: function(value){            for(var i in list){                list[i](value);            }            //在Once模式下，當fire過一次後清空回呼函數列表。            if( options.once ){                list = undefined;            }        },    }    return self;}var callbacks = Callbacks( "once" );function fn1( value ) {    console.log( value );}callbacks.add(fn1);callbacks.fire( "foo!" );//foo!callbacks.fire( "foo!" );//nothing

在once模式下，fire過一次後，清空回呼函數列表。

memory實現

function Callbacks( options ){    var object = {};    object[options] = true;    options = object;    var list = [],    firingStart = 0,    memory;    self = {        add: function(fn){            if ( list ) {                list.push(fn);            }            //如果存在記憶的參數，則直接調用fire            if( memory ){                self.fire( memory );            }        },        remove: function(fn){            if ( list ) {                var  index;                if((index = list.indexOf(fn)) > -1){                    list.splice( index, 1 );                }            }        },        fire: function(value){            //儲存當前長度            var start = list.length;            for( ; firingStart < list.length;firingStart++){                list[firingStart](value);            }            //在memory模式下，記憶參數,並修改add時調用列表的起始位置。            if( options.memory ){                firingStart = start;                memory = value            }        },    }    return self;};function fn1( value ) {    console.log( value );}function fn2( value ) {    fn1("fn2 says: " + value);    return false;}var callbacks = Callbacks( "memory" );callbacks.add( fn1 );callbacks.fire( "foo" );callbacks.add( fn2 );

在memory下，記憶上次調用的參數，和已經執行了函數的位置，當有新函數add時，直接調用。

unique實現

function Callbacks( options ){    var object = {};    object[options] = true;    options = object;    var list = [],    firingStart = 0,    memory;    self = {        add: function(fn){            if ( list ) {                //在unique模式下，當函數已存在，則不添加。                if ( !options.unique || !(list.indexOf(fn) > -1))                    list.push(fn);            }        },        remove: function(fn){            if ( list ) {                var  index;                if((index = list.indexOf(fn)) > -1){                    list.splice( index, 1 );                }            }        },        fire: function(value){            for( ; firingStart < list.length;firingStart++){                list[firingStart](value);            }        },    }    return self;};function fn1( value ) {    console.log( value );}var callbacks = Callbacks( "unique" );callbacks.add( fn1 ); callbacks.add( fn1 );callbacks.fire( "bar" );//bar

主要針對add函數的判斷

stopOnFalse的實現

function Callbacks( options ){    var object = {};    object[options] = true;    options = object;    var list = [],    firingStart = 0,    memory;    self = {        add: function(fn){            if ( list ) {                list.push(fn);            }        },        remove: function(fn){            if ( list ) {                var  index;                if((index = list.indexOf(fn)) > -1){                    list.splice( index, 1 );                }            }        },        fire: function(value){            for( ; firingStart < list.length;firingStart++){                if( !list[firingStart](value) )                    break;            }        },    }    return self;};function fn1( value ) {    console.log( value );    return false;}function fn2( value ){    fn1( "fn2 says: " + value );    return false;}var callbacks = Callbacks( );callbacks.add( fn1 ); callbacks.add( fn2 );callbacks.fire( "bar" );

每次fire判斷是否返回的是false，是則停止繼續調用。

 

 

jQuery源碼筆記——回調對象