jQuery.Callbacks() 方法

定义和用法

$.Callbacks() 指一个多用途的回调函数列表对象，提供了一种强大的方法来管理回调函数队列。

提示： $.Callbacks 是在 jQuery 内部使用，如为 .ajax，$.Deferred 等组件提供基础功能的函数。它也可以用在类似功能的一些组件中，如自己开发的插件。

$ .Callbacks( flags ) // 输出: bar!, fn2 says: bar! callbacks . fire ( " bar! " ) ; callbacks . remove ( fn2 ) ; // 只输出 foobar, fn2 已经被移除。 callbacks . fire ( " foobar " ) ; 尝试一下 »

支持的 Flags 参数

这个 flags 参数是 $.Callbacks() 的一个可选参数，结构为一个用空格标记分隔的标志可选列表，用来改变回调列表中的行为 (比如. $.Callbacks( 'unique stopOnFalse' ))。
以下是可用的 flags:

确保这个回调列表只执行一次 memory 缓存上一次fire时的参数值，当add()添加回调函数时，直接用上一次的参数值立刻调用新加入的回调函数 unique 一个回调只会被添加一次，不会重复添加 stopOnFalse 某个回调函数返回false之后中断后面的回调函数

下面是 $.Callbacks( "once" ) 的一个例子

$ ( function ( ) { function fn1 ( value ) { alert ( value ) ; function fn2 ( value ) { fn1 ( " fn2 says: " + value ) ; return false ; var callbacks = $. Callbacks ( " once " ) ; callbacks . add ( fn1 ) ; callbacks . fire ( " foo " ) ; callbacks . add ( fn2 ) ; callbacks . fire ( " bar " ) ; callbacks . remove ( fn2 ) ; callbacks . fire ( " foobar " ) ; /* 只输出:foo */ 尝试一下 »

下面是 $.Callbacks( "memory" ) 的一个例子

$ ( function ( ) { function fn1 ( value ) { alert ( value ) ; function fn2 ( value ) { fn1 ( " fn2 says: " + value ) ; return false ; var callbacks = $. Callbacks ( " memory " ) ; callbacks . add ( fn1 ) ; callbacks . fire ( " foo " ) ; callbacks . add ( fn2 ) ; callbacks . fire ( " bar " ) ; callbacks . remove ( fn2 ) ; callbacks . fire ( " foobar " ) ; /* 输出 : fn2 says:foo fn2 says:bar foobar 尝试一下 »

下面是 $.Callbacks( "unique" ) 的一个例子

$ ( function ( ) { function fn1 ( value ) { alert ( value ) ; function fn2 ( value ) { fn1 ( " fn2 says: " + value ) ; return false ; var callbacks = $. Callbacks ( " unique " ) ; callbacks . add ( fn1 ) ; callbacks . fire ( " foo " ) ; callbacks . add ( fn1 ) ; // repeat addition callbacks . add ( fn2 ) ; callbacks . fire ( " bar " ) ; callbacks . remove ( fn2 ) ; callbacks . fire ( " foobar " ) ; /* 输出: fn2 says:bar foobar 尝试一下 »

下面是 $.Callbacks( "stopOnFalse" ) 的一个例子

$ ( function ( ) { function fn1 ( value ) { alert ( value ) ; return false ; function fn2 ( value ) { fn1 ( " fn2 says: " + value ) ; return false ; var callbacks = $. Callbacks ( " stopOnFalse " ) ; callbacks . add ( fn1 ) ; callbacks . fire ( " foo " ) ; callbacks . add ( fn2 ) ; callbacks . fire ( " bar " ) ; callbacks . remove ( fn2 ) ; callbacks . fire ( " foobar " ) ; /* 输出: foobar 尝试一下 »

$.Callbacks() 支持一个列表设置多个flags（标识）而不仅仅是一个，有一个累积效应，类似"&&"。
下面是 $.Callbacks( 'unique memory' ) 的一个例子

$ ( function ( ) { function fn1 ( value ) { alert ( value ) ; return false ; function fn2 ( value ) { fn1 ( " fn2 says: " + value ) ; return false ; var callbacks = $. Callbacks ( " unique memory " ) ; callbacks . add ( fn1 ) ; callbacks . fire ( " foo " ) ; callbacks . add ( fn1 ) ; // repeat addition callbacks . add ( fn2 ) ; callbacks . fire ( " bar " ) ; callbacks . add ( fn2 ) ; callbacks . fire ( " baz " ) ; callbacks . remove ( fn2 ) ; callbacks . fire ( " foobar " ) ; /* 输出: fn2 says:foo fn2 says:bar fn2 says:baz foobar */ 尝试一下 »

$.Callbacks 方法也可以被分离, 例如：

$ ( function ( ) { function fn1 ( value ) { alert ( value ) ; var callbacks = $. Callbacks ( ) , add = callbacks . add , remove = callbacks . remove , fire = callbacks . fire ; add ( fn1 ) ; fire ( " hello world " ) ; remove ( fn1 ) ; /* 输出:hello world */ 尝试一下 »

$.Callbacks, $.Deferred 和 Pub/Sub

pub / sub（观察者模式）背后的一般思路是促进应用程序的松散耦合和高效通信。观察家也被称为订阅者，它指向观察对象。观察者（Publisher）事件发生时通知用户。

作为 $.Callbacks() 的创建组件的一个演示，只使用回调函数列表，就可以实现 Pub/Sub 系统。将 $.Callbacks 作为一个文章队列，可以向下面这样，实现文章的发布和订阅：

$ ( function ( ) { function fn1 ( value ) { alert ( value ) ; return false ; function fn2 ( value ) { fn1 ( " fn2 says: " + value ) ; return false ; 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 ( fn1 ) ; $. Topic ( " mailArrived " ) . subscribe ( fn2 ) ; $. Topic ( " mailSent " ) . subscribe ( fn1 ) ; // 发布者 $. Topic ( " mailArrived " ) . publish ( " hello world! " ) ; $. Topic ( " mailSent " ) . publish ( " woo! mail! " ) ; /* 输出: hello world! fn2 says: hello world! woo! mail! */ 尝试一下 »

进一步改进使用 $.Deferreds，可以保证当特定的任务被完成（或被解决）时，发布者只能向订阅者发布通知。参见下面的示例代码：

$ ( function ( ) { function fn1 ( value ) { alert ( value ) ; return false ; function fn2 ( value ) { fn1 ( " fn2 says: " + value ) ; return false ; 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 ; // 订阅 mailArrived 通知 $. Topic ( " mailArrived " ) . subscribe ( fn1 ) ; // 创建一个新对象替代延迟$.Deferreds var dfd = $. Deferred ( ) ; // 定义一个新的文章 (不直接发布) var topic = $. Topic ( " mailArrived " ) ; // 当延迟被受理, 发布一个通知给订阅者 dfd . done ( topic . publish ) ; /* 这里将被回传给订阅者的消息延迟被受理，它尽可能整合了复杂的程序（例如等待一个 Ajax调用完成），所以事实上消息只发布了一次。 */ // 完成。 dfd . resolve ( " 已经被发布! " ) ; 尝试一下 »