前端基本知識（四）：JS的異步模式：一、回調函數；二、事件監聽；三、觀察者模式；四、promise對象

 JavaScript語言將任務的執行模式能夠分紅兩種：同步（Synchronous）和異步（Asychronous）。

「同步模式」就是一個任務完成以後，後邊跟着一個任務接着執行；程序的執行順序和排列順序是一直的；」異步模式」則徹底不一樣，每個任務都有一個或者多個回調函數（callback），前一個任務結束的時候，不是執行下一個任務，二十執行回調函數，後一個任務則是不等前一個任務結束就執行，因此程序的執行順序與任務順序不一致的，異步的。

在瀏覽器端，耗時時間長的操做都應該異步執行，避免瀏覽器數去響應，最好的例子就是ajax操做。

在服務器端，「異步模式」甚至是惟一的模式，由於執行環境是單線程的，若是容許同步執行全部的http請求，服務器會急劇降低，很快會失去響應。

 

「異步模式」一共有4種方法，這4種方法能夠寫出結構更合理，性能更出色，維護更方便的js代碼。這四種模式分別爲：

1、回調函數（callback）；

2、事件監聽（Listener）；

3、觀察者模式；

4、promise對象

 

1、回調函數（callback）

異步的最基本的方法

假設有兩個函數，f1和f2，後者等待前者執行結果。

f1();

f2();

若是f1是一個很耗時的任務，能夠考慮改寫f1，把f2寫成f1的回調函數。

function f1(callback){
  settimeout(function(){
     //f1代碼
       
},1000);

callback();  

}

執行代碼變成下面的樣子

f1(f2);

      採用鄭重方式，把同步操做變成了異步操做，f1不會堵塞程序的運行，先執行程序的主要邏輯，將耗時的操做推遲執行。

     其實我理解起來也很費勁，由於上大學後第一門語言是c，而後是C++，再後來是java，在傳統函數中以參數形式輸入數據，而且使用返回語句返回值。理論上，在函數結尾處有一個return返回語句，結構上就是：一個輸入點和一個輸出點。函數的本質就是輸入和輸出之間實現過程的映射。

     可是，當函數的實現過程很漫長，你選擇等待函數處理完成以後處理，仍是使用回調函數進行異步處理呢？

     答：這種狀況下，使用回調函數變得相當重要，例如：ajax請求。如果使用回調函數進行處理，艾瑪就能夠繼續進行其餘任務，而無需空等等。實際開發中，常常在JavaScript中使用異步調用，甚至在這裏推薦使用。

//傳遞函數做爲回調，函數做爲參數傳遞
function fn(a,b,callback1){
   var num=Math.ceil(Math.random()*(a-b)+b);
   callback1(num);     //傳遞結果
}

fn(10,20,function(num){
   console.log("隨機數"+num);
});      //結果爲10-20之間的隨機數

function foo(){
  var a=10;
  return function(){
   a*=2;
   return a;
};
}

var f=foo();
f();     //return 20
f();     //return 40
//返回一個內嵌匿名函數是建立閉包的方法。

   ajax的一個回調函數例子。

$.ajax({
   url:"test.json",
   type:"GET",
   data:{username:$("#username").val()},
   dataType:"json",
   beforSend:function(){
           //禁用按鈕防止重複提交
          $("#submit").attr({disabled:"disabled"}); 
    },
    complete:function(msg){
       //請求完成後調用的回調函數
   }，
   error:function(msg){
       //請求失敗時被調用的回調函數
  }
   Success:function(msg){
       //請求成功後調用的回調函數
  }
})；

 

     （1）回調函數定義：函數A做爲參數（函數引用）傳遞到另一個函數B，而且這個函數B執行函數A，咱們就叫函數A叫作回調函數，若是沒有名稱（函數表達式），咱們就叫它匿名回調函數。

    （2）回調函數優勢：簡單，容易理解和 部署。

      缺點：不利於代碼的閱讀，和維護，各部分之間高度耦合，流程會很混亂，並且每個任務只能指定一個回調函數。

 

2、事件監聽

採用事件驅動模式。

任務的執行不取決代碼的順序，而取決於某一個事件是否發生。

監聽函數有：on，bind，listen，addEventListener，observe

仍是以f1和f2爲例。首先，爲f1綁定一個事件（採用jquery寫法）。

f1.on('done',f2);

上面代碼意思是，當f1發生done事件，就執行f2。

而後對f1進行改寫：

function f1(){
    settimeout(function(){
   //f1的任務代碼
   f1.trigger('done');  
},1000);
}

f1.trigger('done')表示，執行完成後，當即觸發done事件，從而開始執行f2.

這種方法的優勢：比較容易理解，能夠綁定多個事件，每個事件能夠指定多個回調函數，並且能夠去耦合，有利於實現模塊化。

這種方法的缺點：整個程序都要變成事件驅動型，運行流程會變得不清晰。

事件監聽方法：

（1）onclick方法

element.onclick=function(){
   //處理函數
}

優勢：寫法兼容到主流瀏覽器

缺點：當同一個element元素綁定多個事件時，只有最後一個事件會被添加

例如：

element.onclick=handler1;
element.onclick=handler2;
element.onclick=handler3;

上訴只有handler3會被添加執行，因此咱們使用另一種方法添加事件

（2）attachEvent和addEvenListener方法

//IE:attachEvent
elment.attachEvent("onclick",handler1);
elment.attachEvent("onclick",handler2);
elment.attachEvent("onclick",handler3);

上述三個方法執行順序：3-2-1；

//標準addEventListener
elment.addEvenListener("click",handler1,false);
elment.addEvenListener("click",handler2,false);
elment.addEvenListener("click",handler3,false);

執行順序：1-2-3；

PS：該方法的第三個參數是泡沫獲取，是一個布爾值：當爲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，在輸出id1


document.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()表示用來分配和刪除事件的函數。這兩種方法都須要三種參數，分別爲：

string（事件名稱），要觸發事件的函數function，指定事件的處理函數的時期或者階段（boolean）。

例子見（二）

（四）通用的時間添加方法：

on:function(elment,type,handler){
   //添加事件
   return element.attachEvent？elment.attachEvent("on"+type,handler):elment.addEventListener(type,handler,false);
}

 

冒泡事件和事件捕獲區別，能夠參考：http:/www.cnblogs.com/chengxs/p/6388779.html

 

3、觀察者模式

觀察者模式也叫發佈訂閱模式，它定義了一種一對多的關係，讓多個觀察者同時對監聽某一個主題對象，這一個主題對象的狀態變化就會通知多有的觀察者對象，使得他們可以自動更新本身。

優勢：一、支持簡單的廣播通訊，自動通知全部已經訂閱過的對象。

二、頁面載入後，目標對象很容易與觀察者存在一種動態關聯，增長靈活性。

三、目標對象與觀察者之間的抽象耦合關係可以單獨擴展以及重用。

 

4、promise對象（promise 模式）

（1）promise對象是commonJS工做組提出的一種規範，一種模式，目的是爲了異步編程提供統一接口。

（2）promise是一種模式，promise能夠幫忙管理異步方式返回的代碼。他講代碼進行封裝並添加一個相似於事件處理的管理層。咱們可使用promise來註冊代碼，這些代碼會在在promise成功或者失敗後運行。

（3）promise完成以後，對應的代碼也會執行。咱們能夠註冊任意數量的函數再成功或者失敗後運行，也能夠在任什麼時候候註冊事件處理程序。

（4）promise有兩種狀態：一、等待（pending）；二、完成（settled）。

promise會一直處於等待狀態，直到它所包裝的異步調用返回/超時/結束。

（5）這時候promise狀態變成完成。完成狀態分紅兩類：一、解決（resolved）；二、拒絕（rejected）。

（6）promise解決（resolved）：意味着順利結束。promise拒絕（rejected）意味着沒有順利結束。

//promise
var p=new Promise(function(resolved))
//在這裏進行處理。也許可使用ajax

setTimeout(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）代碼的 關鍵在於setTimeout()的調用。

    （2）重要的是，他調用了函數resolve()和reject()。resolve()函數告訴promise用戶promise已解決；reject()函數告訴promise用戶promise未能順利完成。

     （3）另外還有一些使用了promise代碼。注意then和catch用法，能夠將他們想象成onsucess和onfailure事件的處理程序。

     （4）巧妙地方是，咱們將promise處理與狀態分離。也就是說，咱們能夠調用p.then（或者p.catch）多少次均可以，無論promise是什麼狀態。

    （5）promise是ECMAscript 6管理異步代碼的標準方式，javascript庫使用promise管理ajax，動畫，和其餘典型的異步交互。

簡單的說，它的思想是：每個異步任務返回一個promise對象，該對象有一個then方法，容許指定回調函數。好比，f1的回調函數f2，能夠寫成：

f1.then(f2);

f1要進行以下改寫（使用jquery的實現）：

function f1(){
  var dfd=$.deferred();
  settimeout(function(){
  //f1的任務代碼
   dfd.resolve();
},500);
return dfd.promise;  
}

這樣寫的優勢：回調函數寫成了鏈式寫法，程序的流程能夠看得很清楚，並且有一整套的配套方法，能夠實現不少強大的功能。

 

好比，指定多個回調函數

f1().then(f2).then(f3);

再好比，指定發生的錯誤時的回調函數：

f1().then(f2).fail(f3);

並且，它有一個前面三種方法都沒有的好處：若是一個任務已經完成，再添加回調函數，該回調函數會當即執行。

因此你不用擔憂錯過某一個事件或者信號。

這種方法的缺點：編寫和理解都相對比較難。