JQuery的Callbacks()函數的應用和技巧（圖）
JQuery的Callbacks()函數的應用和技巧（圖）
一個多用途的回調列表對象，提供了強大的的方式來管理回調函數列表。
$.Callbacks()的內部提供了jQuery的$.ajax() 和 $.Deferred() 基本功能組件。它可以用來作為類似基礎定義的新組件的功能。
$.Callbacks() 支持的方法，包括 callbacks.add(),callbacks.remove(), callbacks.fire() and callbacks.disable()等
詳細的API見： $.Callbacks API 比如：add | fire | fired | fireWith | has | disable | disabled | empty
$.Callbacks
我們通過調用$.Callbacks獲取到一個callback實例，如下
var cb = $.Callbacks();
1
當然也可以使用 new 關鍵字來實例化出這個對象
var cb = new $.Callbacks();
1
為了盡可能的節省代碼和避免混亂我們還是統一采用var cb = $.Callbacks();的方式去調用。
$.Callbacks(flgs)
同時，在實例化一個 cb 的時候，還可以傳遞一些參數，參數類型為一個可以使用空格分隔的字符串。
支持的 Flags描述:
這個 flags 參數是$.Callbacks()的一個可選參數, 結構為一個用空格標記分隔的標誌可選列表,用來改變回調列表中的行為 (比如. $.Callbacks( ‘unique stopOnFalse’ )).
可用的 flags:
參數名 描述
once 確保這個回調列表只執行一次(像一個遞延 Deferred).
memory 當函數隊列fire或fireWith一次過後，內部會記錄當前fire或fireWith的參數。當下次調用add的時候，會把記錄的參數傳遞給新添加的函數並立即執行這個新添加的函數。
unique 確保一次只能添加一個回調(所以有沒有在列表中的重復).
stopOnFalse 當一個回調返回false 時中斷調用
默認情況下，回調列表將像事件的回調列表中可以多次觸發。
如何在理想情況下應該使用的flags的例子，見下文：
實例
1. Once
function fn1(val) {console.log(val)};
function fn2(val) {console.log(val)};
var callbacks = $.Callbacks( "once" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
/*
output:
foo
*/
2. Memory
function fn1(val) {console.log(val)};
function fn2(val) {console.log("fn2 says:" + val)};
var callbacks = $.Callbacks( "memory" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );//Do immediately of fn2
//Do fn1 at this time
callbacks.fire( "bar" );
callbacks.remove( fn2 );//Do immediately of fn2
//Do fn1 at this time
callbacks.fire( "foobar" );
/*
output:
foo
fn2 says:foo
bar
fn2 says:bar
foobar
*/
3. Unique
var callbacks = $.Callbacks( "unique" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn1 ); // repeat addition will not usefull, only one fn1 exist.
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
/*
output:
foo
bar
fn2 says:bar
foobar
*/
4. 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() 支持一個列表的flags而不僅僅是一個，設置幾個flags，有一個累積效應，類似“&&”。這意味著它可能結合創建回調名單，unique 和確保如果名單已經觸發，將有更多的回調調用最新的觸發值 (i.e.$.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
*/
Flag結合體是使用的$.Callbacks()內部的.done() 和 .fail()一個遞延容器-它們都使用 $.Callbacks(‘memory once’).
$.Callbacks 方法也可以被分離, 為方便起見應該有一個需要，定義簡寫版本：
var callbacks = $.Callbacks(),
add = callbacks.add,
remove = callbacks.remove,
fire = callbacks.fire;
add( fn1 );
fire( "hello world");
remove( fn1 );
jQuery：
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，並且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
jQuery的模塊可以分為3部分：入口模塊、底層支持模塊和功能模塊。
在構造jQuery對象模塊中，如果在調用構造函數jQuery()創建jQuery對象時傳入了選擇器表達式，則會調用選擇器Sizzle（一款純JavaScript實現的CSS選擇器引擎，文化苦旅讀後感
瀏覽器功能測試模塊提供了針對不同瀏覽器功能和bug的測試結果，其他模塊則基於這些測試結果來解決瀏覽器之間的兼容性問題。
在底層支持模塊中，回調函數列表模塊用於增強對回調函數的管理，支持添加、移除、觸發、鎖定、禁用回調函數等功能；異步隊列模塊用於解耦異步任務和回調函數，它在回調函數列表的基礎上為回調函數增加了狀態，並提供了多個回調函數列表，支持傳播任意同步或異步回調函數的成功或失敗狀態；數據緩存模塊用於為DOM元素和Javascript對象附加任意類型的數據；隊列模塊用於管理一組函數，支持函數的入隊和出隊操作，並確保函數按順序執行，它基於數據緩存模塊實現。
在功能模塊中，事件系統提供了統一的事件綁定、響應、手動觸發和移除機制，它並沒有將事件直接綁定到DOM元素上，而是基於數據緩存模塊來管理事件；Ajax模塊允許從服務器上加載數據，而不用刷新頁面，它基於異步隊列模塊來管理和觸發回調函數；動畫模塊用於向網頁中添加動畫效果，它基於隊列模塊來管理和執行動畫函數；屬性操作模塊用於對HTML屬性和DOM屬性進行讀取、設置和移除操作；DOM遍歷模塊用於在DoM樹中遍歷父元素、子元素和兄弟元素；DOM操作模塊用於插入、移除、復制和替換DOM元素；樣式操作模塊用於獲取計算樣式或設置內聯樣式；坐標模塊用於讀取或設置DOM元素的文檔坐標；尺寸模塊用於獲取DOM元素的高度和寬度。
JQuery的Callbacks()函數的應用和技巧（圖）