jQuery.Callbacks之demo

標籤：style   blog   http   color   io   ar   cti   div   

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:foocbs.fire(‘foo‘);cbs.add(fn2);//fn1 says:bar//fn2 says barcbs.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 foocbs.fire(‘foo‘);
//fire過一次之後，以後的add都會自動調用fire，傳入的參數是上次fire傳入的‘foo‘
//fn2 says foocbs.add(fn2);
//此次fire的參數新傳入的‘bar‘
//fn1 says bar
//fn2 says barcbs.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 foocbs.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，則只能addcbs.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 barcbs.fire(‘bar‘);

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