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：

　　一、不傳入任何參數，調用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');

　　二、構造函數傳入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');

　　三、構造函數傳入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');

 　　四、構造函數傳入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');

　　五、構造函數傳入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，下面來看幾個複合選項的例子

　　六、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');

　　七、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的應用，下次會先對源代碼進行解讀，而後針對源代碼設計幾個更高級的應用，敬請期待