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 雜項方法