jQuery源码笔记——回调对象

最新推荐文章于 2025-09-09 16:55:30 发布

转载最新推荐文章于 2025-09-09 16:55:30 发布 · 79 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/winderby/p/4103053.html

文章标签：

#javascript #ViewUI

本文详细解释了回调对象的概念，并通过实例展示了如何使用jQuery中的Callbacks函数来管理回调函数，包括添加、删除、触发功能。文章还介绍了Callbacks函数的四种模式：once、memory、unique和stopOnFalse，以及它们在实际应用中的作用。

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

最简单的缓存对象

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