當前位置: 首頁>>編程示例 >>用法及示例精選 >>正文

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()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。