avaScript語言將任務(wù)的執(zhí)行模式可以分成兩種:同步(Synchronous)和異步(Asychronous)。
“同步模式”就是一個任務(wù)完成之后,后邊跟著一個任務(wù)接著執(zhí)行;程序的執(zhí)行順序和排列順序是一直的;”異步模式”則完全不同,每一個任務(wù)都有一個或者多個回調(diào)函數(shù)(callback),前一個任務(wù)結(jié)束的時候,不是執(zhí)行下一個任務(wù),二十執(zhí)行回調(diào)函數(shù),后一個任務(wù)則是不等前一個任務(wù)結(jié)束就執(zhí)行,所以程序的執(zhí)行順序與任務(wù)順序不一致的,異步的。
在瀏覽器端,耗時時間長的操作都應(yīng)該異步執(zhí)行,避免瀏覽器數(shù)去響應(yīng),最好的例子就是ajax操作。
在服務(wù)器端,“異步模式”甚至是唯一的模式,因為執(zhí)行環(huán)境是單線程的,如果允許同步執(zhí)行所有的http請求,服務(wù)器會急劇下降,很快會失去響應(yīng)。
“異步模式”一共有4種方法,這4種方法可以寫出結(jié)構(gòu)更合理,性能更出色,維護(hù)更方便的js代碼。這四種模式分別為:
一、回調(diào)函數(shù)(callback);
二、事件監(jiān)聽(Listener);
三、觀察者模式;
四、promise對象
一、回調(diào)函數(shù)(callback)
異步的最基本的方法
假設(shè)有兩個函數(shù),f1和f2,后者等待前者執(zhí)行結(jié)果。
f1();
f2();
如果f1是一個很耗時的任務(wù),可以考慮改寫f1,把f2寫成f1的回調(diào)函數(shù)。
function f1(callback){ settimeout(function(){ //f1代碼 callback(); },1000); }
執(zhí)行代碼變成下面的樣子
f1(f2);
采用鄭重方式,把同步操作變成了異步操作,f1不會堵塞程序的運行,先執(zhí)行程序的主要邏輯,將耗時的操作推遲執(zhí)行。
其實我理解起來也很費勁,因為上大學(xué)后第一門語言是c,然后是C++,再后來是java,在傳統(tǒng)函數(shù)中以參數(shù)形式輸入數(shù)據(jù),并且使用返回語句返回值。理論上,在函數(shù)結(jié)尾處有一個return返回語句,結(jié)構(gòu)上就是:一個輸入點和一個輸出點。函數(shù)的本質(zhì)就是輸入和輸出之間實現(xiàn)過程的映射。
但是,當(dāng)函數(shù)的實現(xiàn)過程很漫長,你選擇等待函數(shù)處理完成之后處理,還是使用回調(diào)函數(shù)進(jìn)行異步處理呢?
答:這種情況下,使用回調(diào)函數(shù)變得至關(guān)重要,例如:ajax請求。若是使用回調(diào)函數(shù)進(jìn)行處理,艾瑪就可以繼續(xù)進(jìn)行其他任務(wù),而無需空等等。實際開發(fā)中,經(jīng)常在JavaScript中使用異步調(diào)用,甚至在這里推薦使用。
num=Math.ceil(Math.random()*(a-b)+10,20,"隨機數(shù)"+
a=10 *=2 f=f();
ajax的一個回調(diào)函數(shù)例子。
$.ajax({ url:"test.json", type:"GET", data:{username:$("#username").val()}, dataType:"json", beforSend:function(){ //禁用按鈕防止重復(fù)提交 $("#submit").attr({disabled:"disabled"}); }, complete:function(msg){ //請求完成后調(diào)用的回調(diào)函數(shù) }, error:function(msg){ //請求失敗時被調(diào)用的回調(diào)函數(shù) } Success:function(msg){ //請求成功后調(diào)用的回調(diào)函數(shù) } });
(1)回調(diào)函數(shù)定義:函數(shù)A作為參數(shù)(函數(shù)引用)傳遞到另外一個函數(shù)B,并且這個函數(shù)B執(zhí)行函數(shù)A,我們就叫函數(shù)A叫做回調(diào)函數(shù),如果沒有名稱(函數(shù)表達(dá)式),我們就叫它匿名回調(diào)函數(shù)。
(2)回調(diào)函數(shù)優(yōu)點:簡單,容易理解和 部署。
缺點:不利于代碼的閱讀,和維護(hù),各部分之間高度耦合,流程會很混亂,而且每一個任務(wù)只能指定一個回調(diào)函數(shù)。
二、事件監(jiān)聽
采用事件驅(qū)動模式。
任務(wù)的執(zhí)行不取決代碼的順序,而取決于某一個事件是否發(fā)生。
監(jiān)聽函數(shù)有:on,bind,listen,addEventListener,observe
還是以f1和f2為例。首先,為f1綁定一個事件(采用jquery寫法)。
f1.on('done',f2);
上面代碼意思是,當(dāng)f1發(fā)生done事件,就執(zhí)行f2。
然后對f1進(jìn)行改寫:
function f1(){ settimeout(function(){ //f1的任務(wù)代碼 f1.trigger('done'); },1000); }
f1.trigger('done')表示,執(zhí)行完成后,立即觸發(fā)done事件,從而開始執(zhí)行f2.
這種方法的優(yōu)點:比較容易理解,可以綁定多個事件,每一個事件可以指定多個回調(diào)函數(shù),而且可以去耦合,有利于實現(xiàn)模塊化。
這種方法的缺點:整個程序都要變成事件驅(qū)動型,運行流程會變得不清晰。
事件監(jiān)聽方法:
(1)onclick方法
element.onclick=function(){ //處理函數(shù) }
優(yōu)點:寫法兼容到主流瀏覽器
缺點:當(dāng)同一個element元素綁定多個事件時,只有最后一個事件會被添加
例如:
element.onclick=handler1; element.onclick=handler2; element.onclick=handler3;
上訴只有handler3會被添加執(zhí)行,所以我們使用另外一種方法添加事件
(2)attachEvent和addEvenListener方法
//IE:attachEventelment.attachEvent("onclick",handler1); elment.attachEvent("onclick",handler2); elment.attachEvent("onclick",handler3);
上述三個方法執(zhí)行順序:3-2-1;
//標(biāo)準(zhǔn)addEventListenerelment.addEvenListener("click",handler1,false); elment.addEvenListener("click",handler2,false); elment.addEvenListener("click",handler3,false);
執(zhí)行順序:1-2-3;
PS:該方法的第三個參數(shù)是泡沫獲取,是一個布爾值:當(dāng)為false時表示由里向外,true表示由外向里。
<div id="id1"> <div id="id2"></div> </div>document.getElementById("id1").addEventListener("click",function(){console.log('id1');},false); document.getElementById("id2").addEventListener("click",function(){console.log('id2');},false);//點擊id=id2的div,先在sonsole中輸出,先輸出id2,在輸出id1document.getElementById("id1").addEventListener("click",function(){console.log('id1');},false); document.getElementById("id2").addEventListener("click",function(){console.log('id2');},true);//點擊id=id2的div,先在sonsole中國輸出,先輸出id1,在輸出id2
(三)DOM方法addEventListener()和removeListenner()
addEventListenner()和removeListenner()表示用來分配和刪除事件的函數(shù)。這兩種方法都需要三種參數(shù),分別為:
string(事件名稱),要觸發(fā)事件的函數(shù)function,指定事件的處理函數(shù)的時期或者階段(boolean)。
例子見(二)
(四)通用的時間添加方法:
on:function(elment,type,handler){ //添加事件 return element.attachEvent?elment.attachEvent("on"+type,handler):elment.addEventListener(type,handler,false); }
冒泡事件和事件捕獲區(qū)別,可以參考:http:/www.cnblogs.com/chengxs/p/6388779.html
三、觀察者模式
觀察者模式也叫發(fā)布訂閱模式,它定義了一種一對多的關(guān)系,讓多個觀察者同時對監(jiān)聽某一個主題對象,這一個主題對象的狀態(tài)變化就會通知多有的觀察者對象,使得他們能夠自動更新自己。
優(yōu)點:1、支持簡單的廣播通信,自動通知所有已經(jīng)訂閱過的對象。
2、頁面載入后,目標(biāo)對象很容易與觀察者存在一種動態(tài)關(guān)聯(lián),增加靈活性。
3、目標(biāo)對象與觀察者之間的抽象耦合關(guān)系能夠單獨擴展以及重用。
四、promise對象(promise 模式)
(1)promise對象是commonJS工作組提出的一種規(guī)范,一種模式,目的是為了異步編程提供統(tǒng)一接口。
(2)promise是一種模式,promise可以幫忙管理異步方式返回的代碼。他講代碼進(jìn)行封裝并添加一個類似于事件處理的管理層。我們可以使用promise來注冊代碼,這些代碼會在在promise成功或者失敗后運行。
(3)promise完成之后,對應(yīng)的代碼也會執(zhí)行。我們可以注冊任意數(shù)量的函數(shù)再成功或者失敗后運行,也可以在任何時候注冊事件處理程序。
(4)promise有兩種狀態(tài):1、等待(pending);2、完成(settled)。
promise會一直處于等待狀態(tài),直到它所包裝的異步調(diào)用返回/超時/結(jié)束。
(5)這時候promise狀態(tài)變成完成。完成狀態(tài)分成兩類:1、解決(resolved);2、拒絕(rejected)。
(6)promise解決(resolved):意味著順利結(jié)束。promise拒絕(rejected)意味著沒有順利結(jié)束。
//promisevar p=new Promise(function(resolved))//在這里進(jìn)行處理。也許可以使用ajaxsetTimeout(function(){ var result=10*5; if(result===50){ resolve(50); }else{ reject(new Error('Bad Math')); } },1000); }); p.then(function(result){ console.log('Resolve with a values of %d',result); }); p.catch(function(){ console.error('Something went wrong'); });
(1)代碼的 關(guān)鍵在于setTimeout()的調(diào)用。
(2)重要的是,他調(diào)用了函數(shù)resolve()和reject()。resolve()函數(shù)告訴promise用戶promise已解決;reject()函數(shù)告訴promise用戶promise未能順利完成。
(3)另外還有一些使用了promise代碼。注意then和catch用法,可以將他們想象成onsucess和onfailure事件的處理程序。
(4)巧妙地方是,我們將promise處理與狀態(tài)分離。也就是說,我們可以調(diào)用p.then(或者p.catch)多少次都可以,不管promise是什么狀態(tài)。
(5)promise是ECMAscript 6管理異步代碼的標(biāo)準(zhǔn)方式,javascript庫使用promise管理ajax,動畫,和其他典型的異步交互。
簡單的說,它的思想是:每一個異步任務(wù)返回一個promise對象,該對象有一個then方法,允許指定回調(diào)函數(shù)。比如,f1的回調(diào)函數(shù)f2,可以寫成:
f1.then(f2);
f1要進(jìn)行如下改寫(使用jquery的實現(xiàn)):
function f1(){ var dfd=$.deferred(); settimeout(function(){ //f1的任務(wù)代碼 dfd.resolve(); },500);return dfd.promise; }
這樣寫的優(yōu)點:回調(diào)函數(shù)寫成了鏈?zhǔn)綄懛ǎ绦虻牧鞒炭梢钥吹煤芮宄?,而且有一整套的配套方法,可以實現(xiàn)很多強大的功能。
比如,指定多個回調(diào)函數(shù)
f1().then(f2).then(f3);
再比如,指定發(fā)生的錯誤時的回調(diào)函數(shù):
f1().then(f2).fail(f3);
而且,它有一個前面三種方法都沒有的好處:如果一個任務(wù)已經(jīng)完成,再添加回調(diào)函數(shù),該回調(diào)函數(shù)會立即執(zhí)行。
所以你不用擔(dān)心錯過某一個事件或者信號。
這種方法的缺點:編寫和理解都相對比較難。
http://www.cnblogs.com/chengxs/p/6497575.html