http://www.html-js.com/article/A-day-to-learn-JavaScript-to-replace-the-callback-function-with-ES6-Generator

目前，已經有很多文章討論過了如何使用ES6 generators來取代JavaScript中經常遇到的“回撥金字塔”。但是，其中提到的絕大多數方法都需要依賴於某個庫，而對於其中的原理卻提及甚少。

在本文中，我們將一步一步的將一個基於回撥函式的例子修改為一個基於generator的例子。本文的目標是讓你透徹地理解使用generator替代回撥函式的原理。

Generator是JavaScript中一個新概念，但在程式語言中已經存在已久。你可能已經在其他的程式語言例如Python使用過它。如果沒有，也不要害怕，我們在後面已經為你準備了一個簡單明瞭的入門介紹。

如何執行例子

在我們開始之前，你需要安裝Node 0.11.* 來執行文章中的例子。當你在執行這些例子時，你需要告訴Node使用ES6（也就是Harmony）來執行：node -harmony example.js。

什麼是一個generator

在我們深入講述如何使用generator替代回撥函式之前，我們先來說說什麼是generator。

Generator很像是一個函式，但是你可以暫停它的執行。你可以向它請求一個值，於是它為你提供了一個值，但是餘下的函式不會自動向下執行直到你再次向它請求一個值。

取號機也許是對generator的一個絕佳的比喻。你可以通過取一張票來向機器請求一個號碼。你接收了你的號碼，但是機器不會自動為你提供下一個。換句話說，取票機“暫停”直到有人請求另一個號碼，此時它才會向後執行。

ES6中的generator

Generator在ES6中像一個函式一樣被宣告，除了在之前有一個星號的差別外：

function* ticketGenerator(){}

當你想要一個generator提供一個值然後暫停時，你需要使用yield關鍵字。yield有點像是return關鍵字，因為它們都返回一個值，但是函式在yield之後會進入暫停狀態。

function ticketGenerator(){
    yield 1;
    yield 2;
    yield 3;
}   

在我們的例子中，我們定義了一個叫做ticketGenerator的迭代器。如果你向它請求一個值，它會返回1然後暫停。如果你再次向它發出一個請求，我們將得到2，然後是3。

當你呼叫一個generator時，它將返回一個迭代器物件。這個迭代器物件擁有一個叫做next的方法來幫助你重啟generator函式並得到下一個值。

next方法不僅返回值，它返回的物件具有兩個屬性：done和value。value是你獲得的值，done用來表明你的generator是否已經停止提供值。

現在我們從我們的取號機中取一些號碼：

var takeANumber = ticketGenerator();   

takeANumber.next();   

//>{value: 1, done: false}   

takeANumber.next();   
//>{value: 2, done: false}   

takeANumber.next();  
//>{value: 3, done: false}   

takeANumber.next();   
//>{value: undefined, done: true}  

現在我們的取號系統只能提供最多到3的號碼，這實在是沒什麼用。我們想要讓它無線增加下去，因此我們來建立一個迴圈。

function* ticketGenerator(){
    for(var i=0; true; i++){
        yield i;
    }
}   

現在，如果這是一個普通的函式，我們每次只會得到0。但是使用generator卻不一樣：

var takeANumber = ticketGenerator();   
console.log(takeANumber.next().value); //0   
console.log(takeANumber.next().value); //1   
console.log(takeANumber.next().value); //2  
console.log(takeANumber.next().value); //3  
console.log(takeANumber.next().value); //4  

每一次當我們呼叫next()時，generator執行下一個迴圈迭代然後暫停。這意味著我們擁有一個可以無限向下執行的generator。因為這個generator只是發生了暫停，你並沒有凍結你的程式。事實上，generator是一個建立無限迴圈的好方法。

影響generator的狀態

進一步探究迭代迭代generator物件的話，next()實際上還有另一個用途。如果你給next傳遞一個值，它會被視為generator中的一個yield語句的結果來對待。

因此next是一個在generator執行過程中向其傳遞資訊的方式。我們將以此來修改我們的取號generator以便它能夠被重置到0.我們希望能在任何時間點來重置取號機。

function* ticketGenerator(){
    for(var i=0; true; i++){
        var reset = yield i;
        if(reset) {i = -1;}
    }
}  

正如你所看到的，如果yield返回了一個true然後我們將i設定為-1。那麼for迴圈將會在迴圈的結尾將i增加1，因此下一次返回的i變成了0。

我們來看看實際情況如何：

var takeANumber = ticketGenerator(); console.log(takeANumber.next().value); //0  console.log(takeANumber.next().value); //1 console.log(takeANumber.next().value); //2 console.log(takeANumber.next(true).value); //0 console.log(takeANumber.next().value); //1     

用generator替代回撥函式

既然我們已經學到了一些關於generator的知識，現在讓我們來談談generator和回撥函式。正如你所知道的，當我們呼叫例如AJAX請求這樣的非同步程式碼時我們會使用回撥函式。為了簡單起見我們在例子中定義一個delay函式。

我們的delay函式將會是非同步的 – 在指定的時間過後我們提供給delay的回撥函式才會被執行，然後delay會給你的回撥函式傳遞一個字串告訴它究竟“沉睡”了多久。

在此期間你的其餘程式碼將會繼續執行下去。這就好像是進行一個AJAX請求一樣 – 你發出請求，你的程式碼繼續執行，當伺服器返回一個結果時你的回撥函式才執行。

現在，我們來定義delay函式：

function delay(time, callback){
    setTimeout(function(){
        callback("Slept for "+time);
    },time);
}   

到目前為止，還沒有什麼特別的東西。現在我們來使用它來delay兩次。首先我們將delay1000ms，然後當delay結束後我們再另外delay 1200ms。

delay(1000,function(msg){
    console.log(msg);
    delay(1200,function(msg){
        console.log(msg);
    });
})   

//...waits 1000ms   
// > "Slept for 1000"    
//...waits another 1200ms    
// > "Slept for 1200   

確保我們的兩個delay依次被呼叫的唯一方法就是確保第二個delay在第一個delay的回撥函式中。

如果我們要依次delay 12次，我們將需要巢狀的呼叫12次delay函式。這時你就會碰到“回撥金字塔”，程式碼也變得醜陋不堪。

引入generator

Generator是解決“回撥地獄”的有效方法之一。非同步呼叫是很困難的事情，因為我們的函式不會等待非同步呼叫完成，因此我們需要回調函式。

使用generator，我們可以讓我們的程式碼進行等待。無需巢狀回撥函式，我們可以使用generator確保當非同步呼叫在我們的generator函式執行一下行程式碼之前完成時暫停函式的執行。

因此，如果我們可以在一個非同步呼叫完成時暫停執行，這就意味著我們可以依次呼叫delay函式 – 就像delay函式是同步執行的一樣。

我們應該怎麼做

首先，我們知道我們進行非同步呼叫的程式碼需要在一個generator而不是一個一般的函式中進行，因此我們來定義一個generator。

function* myDelayedMessages() {
/* delay 1000ms然後列印結果 */    

/* delay 1000ms然後列印結果 */    
}   

接下來我們需要在我們的generator中呼叫delay。記住，delay接收一個回撥函式。這個回撥函式需要繼續我們的generator，但是我們現在還沒有一個generator因此我們先放上一個空函式。

function* myDelayedMessages(){
    console.log(delay(1000,function(){}));
    console.log(delay(1200,function(){}));
}   

我們程式碼依然是非同步的。這是因為我們還沒有將放入任何的yield語句。Generator只是在它們看大一個yield語句時才暫停。

function* myDelayedMessages() { 
    console.log(yield delay(1000, function(){})); 
    console.log(yield delay(1200, function(){}));
}   

我們現在已經更接近了一點了。然而，如果我們執行我們的generator什麼也不會發生。因為沒有什麼東西告訴它要向下執行。

在這裡你需要理解的最重要的概念是：generator需要在delay中的回撥函式執行完成後繼續往下執行，這就是它們如何知道暫停應該結束了的原因。

這意味著回撥函式中的東西需要知道如何向前推動generator。我們在其中傳遞一個叫做resume的函式來為我們做這件事。記住我們現在還依然沒有定義resume。

function* myDelayedMessages(resume) { 
    console.log(yield delay(1000, resume));
    console.log(yield delay(1200, resume));
}  

OK，現在我們的generator將會接收一個resume函式，這個函式將會向前推動generator。

現在到了關鍵步驟了，我們如何來編寫resume，它又是怎麼來了解我們的generator的。

如果你看看其他使用generator代替回撥函式的例子，你會看到generator函式總是被另一個函式包裹著 – 通常是一個叫做“run”或者“execute”的函式。這些函式的目的有以下幾個：

• 接收一個generator作為引數
• 使用這個generator來建立一個新的generator迭代器物件，我們將呼叫它的next方法
• 建立一個resume函式來使用這個generator迭代器物件來推進generator
• 將resume函式傳遞給這個generator以便generator能夠訪問resume

• 在最開始時呼叫next()函式，以便我們的程式碼在碰到第一個yield之前開始執行

  現在我們來建立run函式：

  function run(generatorFunction) { var generatorItr = generatorFunction(resume); function resume(callbackValue) { generatorItr.next(callbackValue); } generatorItr.next() 
  }

現在我們有了一個能夠接收一個generator函式的函式，併為它傳遞了一個瞭解如何推進generator迭代器物件的函式。

注意到我們在resume函式中用到了next的第二個特性。resume是被傳遞給delay的回撥函式，因此它接收delay函式提供的值。resume將這個值傳遞給next，因此yield語句的結果實際上是我們非同步函式的結果！

我們現在要做的只是用run包裹上我們的generator函式，然後我們就能看到以下結果：

run(function* myDelayedMessages(resume) {
 console.log(yield delay(1000, resume)); 
 console.log(yield delay(1200, resume));
})
//...waits 1000ms
// > "Slept for 1000" //...waits 1200ms
// > "Slept for 1200"   

現在，你能看到我們呼叫delay兩次，並沒有使用巢狀回撥函式。如果你依然看到疑惑，我們現在概括的來講述以下究竟發生了什麼：

• run接收了我們的generator並建立了一個resume函式
• run建立了一個generator迭代器物件（我們在它上面呼叫next方法），提供了resume函式。接著它推動了generator迭代器向前執行。
• 我們的generator碰到了第一個yield語句並且呼叫delay。接著這個generator暫停。
• delay在1000ms之後完成然後呼叫resume。
• resume告訴我們的generator進行下一步。它將結果傳遞給delay以便console能夠將它打印出來。
• 我們的generator碰到了第二個yield，呼叫delay然後再次暫停。 
  delay等待1200ms之後呼叫resume回撥函式。
• resume再次推進generator。
• 再也沒有yield的呼叫，這個generator完成執行。

結論

我們已經成功的使用generator替代了回撥巢狀方法。總結一下，使用generator替代回撥函式要包含以下幾個步驟：

• 建立一個run函式來接受一個generator，併為這個generator提供resume函式。
• 建立一個resume函式來推進generator，然後在resume被非同步函式呼叫時將這個resume函式傳遞給generator。
• 將resume作為回撥傳遞給我們所有的非同步回撥函式。這些非同步函式在完成時執行resume，這使得我們的generator在每個非同步呼叫完成之時僅僅向前一步。

雖然generator究竟是不是一個處理“回撥地獄”的好方法還在討論之中，但是它確實是一個加強你對ES6中generator和迭代器理解的練習。如果你在尋找一些不需要用到ES6的處理巢狀回撥函式的方法，可以考慮promises。