jQuery.Callbacks()方法

jQuery 杂项方法jQuery 杂项方法

实例

向 $.Callbacks 的列表添加回调函数

$(function () { 
 function fn1( value ) {
 alert( value );
 }
 function fn2( value ) {
 fn1("fn2 says: " + value);
 return false;
 }
 var callbacks = $.Callbacks();
 callbacks.add( fn1 ); 
 // 输出: foo!
 callbacks.fire( "foo!" );
 callbacks.add( fn2 );
 // 输出: bar!, fn2 says: bar!
 callbacks.fire( "bar!" );
})

尝试一下 »

定义和用法

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

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


语法

$.Callbacks( flags )

参数描述
flags可选。 String类型 一个用空格标记分隔的可选列表,用来改变回调列表中的行为


实例

更多实例

下面是使用 .remove() 从回调列表中删除一个特定的回调的例子

实例

$(function () { 
 function fn1( value ) {
 alert( value );
 }
 function fn2( value ) {
 fn1("fn2 says: " + value);
 return false;
 }
 var callbacks = $.Callbacks();
 callbacks.add( fn1 );
 // 输出: foo!
 callbacks.fire( "foo!" );
 callbacks.add( fn2 ); 
 // 输出: bar!, fn2 says: bar!
 callbacks.fire( "bar!" );
 callbacks.remove( fn2 );
 // 只输出 foobar, fn2 已经被移除。
 callbacks.fire( "foobar" );
})

尝试一下 »


支持的 Flags 参数

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

参数描述
once确保这个回调列表只执行一次
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" );
 /*输出 :
 foo
 fn2 says:foo
 bar
 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" );
 /*输出:
 foo
 bar
 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" );
 /*输出:
 foo
 bar
 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" ); 
 /*输出:
 foo
 fn2 says:foo
 bar
 fn2 says:bar
 baz
 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( "已经被发布!" );
})

尝试一下 »


jQuery 杂项方法jQuery 杂项方法

0 个评论

要回复文章请先登录注册