日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
JavaScript異步調(diào)用框架的代碼實(shí)現(xiàn)

在上一篇文章里，我們說到了要實(shí)現(xiàn)一個(gè)用于JavaScript異步調(diào)用的Async.Operation類，通過addCallback方法傳遞回調(diào)函數(shù)，并且通過yield方法返回回調(diào)結(jié)果?，F(xiàn)在我們就來實(shí)現(xiàn)這個(gè)類吧。

目前創(chuàng)新互聯(lián)建站已為近千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、馬山網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

類結(jié)構(gòu)

首先我們來搭一個(gè)架子，把需要用到的似有變量都列出來。我們需要一個(gè)數(shù)組，來保存回調(diào)函數(shù)列表；需要一個(gè)標(biāo)志位，來表示異步操作是否已完成；還可以學(xué)IAsyncResult，加一個(gè)state，允許異步操作的實(shí)現(xiàn)者對外暴露自定義的執(zhí)行狀態(tài)；最后加一個(gè)變量保存異步操作結(jié)果。

 
 
 
    
  
  
  
  1. Async = {  
    2. 
  
  
  
  2.   Operation: {  
    3. 
  
  
  
  3.     var callbackQueue = [];  
    4. 
  
  
  
  4.     this.result = undefined;  
    5. 
  
  
  
  5.     this.state = "waiting";  
    6. 
  
  
  
  6.     this.completed = false;  
    7. 
  
  
  
  7.   }  
    8. 
  
  
  
  8. } 
    9.

addCallback方法

接下來，我們要實(shí)現(xiàn)addCallback方法，它的工作職責(zé)很簡單，就是把回調(diào)函數(shù)放到callbackQueue中。此外，如果此時(shí)completed為true，說明異步操作已經(jīng)yield過了，則立即調(diào)用此回調(diào)。

 
 
 
    
  
  
  
  1. this.yield = function(callback) {  
    2. 
  
  
  
  2.   callbackQueue.push(callback);  
    3. 
  
  
  
  3.   if (this.completed) {  
    4. 
  
  
  
  4.     this.yield(this.result);  
    5. 
  
  
  
  5.   }  
    6. 
  
  
  
  6.   return this;  
    7. 
  
  
  
  7. } 
    8.

我們假設(shè)yield方法會把callbackQueue中的回調(diào)函數(shù)逐個(gè)取出來然后調(diào)用，因此如果compeleted為true，則使用已有的result再調(diào)用一次yield就可以了，這樣yield自然會調(diào)用這次添加到callbackQueue的回調(diào)函數(shù)。

至于最后的return this;，只是為了方便jQuery風(fēng)格的鏈?zhǔn)綄懛?，可以通過點(diǎn)號分隔連續(xù)添加多個(gè)回調(diào)函數(shù)來實(shí)現(xiàn)JavaScript異步調(diào)用：

 
 
 
    
  
  
  
  1. asyncOperation(argument)  
    2. 
  
  
  
  2.   .addCallback(firstCallback)  
    3. 
  
  
  
  3.   .addCallback(secondCallback); 
    4.

yield方法

最后，我們要實(shí)現(xiàn)yield方法。它需要將callbackQueue中的回調(diào)函數(shù)逐個(gè)取出來，然后都調(diào)用一遍，并且保證這個(gè)操作是異步吧。

 
 
 
    
  
  
  
  1. this.yield = function(result) {  
    2. 
  
  
  
  2.   var self = this;  
    3. 
  
  
  
  3.   setTimeout(function() {  
    4. 
  
  
  
  4.     self.result = result;  
    5. 
  
  
  
  5.     self.state = "completed";  
    6. 
  
  
  
  6.     self.completed = true;  
    7. 
  
  
  
  7.     while (callbackQueue.length > 0) {  
    8. 
  
  
  
  8.       var callback = callbackQueue.shift();  
    9. 
  
  
  
  9.       callback(self.result);  
    10. 
  
  
  
  10.     }  
    11. 
  
  
  
  11.   }, 1);  
    12. 
  
  
  
  12.   return this;  
    13. 
  
  
  
  13. } 
    14.

通過使用setTimeout，我們確保了yield的實(shí)際操作是異步進(jìn)行的。然后我們把用戶傳入yield的結(jié)果及相關(guān)狀態(tài)更新到對象屬性之上，最后遍歷callbackQueue調(diào)用所有的回調(diào)函數(shù)。

小結(jié)

這樣我們就做好了一個(gè)簡單的JavaScript異步調(diào)用框架，完整的代碼如下：

 
 
 
    
  
  
  
  1. Async = {  
    2. 
  
  
  
  2.     Operation: function() {  
    3. 
  
  
  
  3.         var callbackQueue = [];  
    4. 
  
  
  
  4.         this.result = undefined;  
    5. 
  
  
  
  5.         this.state = "running";  
    6. 
  
  
  
  6.         this.completed = false;  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.         this.yield = function(result) {  
    9. 
  
  
  
  9.             var self = this;  
    10. 
  
  
  
  10.             setTimeout(function() {  
    11. 
  
  
  
  11.                 self.result = result;  
    12. 
  
  
  
  12.                 self.state = "completed";  
    13. 
  
  
  
  13.                 self.completed = true;  
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15.                 while (callbackQueue.length > 0) {  
    16. 
  
  
  
  16.                     var callback = callbackQueue.shift();  
    17. 
  
  
  
  17.                     callback(self.result);  
    18. 
  
  
  
  18.                 }  
    19. 
  
  
  
  19.             }, 1);  
    20. 
  
  
  
  20.             return this;  
    21. 
  
  
  
  21.         };  
    22. 
  
  
  
  22.  
    23. 
  
  
  
  23.         this.addCallback = function(callback) {  
    24. 
  
  
  
  24.             callbackQueue.push(callback);  
    25. 
  
  
  
  25.             if (this.completed) {  
    26. 
  
  
  
  26.                 this.yield(this.result);  
    27. 
  
  
  
  27.             }  
    28. 
  
  
  
  28.             return this;  
    29. 
  
  
  
  29.         };  
    30. 
  
  
  
  30.     }  
    31. 
  
  
  
  31. }; 
    32.

這個(gè)框架能夠很好的解決調(diào)用棧中出現(xiàn)同步異步操作并存的情況，假設(shè)所有函數(shù)都返回Async.Operation，框架的使用者可以使用一種統(tǒng)一的模式來編寫代碼，處理函數(shù)返回，而無需關(guān)心這個(gè)函數(shù)實(shí)際上是同步返回了還是異步返回了。

對于串行調(diào)用多個(gè)異步函數(shù)的情況，我們現(xiàn)在可以用嵌套addCallback的方式來書寫，但隨著嵌套層數(shù)的增多，代碼會變得越來越不美觀：

 
 
 
    
  
  
  
  1. firstAsyncOperation().addCallback(function() {  
    2. 
  
  
  
  2.   secondAsyncOperation().addCallback(function() {  
    3. 
  
  
  
  3.     thirdAsyncOperation().addCallback(function() {  
    4. 
  
  
  
  4.       finalSyncOperation();  
    5. 
  
  
  
  5.     });  
    6. 
  
  
  
  6.   });  
    7. 
  
  
  
  7. }); 
    8.

我們能否把嵌套形式改為jQuery風(fēng)格的鏈?zhǔn)綄懛兀窟@是我們接下來要思考的問題。


當(dāng)前題目：JavaScript異步調(diào)用框架的代碼實(shí)現(xiàn)
文章源于：http://www.dlmjj.cn/article/dghhpis.html