欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS Generator 函數(shù)的含義與用法實例總結

 更新時間:2020年04月08日 09:13:17   作者:李小強  
這篇文章主要介紹了JS Generator 函數(shù)的含義與用法,結合實例形式總結分析了JS Generator 函數(shù)基本含義、用法及操作注意事項,需要的朋友可以參考下

本文實例講述了JS Generator 函數(shù)的含義與用法。分享給大家供大家參考,具體如下:

讀阮一峰老師《Generator 函數(shù)的含義與用法》總結

老師的文章通俗易懂,但是我個人理解上面有一些差,所以看了幾遍之后才有呢么一點點體會

把它記錄下來。

還是那句話,所有事物的出現(xiàn)都是為了解決對應的問題。

那么Generator出現(xiàn)是為了解決什么問題的呢?

在異步編程的場景下,如果有多個異步任務,如何處理他們的先后執(zhí)行順序?

舉一個常見的例子,jquery的ajax請求,每一個success都是一個異步任務。

那么問題來了,如果我要保證頁面渲染要在5個網絡請求都回來之后再去渲染頁面。

我們的代碼就會變成:

$.ajax({...success:function(data){
  $.ajax({...success:function(data){
    $.ajax({...success:function(data){
      $.ajax({...success:function(data){
        $.ajax({...success:function(data){
          //do something
        }})
      }})
    }})
  }})
}})

這就是”回調函數(shù)噩夢”(callback hell)

為了解決這個問題,后來出現(xiàn)了Deferred和promise

兩者區(qū)別不大,通過一種包裝寫法來減少回調函數(shù)

上面的ajax就可以寫成:

ajax1 = $.ajax({...success:function(data){});
ajax2 = $.ajax({...success:function(data){});
ajax3 = $.ajax({...success:function(data){});
ajax4 = $.ajax({...success:function(data){});
ajax5 = $.ajax({...success:function(data){});
$.when(ajax1,ajax2,ajax3,ajax4,ajax5).done(function(
  //do something
)).then(function(){
  //do something2
})

1.8版本以上的jquery ajax模塊默認返回Deferred對象

Deferred和promise將回調函數(shù)做拆分,將異步任務的處理和執(zhí)行分成兩部分完成

他們最大的問題就是代碼冗余,包裝之后的代碼都需要通過then,done來執(zhí)行后面的內容,也導致層次感不清晰

那有沒有一種比較無感,簡單的寫法呢?

那就是協(xié)程,
我之前也是在這個地方困惑了很久,
前面說的大多日常用到過,也清楚一些原理,
關于協(xié)程用到的就少了,我們來分析下吧。

直接看一下協(xié)程的例子:

function asnycJob() {
 // ...其他代碼
 var f = yield readFile(fileA);
 // ...其他代碼
}

阮一峰老師的原話:

上面代碼的函數(shù) asyncJob 是一個協(xié)程,它的奧妙就在其中的 yield 命令。它表示執(zhí)行到此處,執(zhí)行權將交給其他協(xié)程。也就是說,yield命令是異步兩個階段的分界線。 協(xié)程遇到 yield 命令就暫停,等到執(zhí)行權返回,再從暫停的地方繼續(xù)往后執(zhí)行。它的最大優(yōu)點,就是代碼的寫法非常像同步操作,如果去除yield命令,簡直一模一樣。

之前沒理解的原因就是沒好好讀這兩句話,今認真看了一下,茅塞頓開。重要的有這么幾點

首先asnycJob這個方法就是一個協(xié)程

yield相當于return,會返回當前程序的執(zhí)行狀態(tài)

當執(zhí)行到y(tǒng)ield,程序掛起等待返回后繼續(xù)執(zhí)行。

掛起這段時間去執(zhí)行其他協(xié)程函數(shù)

Generator函數(shù)是ES6對協(xié)程函數(shù)的實現(xiàn),

Generator函數(shù)的特點就是可以暫停代碼執(zhí)行。

跟協(xié)程函數(shù)一樣,遇到y(tǒng)ield關鍵字就暫停代碼執(zhí)行,

跟普通函數(shù)的區(qū)別在于Generator函數(shù)不會反悔結果,而是返回指針對象,

通過指針的next方法移動指針指向下一個yield關鍵字位置。

也就是說Generator函數(shù)的分階段執(zhí)行是由next方法控制的。

使用了Generator函數(shù)之后會對我們的代碼有多大的改變呢?

fangction* gen(){
  var url = 'user/get/info';
  var data = yield $.get({url:url});
  console.log(data.userName);
}

你不需要擔心遠程接口的返回時機,完全按照同步的方式寫代碼就行。

但是也有缺點,Generator函數(shù)把一步操作做的很簡潔,但對流程的管理卻不方便,

上面的例子如何執(zhí)行?

var g = gen();
g.next();
g.next();

next 方法的作用是分階段執(zhí)行 Generator 函數(shù)。每次調用 next 方法,會返回一個對象,

表示當前階段的信息( value 屬性和 done 屬性)。value 屬性是 yield 語句后面表達式的值,表示當前階段的值;

done 屬性是一個布爾值,表示 Generator 函數(shù)是否執(zhí)行完畢,即是否還有下一個階段。

你需要執(zhí)行兩次.next方法,來將你的Generator函數(shù)執(zhí)行完畢。

關于如何自動化異步任務的流程管理,就需要co,thunk,async的幫助了

原文:Generator 函數(shù)的含義與用法

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容可查看本站專題:《JavaScript常用函數(shù)技巧匯總》、《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》及《JavaScript數(shù)學運算用法總結

希望本文所述對大家JavaScript程序設計有所幫助。

相關文章

最新評論