JavaScript非同步呼叫架構用例設計

在上一篇文章裡說到，我們要設計一個JavaScript非同步呼叫架構，最好能夠統一同步非同步呼叫的介面，同時具體調用順序與實現方式無關。那麼我們現在就來設計這樣一個架構的用例。

傳遞迴調

我們首先要考慮的一個問題是，如何傳遞迴調入口。在最傳統的XHR調用當中，回呼函數會被作為最後一個參數傳遞給非同步函數：

 

  
function asyncOperation(argument, callback) 
 

在參數相當多的時候，我們可以把參數放到一個JSON裡面，這樣參數就如同具名參數一樣，可以通過參數名選擇性的傳遞參數，不傳遞的參數相當於使用預設值。這是從Prototype開始就流行起來的做法：

 

  
function asyncOperation(argument, options) 
 

然而這兩種做法都有一個壞處，就是把同步函數改為非同步函數或同步非同步混合函數）時，必須顯式地修改函數簽名，在最後增加一個或多個）參數。這是JavaScript非同步呼叫種需要考慮的問題。

由於在調用棧的底層引入非同步函數對我們來說太常見了，為此可能要更改一大堆上層調用函數簽名的成本實在是太高了，所以我們還是想一個不用修改函數簽名的做法吧。

在這裡我參考了.NET Framework的IAsyncResult設計，把非同步作業有關的一切資訊集中到一個對象上來，從而避免了對函數簽名的修改。在此，我們假設一個非同步函數的調用原型是這樣子的：

 

  
function asyncOperation(argument) {  
  
  operation = new Async.Operation();  
  
  setTimeout(function() { operation.yield("hello world"); }, 1000);  
  
  return operation;  
  
} 
 

在這段代碼裡，我們返回了一個Operation對象，用於將來傳遞迴調函數。同時，我們通過setTimeout類比了非同步返回結果，而具體的返回方式就是yield方法。

接著，我們還要設計傳遞迴調函數的方法。由於我們不能好像C#那樣重載+=運算子，所以只能用函數傳遞迴調函數：

 

  
var operation = asyncOperation(argument);  
  
operation.addCallback(function(result) { alert(result); }); 
 

在C#裡面做這樣的設計是不安全的，因為在非同步作業可能在添加回調之前就完成了。但在JavaScript裡面這樣寫是安全的，因為JavaScript是單線程的，緊接著asyncOperation的同步addCallback必然先執行，asyncOperation中的非同步yield必然後執行。

調用順序

可能有人要問，如果使用者使用同步的方式來調用yield，這時候執行順序不一樣依賴於yield的實現嗎？沒錯，不過yeild是在架構中一次性實現的，我們只要把它做成非同步就可以了，這樣即使對它進行同步調用，也不影響執行順序：

 

  
function psudoAsyncOperation(argument) {  
  
  operation = new Async.Operation();  
  
  operation.yield("hello world");  
  
  return operation;  
  
}  
  
var operation = asyncOperation(argument);  
  
operation.addCallback(function(result) { alert(result); }); 
 

就算把代碼寫成這個樣子，我們也能確保addCallback先於yield的實際邏輯執行。

事後回調

有時候，架構的使用者可能真的寫出了先yield後addCallback的代碼。這時候，我認為必須保證addCallback中添加的回呼函數會被立即觸發。因為使用者添加這個回呼函數，意味著他期望當非同步作業有結果時通知這個回呼函數，而這與添加回呼函數時非同步作業是否完成無關。為此，我們再添加一個用例：

 

  
function psudoAsyncOperation(argument) {  
  
  operation = new Async.Operation();  
  
  operation.yield("hello world");  
  
  return operation;  
  
}  
  
var operation = asyncOperation(argument);  
  
setTimeout(function() {  
  
  operation.addCallback(function(result) { alert(result); });  
  
}, 1000); 
 

小結

到這裡，我們就設計好了一個名為Async.Operation的非同步作業對象。JavaScript非同步呼叫的方法將對這個對象進行操作。

1. JavaScript非同步呼叫架構問題描述
2. 淺談如何用Javascript+VML實現流程設計器
3. 常用的JavaScript驗證Regex
4. 給JavaScript初學者的24個小竅門
5. JavaScript中關於Cookie的詳細介紹