最近大量的用到jQuery Callbacks 对象,jQuery库中的$.ajax()和$.Deferred() 对象也是基于这个对象实现,下面我们也模拟实现jQuery Callbacks 对象的部分功能用法和$.Callbacks完全一致 , 但是只是实现了add , remove , fire , empty, has和带参数的构造函数功能, $.Callbacks 还有disable,disabled, fireWith , fired , lock, locked 方法 代码如下:复制代码 代码如下: String.prototype.trim = function () { return this.replace( /^\s+|\s+$/g, '' ); }; // Simulate jQuery.Callbacks object function MyCallbacks( options ) { var ops = { once: false, memory: false, unique: false, stopOnFalse: false }; if ( typeof options === 'string' && options.trim() !== '' ) { var opsArray = options.split( /\s+/ ); for ( var i = 0; i < options.length; i++ ) { if ( opsArray[i] === 'once' ) ops.once = true; else if ( opsArray[i] === 'memory' ) ops.memory = true; else if ( opsArray[i] === 'unique' ) ops.unique = true; else if ( opsArray[i] === 'stopOnFalse' ) ops.stopOnFalse = true; } } var ar = []; var lastArgs = null; var firedTimes = 0; function hasName( name ) { var h = false; if ( typeof name === 'string' && name !== null && name.trim() !== '' && ar.length > 0 ) { for ( var i = 0; i < ar.length; i++ ) { if ( ar[i].name === name ) { h = true; break; } } } return h; } // add a function this.add = function ( fn ) { if ( typeof fn === 'function' ) { if ( ops.unique ) { // check whether it had been added before if ( fn.name !== '' && hasName( fn.name ) ) { return this; } } ar.push( fn ); if ( ops.memory ) { // after added , call it immediately fn.call( this, lastArgs ); } } return this; }; // remove a function this.remove = function ( fn ) { if ( typeof ( fn ) === 'function' && fn.name !== '' && ar.length > 0 ) { for ( var i = 0; i < ar.length; i++ ) { if ( ar[i].name === fn.name ) { ar.splice( i, 1 ); } } } return this; }; // remove all functions this.empty = function () { ar.length = 0; return this; }; // check whether it includes a specific function this.has = function ( fn ) { var f = false; if ( typeof ( fn ) === 'function' && fn.name !== '' && ar.length > 0 ) { for ( var i = 0; i < ar.length; i++ ) { if ( ar[i].name === fn.name ) { f = true; break; } } } return f; }; // invoke funtions it includes one by one this.fire = function ( args ) { if ( ops.once && firedTimes > 0 ) { return this; } if ( ar.length > 0 ) { var r; for ( var i = 0; i < ar.length; i++ ) { r = ar[i].call( this, args ); if ( ops.stopOnFalse && r === false ) { break; } } } firedTimes++; if ( ops.memory ) { lastArgs = args; } return this; }; }; 测试函数如下:(注意fn1 fn2是匿名函数, fn2返回false , fn3是有“名”函数)复制代码 代码如下: var fn1 = function ( v ) { console.log( 'fn1 ' + ( v || '' ) ); }; var fn2 = function ( v ) { console.log( 'fn2 ' + ( v || '' ) ); return false; }; function fn3( v ) { console.log( 'fn3 ' + ( v || '' ) ); }; 1 . 测试add & firevar cb=new MyCallbacks();cb.add(fn1)cb.add(fn2)cb.add(fn3)cb.fire('hello')输出:fn1 hellofn2 hellofn3 hello2.测试removevar cb=new MyCallbacks();cb.add(fn1)cb.add(fn2)cb.add(fn3)cb.remove(fn1)cb.fire('hello')cb.remove(fn3)cb.fire('hello')输出:fn1 hellofn2 hellofn3 hello----------------------------fn1 hellofn2 hello2.测试hasvar cb=new MyCallbacks();cb.add(fn1)cb.add(fn2)cb.add(fn3)cb.has(fn1) cb.has(fn3) 输出:false---------------true3.测试带参数的构造函数 : oncevar cb=new MyCallbacks('once')cb.add(fn1)cb.fire('hello')cb.fire('hello')cb.add(fn2)cb.fire('hello')输出:hello-------------------------------------------------------------------4.测试带参数的构造函数 : memory var cb=new MyCallbacks('memory')cb.add(fn1)cb.fire('hello') // 输出 : fn1 hellocb.add(fn2) // 输出 : fn2 hellocb.fire('hello') 输出 : fn1 hello fn2 hello5.测试带参数的构造函数 : stopOnFalsevar cb=new MyCallbacks('stopOnFalse')cb.add(fn1)cb.add(fn2)cb.add(fn3)cb.fire('hello')输出:fn1 hellofn2 hello6.测试带参数的构造函数 :uniquevar cb=new MyCallbacks('unique')b.add(fn3)b.add(fn3)cb.fire('hello')输出:fn3 hello7. 测试带组合参数的构造函数:四个设置参数可以随意组合,一下只测试全部组合的情况, 不然要写16个测试用例 T_Tvar cb=new MyCallbacks('once memory unique stopOnFalse')cb.add(fn1) // 输出: fn1cb.add(fn2) // 输出: fn2cb.add(fn3) // 输出: fn3cb.fire('hello')输出:fn1 hellofn2 hellocb.fire('hello') // 输出:没有输出以下是官方API 文档:Description: A multi-purpose callbacks list object that provides a powerful way to manage callback lists.The $.Callbacks() function is internally used to provide the base functionality behind the jQuery $.ajax() and$.Deferred() components. It can be used as a similar base to define functionality for new components.构造函数 : jQuery.Callbacks( flags )flagsType: StringAn optional list of space-separated flags that change how the callback list behaves.Possible flags:once: Ensures the callback list can only be fired once (like a Deferred).memory: Keeps track of previous values and will call any callback added after the list has been fired right away with the latest "memorized" values (like a Deferred).unique: Ensures a callback can only be added once (so there are no duplicates in the list).stopOnFalse: Interrupts callings when a callback returns false.By default a callback list will act like an event callback list and can be "fired" multiple times.Two specific methods were being used above: .add() and .fire(). The .add() method supports adding new callbacks to the callback list, while the .fire() method executes the added functions and provides a way to pass arguments to be processed by the callbacks in the same list.利用Callbacks 实现发布订阅模式 pub/sub: (官方文档)复制代码 代码如下:var topics = {}; jQuery.Topic = function ( id ) { var callbacks, method, topic = id && topics[id]; if ( !topic ) { callbacks = jQuery.Callbacks(); topic = { publish: callbacks.fire, subscribe: callbacks.add, unsubscribe: callbacks.remove }; if ( id ) { topics[id] = topic; } } return topic; };使用复制代码 代码如下:$.Topic( 'mailArrived' ).subscribe( function ( e ) { console.log( 'Your have new email! ' ); console.log( "mail title : " + e.title ); console.log( "mail content : " + e.content ); } ); $.Topic( 'mailArrived' ).publish( { title: 'mail title', content: 'mail content' } );实现了其余的全部功能 :callbacks.disable , callbacks.disabled, callbacks.fired,callbacks.fireWith, callbacks.lock, callbacks.locked ,然后重构了下代码结构, 将实现放入了匿名函数内, 然后通过工厂方法 window.callbacks 返回实例,以免每次使用必须 new .具体代码如下, 有兴趣和时间的可以对照jQuery版本的Callbacks对比下 :
复制代码 代码如下:
( function ( window, undefined ) { // Simulate jQuery.Callbacks object function Callbacks( options ) { var ops = { once: false, memory: false, unique: false, stopOnFalse: false }, ar = [], lastArgs = null, firedTimes = 0, _disabled = false, _locked = false; if ( typeof options === 'string' && options.trim() !== '' ) { var opsArray = options.split( /\s+/ ); for ( var i = 0; i < options.length; i++ ) { if ( opsArray[i] === 'once' ) ops.once = true; else if ( opsArray[i] === 'memory' ) ops.memory = true; else if ( opsArray[i] === 'unique' ) ops.unique = true; else if ( opsArray[i] === 'stopOnFalse' ) ops.stopOnFalse = true; } } function hasName( name ) { var h = false; if ( typeof name === 'string' && name !== null && name.trim() !== '' && ar.length > 0 ) { for ( var i = 0; i < ar.length; i++ ) { if ( ar[i].name === name ) { h = true; break; } } } return h; } // add a function this.add = function ( fn ) { if ( typeof fn === 'function' ) { if ( ops.unique ) { // check whether it had been added before if ( fn.name !== '' && hasName( fn.name ) ) { return this; } } ar.push( fn ); if ( ops.memory ) { // after added , call it immediately fn.call( this, lastArgs ); } } return this; }; // remove a function this.remove = function ( fn ) { if ( typeof ( fn ) === 'function' && fn.name !== '' && ar.length > 0 ) { for ( var i = 0; i < ar.length; i++ ) { if ( ar[i].name === fn.name ) { ar.splice( i, 1 ); } } } return this; }; // remove all functions this.empty = function () { ar.length = 0; return this; }; // check whether it includes a specific function this.has = function ( fn ) { var f = false; if ( typeof ( fn ) === 'function' && fn.name !== '' && ar.length > 0 ) { for ( var i = 0; i < ar.length; i++ ) { if ( ar[i].name === fn.name ) { f = true; break; } } } return f; }; this.disable = function () { _disabled = true; return this; }; this.disabled = function () { return _disabled; }; this.fired = function () { return firedTimes > 0; }; function _fire( context, args ) { if ( _disabled || ops.once && firedTimes > 0 || _locked ) { return; } if ( ar.length > 0 ) { var r; for ( var i = 0; i < ar.length; i++ ) { r = ar[i].call( context, args ); if ( ops.stopOnFalse && r === false ) { break; } } } firedTimes++; if ( ops.memory ) { lastArgs = args; } }; this.fireWith = function ( context, args ) { context = context || this; _fire( context, args ); return this; }; this.fire = function ( args ) { _fire( this, args ); return this; }; this.lock = function () { _locked = true; return this; }; this.locked = function () { return _locked; }; }; // exposed to global as a factory method window.callbacks = function ( options ) { return new Callbacks( options ); }; } )( window );