回调对象是一个多用途的回调列表对象,提供了强大的的方式来管理回调函数列表。
最简单的缓存对象
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,是则停止继续调用。