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' )
&nbsnbsp; {
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 & fire
var cb=new mycallbacks();
cb.add(fn1)
cb.add(fn2)
cb.add(fn3)
cb.fire('hello')
输出：
fn1 hello
fn2 hello
fn3 hello
2.测试remove
var 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 hello
fn2 hello
fn3 hello
----------------------------
fn1 hello
fn2 hello
2.测试has
var cb=new mycallbacks();
cb.add(fn1)
cb.add(fn2)
cb.add(fn3)
cb.has(fn1)
cb.has(fn3)
输出：
false
---------------
true
3.测试带参数的构造函数 : once
var 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 hello
cb.add(fn2) // 输出 : fn2 hello
cb.fire('hello')
输出 :
fn1 hello
fn2 hello
5.测试带参数的构造函数 : stoponfalse
var cb=new mycallbacks('stoponfalse')
cb.add(fn1)
cb.add(fn2)
cb.add(fn3)
cb.fire('hello')
输出：
fn1 hello
fn2 hello
6.测试带参数的构造函数 :unique
var cb=new mycallbacks('unique')
b.add(fn3)
b.add(fn3)
cb.fire('hello')
输出：
fn3 hello
7. 测试带组合参数的构造函数：四个设置参数可以随意组合，一下只测试全部组合的情况， 不然要写16个测试用例 t_t
var cb=new mycallbacks('once memory unique stoponfalse')
cb.add(fn1) // 输出： fn1
cb.add(fn2) // 输出： fn2
cb.add(fn3) // 输出： fn3
cb.fire('hello')
输出：
fn1 hello
fn2 hello
cb.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 )
flags
type: string
an 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 !== ''
nbsp; && 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 );
上一篇： 详解JS取出两个数组中的不同或相同元素
下一篇： PHP fopen函数用法实例讲解