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選擇器引擎，文化苦旅讀後感（http://www.simayi.net/duhougan/5043.html）心得體會，用於查找與選擇器表達式匹配的元素集合）遍歷文檔，查找與之匹配的DOM元素，並建立一個包含了這些DOM元素引用的jQuery對象。
瀏覽器功能測試模塊提供了針對不一樣瀏覽器功能和bug的測試結果，其餘模塊則基於這些測試結果來解決瀏覽器之間的兼容性問題。
在底層支持模塊中，回調函數列表模塊用於加強對回調函數的管理，支持添加、移除、觸發、鎖定、禁用回調函數等功能；異步隊列模塊用於解耦異步任務和回調函數，它在回調函數列表的基礎上爲回調函數增長了狀態，並提供了多個回調函數列表，支持傳播任意同步或異步回調函數的成功或失敗狀態；數據緩存模塊用於爲DOM元素和Javascript對象附加任意類型的數據；隊列模塊用於管理一組函數，支持函數的入隊和出隊操做，並確保函數按順序執行，它基於數據緩存模塊實現。
在功能模塊中，事件系統提供了統一的事件綁定、響應、手動觸發和移除機制，它並無將事件直接綁定到DOM元素上，而是基於數據緩存模塊來管理事件；Ajax模塊容許從服務器上加載數據，而不用刷新頁面，它基於異步隊列模塊來管理和觸發回調函數；動畫模塊用於向網頁中添加動畫效果，它基於隊列模塊來管理和執行動畫函數；屬性操做模塊用於對HTML屬性和DOM屬性進行讀取、設置和移除操做；DOM遍歷模塊用於在DoM樹中遍歷父元素、子元素和兄弟元素；DOM操做模塊用於插入、移除、複製和替換DOM元素；樣式操做模塊用於獲取計算樣式或設置內聯樣式；座標模塊用於讀取或設置DOM元素的文檔座標；尺寸模塊用於獲取DOM元素的高度和寬度。