jQuery 教程
jQuery.Callbacks()方法
jQuery 雜項(xiàng)方法實(shí)例
向 $.Callbacks 的列表添加回調(diào)函數(shù)
$(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!" );
})
運(yùn)行代碼 ?
定義和用法
$.Callbacks() 指一個(gè)多用途的回調(diào)函數(shù)列表對(duì)象，提供了一種強(qiáng)大的方法來(lái)管理回調(diào)函數(shù)列對(duì)。
提示： $.Callbacks 是在 jQuery 內(nèi)部使用，如為 .ajax，$.Deferred 等組件提供基礎(chǔ)功能的函數(shù)。它也可以用在類似功能的一些組件中，如自己開(kāi)發(fā)的插件。
語(yǔ)法
$.Callbacks( flags )
| 參數(shù) | 描述 |
|---|---|
| flags | 可選。 String類型 一個(gè)用空格標(biāo)記分隔的可選列表,用來(lái)改變回調(diào)列表中的行為 |
更多實(shí)例
下面是使用 .remove() 從回調(diào)列表中刪除一個(gè)特定的回調(diào)的例子
實(shí)例
$(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 已經(jīng)被移除。
callbacks.fire( "foobar" );
})
運(yùn)行代碼 ?
支持的 Flags 參數(shù)
這個(gè) flags 參數(shù)是 $.Callbacks() 的一個(gè)可選參數(shù)， 結(jié)構(gòu)為一個(gè)用空格標(biāo)記分隔的標(biāo)志可選列表，用來(lái)改變回調(diào)列表中的行為 (比如. $.Callbacks( 'unique stopOnFalse' ))。
以下是可用的 flags:
| 參數(shù) | 描述 |
|---|---|
| once | 確保這個(gè)回調(diào)列表只執(zhí)行一次 |
| memory | 緩存上一次fire時(shí)的參數(shù)值，當(dāng)add()添加回調(diào)函數(shù)時(shí)，直接用上一次的參數(shù)值立刻調(diào)用新加入的回調(diào)函數(shù) |
| unique | 一個(gè)回調(diào)只會(huì)被添加一次，不會(huì)重復(fù)添加 |
| stopOnFalse | 某個(gè)回調(diào)函數(shù)返回false之后中斷后面的回調(diào)函數(shù) |
下面是 $.Callbacks( "once" ) 的一個(gè)例子
實(shí)例
$(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*/
})
運(yùn)行代碼 ?
下面是 $.Callbacks( "memory" ) 的一個(gè)例子
實(shí)例
$(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
*/
})
運(yùn)行代碼 ?
下面是 $.Callbacks( "unique" ) 的一個(gè)例子
實(shí)例
$(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
*/
})
運(yùn)行代碼 ?
下面是 $.Callbacks( "stopOnFalse" ) 的一個(gè)例子
實(shí)例
$(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
*/
})
運(yùn)行代碼 ?
$.Callbacks() 支持一個(gè)列表設(shè)置多個(gè)flags（標(biāo)識(shí)）而不僅僅是一個(gè)，有一個(gè)累積效應(yīng)，類似"&&"。
下面是 $.Callbacks( 'unique memory' ) 的一個(gè)例子
實(shí)例
$(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*/
})
運(yùn)行代碼 ?
$.Callbacks 方法也可以被分離, 例如：
實(shí)例
$(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*/
})
運(yùn)行代碼 ?
$.Callbacks, $.Deferred 和 Pub/Sub
pub / sub（觀察者模式）背后的一般思路是促進(jìn)應(yīng)用程序的松散耦合和高效通信。觀察家也被稱為訂閱者，它指向觀察對(duì)象。觀察者（Publisher）事件發(fā)生時(shí)通知用戶。
作為 $.Callbacks() 的創(chuàng)建組件的一個(gè)演示，只使用回調(diào)函數(shù)列表，就可以實(shí)現(xiàn) Pub/Sub 系統(tǒng)。將 $.Callbacks 作為一個(gè)文章隊(duì)列，可以向下面這樣，實(shí)現(xiàn)文章的發(fā)布和訂閱：
實(shí)例
$(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 );
// 發(fā)布者
$.Topic( "mailArrived" ).publish( "hello world!" );
$.Topic( "mailSent" ).publish( "woo! mail!" );
/*輸出:
hello world!
fn2 says: hello world!
woo! mail!*/
})
運(yùn)行代碼 ?
進(jìn)一步改進(jìn)使用 $.Deferreds，可以保證當(dāng)特定的任務(wù)被完成（或被解決）時(shí)，發(fā)布者只能向訂閱者發(fā)布通知。參見(jiàn)下面的示例代碼：
實(shí)例
$(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 );
// 創(chuàng)建一個(gè)新對(duì)象替代延遲$.Deferreds
var dfd = $.Deferred();
// 定義一個(gè)新的文章 (不直接發(fā)布)
var topic = $.Topic( "mailArrived" );
// 當(dāng)延遲被受理, 發(fā)布一個(gè)通知給訂閱者
dfd.done( topic.publish );
/*這里將被回傳給訂閱者的消息延遲被受理，
它盡可能整合了復(fù)雜的程序（例如等待一個(gè)
Ajax調(diào)用完成），所以事實(shí)上消息只發(fā)布了
一次。*/
// 完成。
dfd.resolve( "已經(jīng)被發(fā)布!" );
})
運(yùn)行代碼 ?
其他擴(kuò)展