jQuery $.callbacks() 方法概述

示例

入門描述:

以下是兩個(gè)樣品的方法命名fn1 and fn2:

jQuery 代碼:

function fn1( value ){
    console.log( value );
}

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

這些可以添加為回調(diào)函數(shù)作為一個(gè)$.Callbacks的列表，并調(diào)用如下:

var callbacks = $.Callbacks();
callbacks.add( fn1 );
callbacks.fire( "foo!" ); // outputs: foo!

callbacks.add( fn2 );
callbacks.fire( "bar!" ); // outputs: bar!, fn2 says: bar!

這樣做的結(jié)果是，它使構(gòu)造復(fù)雜的回調(diào)列表變得簡(jiǎn)單，輸入值可以通過盡可能多的函數(shù)根據(jù)需要輕松使用。

用于以上的兩個(gè)具體的方法： .add() 和 .fire() .add() 支持添加新的回調(diào)回調(diào)列表, 而.fire() 提供了一種用于處理在同一列表中的回調(diào)方法的途徑.

另一種方法由$.Callbacks 的remove()，用于從回調(diào)列表中刪除一個(gè)特定的回調(diào)。下面是.remove() 使用的一個(gè)例子:

var callbacks = $.Callbacks();
callbacks.add( fn1 );
callbacks.fire( "foo!" ); // outputs: foo!

callbacks.add( fn2 );
callbacks.fire( "bar!" ); // outputs: bar!, fn2 says: bar!

callbacks.remove(fn2);
callbacks.fire( "foobar" ); 

// only outputs foobar, as fn2 has been removed.

支持的 Flags描述:

這個(gè) flags 參數(shù)是$.Callbacks()的一個(gè)可選參數(shù), 結(jié)構(gòu)為一個(gè)用空格標(biāo)記分隔的標(biāo)志可選列表,用來改變回調(diào)列表中的行為 (比如. $.Callbacks( 'unique stopOnFalse' )).

 

可用的 flags:

• once: 確保這個(gè)回調(diào)列表只執(zhí)行一次(像一個(gè)遞延 Deferred).
• memory: 保持以前的值和將添加到這個(gè)列表的后面的最新的值立即執(zhí)行調(diào)用任何回調(diào) (像一個(gè)遞延 Deferred).
• unique: 確保一次只能添加一個(gè)回調(diào)(所以有沒有在列表中的重復(fù)).
• stopOnFalse: 當(dāng)一個(gè)回調(diào)返回false 時(shí)中斷調(diào)用

默認(rèn)情況下，回調(diào)列表將像事件的回調(diào)列表中可以多次觸發(fā)。

如何在理想情況下應(yīng)該使用的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 start with b start with b start with b start with b start with b start with b
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 start with b start with b start with b start with b start with b start with b
fn2 says:bar
foobar
*//code>

 

$.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 start with b start with b start with b start with b start with b start with b
foobar
*/

因?yàn)?.Callbacks() 支持一個(gè)列表的flags而不僅僅是一個(gè)，設(shè)置幾個(gè)flags，有一個(gè)累積效應(yīng)，類似“&&”。這意味著它可能結(jié)合創(chuàng)建回調(diào)名單，unique 和確保如果名單已經(jīng)觸發(fā)，將有更多的回調(diào)調(diào)用最新的觸發(fā)值 (i.e.$.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 start with b start with b start with b start with b start with b start with b
fn2 says:bar
baz start with b start with b start with b start with b start with b start with b
fn2 says:baz
foobar
*/

Flag結(jié)合體是使用的$.Callbacks()內(nèi)部的.done() 和 .fail()一個(gè)遞延容器-它們都使用 $.Callbacks('memory once').

$.Callbacks 方法也可以被分離, 為方便起見應(yīng)該有一個(gè)需要定義簡(jiǎn)寫版本：

var callbacks = $.Callbacks(),
    add = callbacks.add,
    remove = callbacks.remove,
    fire = callbacks.fire;

add( fn1 ); start with a start with a start with a start with a start with a start with a
fire( "hello world");
remove( fn1 );

$.Callbacks, $.Deferred and Pub/Sub

pub / sub（ Observer模式）背后的一般思路 是促進(jìn)應(yīng)用程序的松散耦合。而比對(duì)其他對(duì)象的方法調(diào)用的單個(gè)對(duì)象，一個(gè)對(duì)象，而不是另一個(gè)對(duì)象的一個(gè)特定的任務(wù)或活動(dòng)，并通知當(dāng)它發(fā)生。觀察家也被稱為訂閱者，我們指的出版商（或主體）觀察對(duì)象。出版商事件發(fā)生時(shí)通知用戶

作為一個(gè)組件$.Callbacks()創(chuàng)造能力，它可以實(shí)現(xiàn)一個(gè)pub / sub系統(tǒng)只使用回調(diào)列表。使用$.Callbacks作為主題隊(duì)列，發(fā)布和訂閱的主題系統(tǒng)可以實(shí)現(xiàn)如下:

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

然后，可以很容易的使用這部分應(yīng)用程序的發(fā)布和訂閱感興趣的事件：

// 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!
*/

雖然這是有用的，可以采取進(jìn)一步的實(shí)施。使用$.Deferreds,這是可能的，以確保發(fā)表者只為用戶發(fā)布一次特別的任務(wù)已經(jīng)完成（解決）通知。這可能是如何在實(shí)踐中使用的一些進(jìn)一步的評(píng)論，請(qǐng)參見下面的代碼示例：

// 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( "its been published!" );