加载中...

jQuery.callbacks()1.7+


概述    jQuery.Callbacks( flags )

返回值:Callbacks

描述:一个多用途的回调列表对象,提供了强大的的方式来管理回调函数列表。

  • V : 1.7jQuery.Callbacks( flags )

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

$.Callbacks()的内部提供了jQuery的$.ajax()$.Deferred() 基本功能组件。它可以用来作为类似基础定义的新组件的功能。

$.Callbacks() 支持的方法,包括 callbacks.add(),callbacks.remove(), callbacks.fire() and callbacks.disable().

示例

入门实例

以下是两个样品的方法命名fn1 and fn2:

jQuery 代码:
  1. function fn1( value ){
  2. console.log( value );
  3. }
  4. function fn2( value ){
  5. fn1("fn2 says:" + value);
  6. return false;
  7. }

这些可以添加为回调函数作为一个$.Callbacks的列表,并调用如下:

  1. var callbacks = $.Callbacks();
  2. callbacks.add( fn1 );
  3. callbacks.fire( "foo!" ); // outputs: foo!
  4. callbacks.add( fn2 );
  5. callbacks.fire( "bar!" ); // outputs: bar!, fn2 says: bar!

这样做的结果是,它使构造复杂的回调列表变得简单,输入值可以通过尽可能多的函数根据需要轻松使用。

用于以上的两个具体的方法: .add() 和 .fire() .add() 支持添加新的回调回调列表, 而.fire() 提供了一种用于处理在同一列表中的回调方法的途径.

另一种方法由$.Callbacks 的remove(),用于从回调列表中删除一个特定的回调。下面是.remove() 使用的一个示例:

  1. var callbacks = $.Callbacks();
  2. callbacks.add( fn1 );
  3. callbacks.fire( "foo!" ); // outputs: foo!
  4. callbacks.add( fn2 );
  5. callbacks.fire( "bar!" ); // outputs: bar!, fn2 says: bar!
  6. callbacks.remove(fn2);
  7. callbacks.fire( "foobar" );
  8. // only outputs foobar, as fn2 has been removed.

支持的 Flags实例

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

可用的 flags:

  • once: 确保这个回调列表只执行一次(像一个递延 Deferred).
  • memory: 保持以前的值和将添加到这个列表的后面的最新的值立即执行调用任何回调 (像一个递延 Deferred).
  • unique: 确保一次只能添加一个回调(所以有没有在列表中的重复).
  • stopOnFalse: 当一个回调返回false 时中断调用

默认情况下,回调列表将像事件的回调列表中可以多次触发。

如何在理想情况下应该使用的flags的示例,见下文:

 $.Callbacks( 'once' ):

  1. var callbacks = $.Callbacks( "once" );
  2. callbacks.add( fn1 );
  3. callbacks.fire( "foo" );
  4. callbacks.add( fn2 );
  5. callbacks.fire( "bar" );
  6. callbacks.remove( fn2 );
  7. callbacks.fire( "foobar" );
  8. /*
  9. output:
  10. foo
  11. */

 $.Callbacks( 'memory' ):

  1. var callbacks = $.Callbacks( "memory" );
  2. callbacks.add( fn1 );
  3. callbacks.fire( "foo" );
  4. callbacks.add( fn2 );
  5. callbacks.fire( "bar" );
  6. callbacks.remove( fn2 );
  7. callbacks.fire( "foobar" );
  8. /*
  9. output:
  10. foo
  11. fn2 says:foo
  12. bar
  13. fn2 says:bar
  14. foobar
  15. */

 $.Callbacks( 'unique' ):

  1. var callbacks = $.Callbacks( "unique" );
  2. callbacks.add( fn1 );
  3. callbacks.fire( "foo" );
  4. callbacks.add( fn1 ); // repeat addition
  5. callbacks.add( fn2 );
  6. callbacks.fire( "bar" );
  7. callbacks.remove( fn2 );
  8. callbacks.fire( "foobar" );
  9. /*
  10. output:
  11. foo
  12. bar
  13. fn2 says:bar
  14. foobar
  15. *//code>

 $.Callbacks( 'stopOnFalse' ):

  1. function fn1( value ){
  2. console.log( value );
  3. return false;
  4. }
  5. function fn2( value ){
  6. fn1("fn2 says:" + value);
  7. return false;
  8. }
  9. var callbacks = $.Callbacks( "stopOnFalse");
  10. callbacks.add( fn1 );
  11. callbacks.fire( "foo" );
  12. callbacks.add( fn2 );
  13. callbacks.fire( "bar" );
  14. callbacks.remove( fn2 );
  15. callbacks.fire( "foobar" );
  16. /*
  17. output:
  18. foo
  19. bar
  20. foobar
  21. */

因为$.Callbacks() 支持一个列表的flags而不仅仅是一个,设置几个flags,有一个累积效应,类似“&&”。这意味着它可能结合创建回调名单,unique确保如果名单已经触发,将有更多的回调调用最新的触发值 (i.e.$.Callbacks("unique memory")).

 $.Callbacks( 'unique memory' ):

  1. function fn1( value ){
  2. console.log( value );
  3. return false;
  4. }
  5. function fn2( value ){
  6. fn1("fn2 says:" + value);
  7. return false;
  8. }
  9. var callbacks = $.Callbacks( "unique memory" );
  10. callbacks.add( fn1 );
  11. callbacks.fire( "foo" );
  12. callbacks.add( fn1 ); // repeat addition
  13. callbacks.add( fn2 );
  14. callbacks.fire( "bar" );
  15. callbacks.add( fn2 );
  16. callbacks.fire( "baz" );
  17. callbacks.remove( fn2 );
  18. callbacks.fire( "foobar" );
  19. /*
  20. output:
  21. foo
  22. fn2 says:foo
  23. bar
  24. fn2 says:bar
  25. baz
  26. fn2 says:baz
  27. foobar
  28. */

Flag结合体是使用的$.Callbacks()内部的.done() 和 .fail()一个递延容器-它们都使用 $.Callbacks('memory once').

$.Callbacks 方法也可以被分离, 为方便起见应该有一个需要定义简写版本:

  1. var callbacks = $.Callbacks(),
  2. add = callbacks.add,
  3. remove = callbacks.remove,
  4. fire = callbacks.fire;
  5. add( fn1 );
  6. fire( "hello world");
  7. remove( fn1 );

$.Callbacks, $.Deferred and Pub/Sub

pub / sub( Observer模式)背后的一般思路 是促进应用程序的松散耦合。而比对其他对象的方法调用的单个对象,一个对象,而不是另一个对象的一个特定的任务或活动,并通知当它发生。观察家也被称为订阅者,我们指的出版商(或主体)观察对象。出版商事件发生时通知用户

作为一个组件$.Callbacks()创造能力,它可以实现一个pub / sub系统只使用回调列表。使用$.Callbacks作为主题队列,发布和订阅的主题系统可以实现如下:

  1. var topics = {};
  2. jQuery.Topic = function( id ) {
  3. var callbacks,
  4. method,
  5. topic = id && topics[ id ];
  6. if ( !topic ) {
  7. callbacks = jQuery.Callbacks();
  8. topic = {
  9. publish: callbacks.fire,
  10. subscribe: callbacks.add,
  11. unsubscribe: callbacks.remove
  12. };
  13. if ( id ) {
  14. topics[ id ] = topic;
  15. }
  16. }
  17. return topic;
  18. };

然后,可以很容易的使用这部分应用程序的发布和订阅感兴趣的事件:

  1. // Subscribers
  2. $.Topic( "mailArrived" ).subscribe( fn1 );
  3. $.Topic( "mailArrived" ).subscribe( fn2 );
  4. $.Topic( "mailSent" ).subscribe( fn1 );
  5. // Publisher
  6. $.Topic( "mailArrived" ).publish( "hello world!" );
  7. $.Topic( "mailSent" ).publish( "woo! mail!" );
  8. // Here, "hello world!" gets pushed to fn1 and fn2
  9. // when the "mailArrived" notification is published
  10. // with "woo! mail!" also being pushed to fn1 when
  11. // the "mailSent" notification is published.
  12. /*
  13. output:
  14. hello world!
  15. fn2 says: hello world!
  16. woo! mail!
  17. */

虽然这是有用的,可以采取进一步的实施。使用$.Deferreds,这是可能的,以确保发表者只为用户发布一次特别的任务已经完成(解决)通知。这可能是如何在实践中使用的一些进一步的评论,请参见下面的代码示例:

  1. // subscribe to the mailArrived notification
  2. $.Topic( "mailArrived" ).subscribe( fn1 );
  3. // create a new instance of Deferreds
  4. var dfd = $.Deferred();
  5. // define a new topic (without directly publishing)
  6. var topic = $.Topic( "mailArrived" );
  7. // when the deferred has been resolved, publish a
  8. // notification to subscribers
  9. dfd.done( topic.publish );
  10. // Here the Deferred is being resolved with a message
  11. // that will be passed back to subscribers. It's possible to
  12. // easily integrate this into a more complex routine
  13. // (eg. waiting on an ajax call to complete) so that
  14. // messages are only published once the task has actually
  15. // finished.
  16. dfd.resolve( "its been published!" );

还没有评论.