首页 > 代码库 > jQuery源码笔记——回调对象
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，是则停止继续调用。
jQuery源码笔记——回调对象
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。