JS読書心得:「JavaScriptフレーム設計」――第12章非同期処理

8351 ワード

JavaScript

一、何が異歩ですか?
タスクを実行するプロセスは、開始と実行の二つの部分に分けられ得る.
同期実行モード:タスクの開始後は、タスクの実行が完了し、結果が返ってくるまで、次のタスクが実行されます.
非同期実行モード:タスクの開始後は、タスクの実行が完了するのを待つのではなく、すぐに次のタスクを実行し、タスクの実行が完了すると、通知を受けます.
IO動作が頻繁なシーンに対して、非同期実行モードは、同じハードウェアリソース条件でより大きな同時処理能力、すなわちより大きなスループットを提供することができる.
しかし、非同期実行モードは、人々の固有の考え方を打ち破り、タスクの開始とタスクの実行は分離され、プログラミングの複雑さを高める.
マルチスレッド、マルチプロセスは非同期モードを実現できます.

二、地獄に戻るということから.
みんなが「地獄のリベロ」という言葉を聞いたことがあると思いますが、卵の痛みは避けられない非同期による副作用です.例:

setTimeout(function(){
  setTimeout(function(){
    setTimeout(function(){
        setTimeout(function(){
        }, 1000)
    }, 1000)
  }, 1000)
}, 1000)

JSは非同期実行モードによってマルチタスクの同時実行を実現するため、非同期タスクが連環ネストされたばつが悪い局面に出くわすのは避けられないが、コールバック地獄は非同期タスクのネストされた具体的な表現形式である.
地獄に戻るとコードの維持が困難になるだけでなく、デバッグの難易度も高くなります.一言で言えば、避けられない卵の痛みです.

三、それらの緩やかなCallback Hellの方案
地狱のような优雅ではないが、避けられないなら、痛みを和らげる抽象的な方法がありますか?
良薬を探す前に、私達が先に知るべきのは、リフレクト地獄を形成する原因であり、局部から見れば、非同期任務を始める前に一定の前置条件を満たさなければなりません.大域から見れば非同期実行モードでのフロー制御です.実は同期実行モードにも同じ状況があります.ただ、同期実行モードは私達の普通の考え方と一致しています.前の条件を満たしてから同期タスクを実行するのは当たり前のことです.あまり感じられません.しかし、非同期タスクの中では際立った問題になります.考えてみると、非同期タスクA->>非同期タスクB->非同期タスクCは前の段階では前の段階では前の段階では、その関係は実は同時に実行されていますが、コード表現では非同期を使用させられます.コードモードでは、この内在関係と表現形式の違いが有名なコールバック地獄を生み出します.
同期実行モードでのフロー制御には if…elseif…else 、 while 和 try…catch.finally .私たちの究極の目標は、非同期実行モードにおけるプロセス制御を表現することです.明らかにJS文法を変えない限り、これは疑似命題であることは間違いないです.私たちができることは、絶えず接近することです.
一方、@朴霊のイベントProxyは、その中の一つである.
EventProxyはイベントシステムとして、after、tailなどのイベント購読方法によって制約付きイベントトリガ機構を提供し、「制約」は「前置条件」に対応するので、このような制約付きイベントトリガメカニズムを利用して、非同期実行モードにおけるフロー制御表現として利用することができる.
例えば、タスクAとタスクBが成功した後にタスクCを実行する必要があります.

/*        */
try{
  var result4A = execA()
  var result4B = execB()
  var result4C = execC()
}
catch(e){}

/*        */
// 1.        ——   Callback Hell ！
execA(function(){
  execB(function(){
    execC()
  })
})

// 2. EventProxy
var ep = EventProxy.create('a', 'b', execC)
ep.fail(function $noop$(){})
execA(ep.done('a'))
execB(ep.done('b'))

EventProxyを使用した場合のコールバック関数の数は減少していませんが、コールバック地獄はなくなりました.
イベント機構の利点はモジュールの結合度を下げることであるが、システム全体がばらばらになり、メインモジュールが見えにくくなるため、イベント機構によるフロー制御の実現は必然的にコード構造の緩さと論理の離散化を招くが、これは良好な組織形態でコード構造をより密接にすることができる.いくらか

四、Promiseを知る
ここでPromiseとは、ES 6によって取り込まれたPromises/A+仕様およびその実施例を指す.

var p = new Promise(function(resolve, reject){
  resolve("test")
})
p
  .then(function(val){
    console.log(val)
    return val + 1
  }, function(reason){
  })
  .then(function(val){
    console.log(val)
  }, function(reason){
  })

jQuery.Deferredのpromise方法からPromiseの存在を知りましたが、Promises/A+はどのような仕組みを描いていますか?
1.表象——API
Promises/A+でPromise状態がpending(デフォルト値)と規定されています.状態はpending->fulfilledまたはpending->rejectからのみ可能であり、thenおよびcatchを介して状態変化イベントを購読することができます.状態変化イベントのコールバック関数は、結果としてPromiseチェーンの次のPromiseインスタンスの状態に影響を及ぼします.また、Promise状態の変化に触れたときには追加情報を携帯することができます.また、Promise情報をPromiseに沿ってPromise Promise Promise Promiseを実行します.また、Promise.allとPromise.raceの2つのヘルプ方法を提供して、または論理的な関係を実現し、Promsie.resoveを提供して、thenableオブジェクトをPromiseオブジェクトに変換します.
2.フロー制御
Promiseを通じて、私達は転調地獄から脱出することができます.

var execAP = Promise.resolve({then:execA})
  , execBP =  Promise.resolve({then:execB})

Promise
  .all(execAP, execBP)
  .then(execC)

これもPromiseが広く認識されている機能です.
3.信頼の仕組み
Labjsの作者によって編纂された「Promise 5部作を深く理解する」は別の角度からPromiseをより深く解読します.第三者のツールバンクやインターフェースを通じてローカル機能モジュールを制御する必要がある場合、Promiseを通じて信頼メカニズムを構築し、ローカル機能モジュールが予測可能な範囲内で第三者に操作されることを確保します.
Primseはライブラリ開発者のレゴブロックとしてだけで、一般開発者にはより高いレベルの抽象を提供する必要があります.

五、Generator Functionを知る
Generator FunctionはES 6が導入した新特性のジェネレータ関数です.PromiseとGenerator Functionを組み合わせることで、非同期実行モードの流れを表現することができます.

六、関連ノート
『JS魔法堂：ソース解析Promises/A仕様』
『Promises/A+仕様』
『JS魔法堂：js Deferredソースコード解析』
『JS魔法堂：jQuery.Deferred（jQuery 1.5-2.1）ソース解析』
『JS魔法堂：mmDeferredソースコード解析』
『JS魔法堂：ES 6の新しい特性——Generator Function紹介』
『JS魔法堂：Native Promise Onlyソース解析』

七、iPromise
iPromiseは、私が非同期的に処理しながら開発したPromises/A＋仕様の実現であり、内部ではGenerator Functionへのサポートが実現されています.3回のグローバル再構成を経て、v 0.8.2にあります.現在のコード構造は読みやすく、APIが固定されています.今後はパッチを打つ予定です.皆さんのforkを歓迎します.iPromise@githubに来てください.

八、まとめ
本文はこの時間のために、「JavaScript枠組み設計」に対して、第12章の非同期処理の学習と実践をまとめました.
オリジナルを尊重して、転載してください. ^_^太ったジョンさん

SparkではmapParttionsを使用します.