jQuery.Callbacks() 方法
實例
向$.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 ( " 已經被發布! " ) ; } )
嘗試一下»