jQuery.Callbacks之demo

　　jQuery.Callbacks是jquery在1.7版本之後加入的，是從1.6版中的_Deferred對象中抽離的，主要用來進行函數隊列的add、remove、fire、lock等操作，並提供once、memory、unique、stopOnFalse四個option進行一些特殊的控制，這是jquery的官方文檔：http://api.jquery.com/jQuery.Callbacks/

　　這個函數常見的應用場景是事件觸發機制，也就是設計模式中的觀察者（發佈、訂閱機制），目前Callbacks對象用於queue、ajax、Deferred對象中，這篇文章主要是一些簡單的demo：

　　1、不傳入任何參數，調用add的時候將函數add到內部的list中，調用fire的時候順序觸發list中的回調函數

function fn1(val){
    console.log('fn1 says:' + val);
}
function fn2(val){
    console.log('fn2 says ' + val);
}
var cbs = $.Callbacks();
cbs.add(fn1);
//fn1 says:foo
cbs.fire('foo');
cbs.add(fn2);
//fn1 says:bar
//fn2 says bar
cbs.fire('bar');

　　2、構造函數傳入once，回調函數列表只被fire一次

function fn1(val){
    console.log('fn1 says ' + val);
}
var cbs = $.Callbacks('once');
cbs.add(fn1);
//fn1 says foo 
cbs.fire('foo');
cbs.fire('foo');

　　3、構造函數傳入memory，這個選項剛開始接觸時有點費解，下面拿個具體例子說明一下

function fn1(val){
    console.log('fn1 says ' + val);
}
function fn2(val){
    console.log('fn2 says ' + val);
}
var cbs = $.Callbacks('memory');
cbs.add(fn1);
//第一次fire會緩存傳入的參數
//fn1 says foo
cbs.fire('foo');
//fire過一次之後，以後的add都會自動調用fire，傳入的參數是上次fire傳入的'foo'
//fn2 says foo
cbs.add(fn2);
//此次fire的參數新傳入的'bar'
//fn1 says bar
//fn2 says bar
cbs.fire('bar');

 　　4、構造函數傳入unique，保證在add過程中沒有重複的函數

function fn1(val){
    console.log('fn1 says ' + val);
}
var cbs = $.Callbacks('unique');
cbs.add(fn1);
cbs.add(fn1);
//雖然添加了兩次，但因爲有unique這個選項，所以只會有一次輸出
//fn1 says foo 
cbs.fire('foo');

　　5、構造函數傳入stopOnFalse，當順序調用函數列表的時候，如果某一個函數的返回值爲false，則break

function fn1(val){
    console.log('fn1 says ' + val);
}
function fn2(val){
    console.log('fn2 says ' + val);
    return false;
}
function fn3(val){
    console.log('fn3 says ' + val);
}
var cbs = $.Callbacks('stopOnFalse');
cbs.add(fn1);
cbs.add(fn2);
cbs.add(fn3);
//雖然add了三個函數，但是因爲fn2的返回值是false，所以不會執行fn3這個函數
//fn1 says foo
//fn2 says foo
cbs.fire('foo');

　　上面是一些單選項的demo，下面來看幾個複合選項的例子

　　6、once、memory的組合，這個也是jquery中Deferred對象初始化大部分Callbacks對象的參數（爲什麼Deferred會用這對組合呢？因爲這個對象只能resolve或者reject一次，改變爲成功或者失敗的狀態之後不能再次改變，所以不能再次顯示調用fire，而只能通過add的方式繼續）

function fn1(val){
    console.log('fn1 says ' + val);
}
function fn2(val){
    console.log('fn2 says ' + val);
}
var cbs = $.Callbacks('once memory');
cbs.add(fn1);
//fn1 says foo 
cbs.fire('foo');
//因爲memory的緣故，此次add自動fire，並且因爲once和memory的共同原因，每次執行完之後函數隊列都自動清空，所以這次只執行fn2，不執行fn1
//fn2 says foo 
cbs.add(fn2)
//因爲once的緣故，顯示調用fire也不會執行，如果還想fire，則只能add
cbs.fire('bar');

　　7、memory stopOnFalse的組合

function fn1(val){
    console.log('fn1 says ' + val);
}
function fn2(val){
    console.log('fn2 says ' + val);
    return false;
}
function fn3(val){
    console.log('fn3 says ' + val);
}
var cbs = $.Callbacks('stopOnFalse memory');
cbs.add(fn1);
cbs.add(fn2);
cbs.add(fn3);
//因爲stopOnFalse的緣故，這裏執行fn2後的返回值是false，所以不會執行fn3
//fn1 says foo 
//fn2 says foo 
cbs.fire('foo');
cbs.add(fn2);
cbs.add(fn3);
//這裏其實內部的函數隊列是[fn1, fn2, fn3, fn2, fn3]，但因爲執行第一個fn2的返回值是false，所以[fn1, fn2, fn3, fn2, fn3]中標紅的函數不會執行
//fn1 says bar
//fn2 says bar
cbs.fire('bar');

　　這篇文章主要是幾個option的應用，下次會先對源代碼進行解讀，然後針對源代碼設計幾個更高級的應用，敬請期待