jQuery源码笔记——回调对象

回调对象是一个多用途的回调列表对象，提供了强大的的方式来管理回调函数列表。

最简单的缓存对象

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，是则停止继续调用。