当前位置: 首页>>编程示例 >>用法及示例精选 >>正文

JQuery jQuery.Callbacks()用法及代码示例

用法 
jQuery.Callbacks( flags ) => Callbacks

说明：multi-purpose 回调列表对象，它提供了一种强大的方法来管理回调列表。

  • 添加的版本：1.7jQuery.Callbacks( flags )

    • flags
      类型：String
      一个可选的空格分隔标志列表，用于更改回调列表的行为方式。

$.Callbacks() 函数在内部用于提供 jQuery $.ajax() 和 $.Deferred() 组件背后的基本函数。它可以用作定义新组件函数的类似基础。

$.Callbacks() 支持多种方法，包括 callbacks.add() 、 callbacks.remove() 、 callbacks.fire() 和 callbacks.disable() 。

入门

以下是名为 fn1 和 fn2 的两个示例方法：

function fn1( value ) {
  console.log( value );
}
 
function fn2( value ) {
  console.log( "fn2 says: " + value );
  return false;
}

这些可以作为回调添加到 $.Callbacks 列表并按如下方式调用：

var callbacks = $.Callbacks();
callbacks.add( fn1 );
 
// Outputs: foo!
callbacks.fire( "foo!" );
 
callbacks.add( fn2 );
 
// Outputs: bar!, fn2 says: bar!
callbacks.fire( "bar!" );

这样做的结果是，构建复杂的回调列表变得很简单，其中输入值可以轻松地传递给所需的尽可能多的函数。

上面使用了两种特定方法：.add() 和 .fire()。 .add() 方法支持将新的回调添加到回调列表中，而.fire() 方法执行添加的函数并提供一种方法来传递要由同一列表中的回调处理的参数。

$.Callbacks 支持的另一种方法是 .remove() ，它能够从回调列表中删除特定的回调。这是一个使用.remove()的实际示例：

var callbacks = $.Callbacks();
callbacks.add( fn1 );
 
// Outputs: foo!
callbacks.fire( "foo!" );
 
callbacks.add( fn2 );
 
// Outputs: bar!, fn2 says: bar!
callbacks.fire( "bar!" );
 
callbacks.remove( fn2 );
 
// Only outputs foobar, as fn2 has been removed.
callbacks.fire( "foobar" );

支持的标志

flags 参数是 $.Callbacks() 的可选参数，其结构为以空格分隔的字符串列表，可更改回调列表的行为方式(例如 $.Callbacks( "unique stopOnFalse" ) )。

可能的标志：

  • once ：确保回调列表只能被触发一次(如延迟)。
  • memory ：跟踪以前的值，并在列表被触发后立即使用最新的 "memorized" 值(如 Deferred)调用添加的任何回调。
  • unique ：确保回调只能添加一次(因此列表中没有重复项)。
  • stopOnFalse：当回调返回 false 时中断调用。

默认情况下，回调列表将像事件回调列表一样，可以多次使用"fired"。

有关如何理想地使用 flags 的示例，请参见下文：

$.Callbacks( "once" )：

var callbacks = $.Callbacks( "once" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
 
/*
output:
foo
*/

$.Callbacks( "memory" )：

var callbacks = $.Callbacks( "memory" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
 
/*
output:
foo
fn2 says:foo
bar
fn2 says:bar
foobar
*/

$.Callbacks( "unique" )：

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" );
 
/*
output:
foo
bar
fn2 says:bar
foobar
*/

$.Callbacks( "stopOnFalse" )：

function fn1( value ) {
  console.log( 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" );
 
/*
output:
foo
bar
foobar
*/

因为$.Callbacks()支持标志列表而不仅仅是一个，设置多个标志具有类似于"&&"的累积效果。这意味着可以组合标志来创建回调列表，比如说，两者都是独特和确保列表是否已被触发，添加更多回调将使用最新触发的值调用它(IE。$.Callbacks("unique memory"))。

$.Callbacks( 'unique memory' )：

function fn1( value ) {
  console.log( 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" );
 
/*
output:
foo
fn2 says:foo
bar
fn2 says:bar
baz
fn2 says:baz
foobar
*/

带有 $.Callbacks() 的标志组合在 jQuery 内部用于 Deferred 上的 .done() 和 .fail() 函数——两者都使用 $.Callbacks('memory once') 。

$.Callbacks的方法也可以分离，如果为了方便需要定义short-hand版本：

var callbacks = $.Callbacks(),
  add = callbacks.add,
  remove = callbacks.remove,
  fire = callbacks.fire;
 
add( fn1 );
fire( "hello world" );
remove( fn1 );

$.Callbacks、$.Deferred 和 Pub/Sub

pub/sub(发布/订阅，或观察者模式)背后的总体思想是促进应用程序中的松散耦合。不是单个对象调用其他对象的方法，而是一个对象订阅另一个对象的特定任务或活动，并在它发生时得到通知。观察者也称为订阅者，我们将被观察的对象称为发布者(或主题)。发布者在事件发生时通知订阅者。

为了演示 $.Callbacks() 的 component-creation 函数，可以仅使用回调列表来实现 Pub/Sub 系统。使用$.Callbacks作为主题队列，一个主题发布和订阅系统可以实现如下：

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;
};

然后，您的应用程序的某些部分可以很容易地使用它来发布和订阅感兴趣的事件：

// Subscribers
$.Topic( "mailArrived" ).subscribe( fn1 );
$.Topic( "mailArrived" ).subscribe( fn2 );
$.Topic( "mailSent" ).subscribe( fn1 );
 
// Publisher
$.Topic( "mailArrived" ).publish( "hello world!" );
$.Topic( "mailSent" ).publish( "woo! mail!" );
 
// Here, "hello world!" gets pushed to fn1 and fn2
// when the "mailArrived" notification is published
// with "woo! mail!" also being pushed to fn1 when
// the "mailSent" notification is published.
 
/*
output:
hello world!
fn2 says: hello world!
woo! mail!
*/

虽然这很有用，但可以进一步实施。使用 $.Deferreds ，可以确保发布者仅在完成(解决)特定任务后才向订阅者发布通知。有关如何在实践中使用它的进一步评论，请参见下面的代码示例：

// Subscribe to the mailArrived notification
$.Topic( "mailArrived" ).subscribe( fn1 );
 
// Create a new instance of Deferreds
var dfd = $.Deferred();
 
// Define a new topic (without directly publishing)
var topic = $.Topic( "mailArrived" );
 
// When the deferred has been resolved, publish a
// notification to subscribers
dfd.done( topic.publish );
 
// Here the Deferred is being resolved with a message
// that will be passed back to subscribers. It's possible to
// easily integrate this into a more complex routine
// (eg. waiting on an Ajax call to complete) so that
// messages are only published once the task has actually
// finished.
dfd.resolve( "it's been published!" );

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 jQuery.Callbacks()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。