【本多読】「MVCベースのJavaScript Webリッチアプリ開発」多読メモ共有

前に書く

• 本の紹介：「JavaScript非同期プログラミング」は、PubSub、イベントモード、Promisesなどの基本的な非同期処理スキルを伝えます。これらのスキルを通じて、大規模なWebアプリケーションの複雑さ、インタラクティブで高速な応答コードにうまく対処できます。JavaScriptの非同期モードを理解することで、読者はより合理的な構造、より優れたパフォーマンス、およびより簡単なメンテナンスを備えたJavaScriptプログラムを作成できます。
• 私の簡単なコメント：js非同期プログラミングの人気の科学の本、内容はより包括的ですが十分に深くありません。フロントエンド開発として、非同期処理メカニズムを理解し、非同期コードを最適化することは非常に重要です。特に「JavaScript非同期プログラミング」をお勧めします。
• ！！福祉：記事の最後には、PDFブック、メモ用のマインドマップ、およびブックコードと一緒にパッケージ化されたダウンロードアドレスがあります。
  

第1章では、JavaScriptイベントについて深く理解しています。

1.1。イベントのスケジュール

• JavaScriptコードは、実行時にイベントをキューに入れるだけで済み、コードが終了する前にこれらのイベントがトリガーされないため、中断されないように使用されます。

1.2。非同期関数のタイプ

• 各JavaScript環境には独自の非同期関数のセットがあります
• ブラウザー側では、Ajaxメソッドには、falseに設定できる非同期オプションがあります。
• Node.jsで同期されたAPIメソッドは、fs.readFileSyncなどの名前で明確にマークされます
• WebKitのconsole.logプリントアウトはオブジェクトのスナップショットをすぐに取得せず、オブジェクトへの参照のみが保存され、コードがイベントキューに戻るまでスナップショットは出力されません
• ノードのconsole.logは厳密に同期されます
• 同じJavaScriptプロセスがコードを実行している場合、JavaScriptタイミング関数は他のコードを実行できません
• SetIntervalスケジューリングイベントが0に設定され、Chromeと他のブラウザーのトリガー頻度は約200回/秒、ノードは約1000回/秒
• whileループに置き換えると、Chromeのトリガー頻度は400万回/秒に達し、ノードでは500万回/秒に達します。
• よりきめの細かいタイミングが必要で、ノードではprocess.nextTickを使用し、最新のブラウザーではrequestAnimationFrameを使用します（アイデアの互換性）

1.3。非同期関数の作成

• 関数が非同期かどうかを確認する唯一の方法は、ソースコードを確認することです
• 一部の機能は非同期である場合とそうでない場合があります
• 遅延が大きいと計算負荷が大きくなります
• 非同期の再帰は少し怖いです。タスクが完了するのを待っている間、トリガーできる遅延の数は無制限です。
• 同期の可能性があり、その戻り値がコールバックに使用される可能性がある関数を定義しないでください

1.4。非同期エラーの処理

• JavaScriptでは、例外をスローしてから、try / catchブロックでキャプチャすることもできます
• このため、Node.jsのコールバックはほとんどの場合、最初のパラメーターとしてエラーを受け入れます。これにより、コールバックはエラー自体の処理方法を決定できます。
• コールバックから発生する非同期エラーはコールバック内でのみ処理できることを常に覚えておいてください
• ブラウザー環境では、windows.onerrorは例外をキャッチでき、trueを返すと、ブラウザーのデフォルトのエラー処理動作を妨げることがあります。
• ノードでは、同様のプロセスオブジェクトのuncaughtExceptionイベントがエラーをキャッチします。通常の状況では、ノードアプリケーションはキャッチされなかった例外のためにすぐに終了します
• しかし、Node0.8.4以降、uncaughtExceptionイベントは放棄されました
• ドメインオブジェクトは、スローをエラーイベントに変換するイベントオブジェクトです。

1.5。ネストされたコールバックのネスト解除

• 最も一般的なアンチパターンアプローチは、コールバックをコールバック内にネストすることです
• ネストされたコールバックは、管理可能で再利用可能なコードフラグメントとしてこれらの機能を実装する代わりに、コードを追加することで、より多くの機能を追加するように促します。
• 慣例として、3レベル以上の関数をネストしないでください。

第2章分散イベント

• 分散イベントを使用したい：イベントの蝶が時々羽ばたき、アプリケーション全体があらゆる場所で反応を引き起こす
• PubSubは、パブリッシュ/サブスクライブ、イベントを配布するモードを意味します
• PubSubモードのいくつかの特定の式：ノードのEventEmitterオブジェクト、バックボーンのイベントモデル、JQueryのカスタムイベント

2.1。PubSubモード

• NodeのほとんどすべてのI / OはEventEmitterオブジェクトです：ファイルストリーム、HTTPサーバー、さらにはアプリケーションプロセス自体
• イベントハンドラ自体は、イベントキューから実行されているのか、アプリケーションコードから実行されているのかを認識できません。
• すぐに発生する必要がないもののためにキューを維持し、タイミング機能を使用してこのキュー内の次のタスクを定期的に実行します
• PubSubは、イベントの命名、配布、および蓄積を簡素化します

2.2。イベントモデル

• オブジェクトにPubSubインターフェースがある限り、イベントオブジェクトと呼ぶことができます。
• オブジェクトのイベントが一連のイベントをトリガーし、最終的にオブジェクト自体に同じイベントをトリガーするたびに、結果はイベントループになります。
• イベントベースのモデルは、アプリケーションの状態変化をイベントに変換する直感的な方法をもたらします

2.3。jQueryカスタムイベント

• jQueryは、強力な分散イベントシステムから任意のWebアプリケーションへの移行を簡素化します
• jQueryは非バブルトリガーハンドラーメソッドを提供します
• jQueryのカスタムイベントにより、DOM変更の状態をアプリケーションの他の部分にコピーする必要なしに、DOM関連のイベントをDOMを介して直接表現できます。

まとめ

• PubSubモードは、1回限りのイベントには特に適していません
• 1回限りのイベントを解決するために使用されるツールはPromiseと呼ばれます

第3章Promiseオブジェクトと据え置きオブジェクト

3.1。約束の簡単な歴史

• PromiseオブジェクトはEventEmitterオブジェクトと同じで、任意の数のプロセッサを同じイベントにバインドできます（スタッキングテクノロジー）
• Promiseオブジェクトを使用する最大の利点は、既存のPromiseオブジェクトから新しいPromiseを簡単に導出できることです。
• 一般的な用法では、Promise、Deferred、Futureの3つの単語は、ほぼ同義語と見なすことができます。

3.2。Promiseオブジェクトを生成する

• 正確に言うと、デファードはプロミスのスーパーセットです。プロミスよりも重要な機能が1つあり、直接トリガーできます。
• 繰り返します：各DeferredオブジェクトにはPromiseオブジェクトが含まれ、各PromiseオブジェクトはDeferredオブジェクトを表します
• Ajaxは、約束を実証するための優れたユースケースです。リモートサーバーへの呼び出しはすべて成功または失敗し、これら2つの状況を異なる方法で処理したいと考えています。

3.3。コールバック関数にデータを渡す

• Deferredオブジェクトが実行または拒否されると、提供されたすべてのパラメーターが対応するコールバックに転送されます
• resolve / rejectは、自身でトリガーされたコールバックにコンテキストを直接渡すことができます

3.4。進捗通知

• jQuery1.7では、Promiseオブジェクトに対して新しいコールバックの進行状況を呼び出すことができます
• 要約すると、Promiseオブジェクトは3つのコールバックフォームを受け入れます：done、fail、progress

3.5。Promiseオブジェクトのマージ

• Promiseオブジェクトの論理マージ手法には、最も一般的な使用例の1つがあります。非同期タスクのセットがいつ完了するかを決定することです。

3.6。パイプラインは未来をつなぐ

• JavaScriptは一連の非同期タスクを便利に実行できないことがよくあります。主な理由の1つは、最初のタスクの終了前に2番目のタスクにプロセッサを接続することが不可能であることです
• jQuery1.6はパイプメソッドをPromiseオブジェクトに追加します
• promise.promise（）=== promise

3.7。jQueryとPromises / Aの比較

• jQueryはresolveの対義語としてresolveを使用しますが、Promise / Aはフルフィルメントを使用します。Promise / A仕様では、Promiseオブジェクトが実行されたか失敗したかに関係なく実行されます

3.8。コールバック関数の代わりにPromiseオブジェクトを使用する

• 理想的には、非同期タスクの実行を開始する関数はPromiseオブジェクトを返す必要があります
• Promiseはパスタスタイルのスムーズなコールバックに大きく役立ちます。Promiseはこのタイプの非同期タスクを簡単に調整できるためです。

第4章Async.jsのワークフロー制御

4.1。非同期ワークフローの順序

• 通常の非同期コードは、呼び出されたコールバックが呼び出された順序でトリガーされることを単に保証することはできません

4.3。Async.jsタスク整理テクノロジー

• Async.jsのデータ収集メソッドは、非同期関数がデータセットに適用される方法の問題を解決します
• 非同期関数シーケンスの実行：async.seriesおよびasync.waterfall
• Async.jsは、これらの結果が生成される順序ではなく、タスクリストの順序で完了イベントプロセッサに結果を渡すと便利です。
• Async.jsの中核となるところ：最も一般的な非同期シナリオにシンプルで時間を節約するツール機能を提供します

4.4。非同期ワークフローのための動的キューイング技術

• async.queueの基本的な考え方は、DMV動的管理ビューを連想させます

第5章ワーカーオブジェクトのマルチスレッドテクノロジ

5.0。前に書く

• イベントは、特別な種類のマルチスレッドを置き換えることができます。つまり、アプリケーションプロセスを複数の部分に分割して、マルチスレッドテクノロジーで同時に実行できます（割り込みテクノロジーの仮想実装または複数のCPUコアを介して）。
• 1つのスレッドで実行するのは理想的ではありませんが、単純にアプリケーションを複数のコアに直接配布することはさらに悪いことです
• 異なるスレッドと対話する方法は、JavaScriptのI / O操作とまったく同じです
• 同じプロセス内の複数のスレッドは状態を共有できますが、互いに独立しているプロセスはできません
• JavaScript環境では、ワーカーオブジェクトによって実行される並行コードが状態を共有することはありません

5.1。ワーカーオブジェクトのWebバージョン

• 主な目標は、DOMの応答性を損なうことなく複雑な計算を処理することです
• いくつかの潜在的な使用法：ビデオのデコード、通信の暗号化、Webエディターの解析
• 同様の理由で、ワーカーオブジェクトはグローバルウィンドウオブジェクトとメインスレッドおよびその他のワーカースレッドのオブジェクトを表示できません
• postMessageを介して送信されたオブジェクトは、透過的にシリアライズおよびデシリアライズされます。JSON.parseおよびJSON.stringifyについて考えてください。
• ワーカーオブジェクトはXMLHttpRequestを自由に使用できます
• 指定されたスクリプトを同期的にロードして実行できるimportScripts関数もあります。

5.2。クラスターによってもたらされるワーカーのノードバージョン

• node0.6の後に、同じポートにバインドする複数のプロセスをサポートするAPIが導入されました：クラスター（クラスター）
• 通常、最高のパフォーマンスを追求して、クラスターは各CPUコアに従ってプロセスを区別するために使用されます
• ワーカーオブジェクトのノードバージョンはcluster.fork（）によってリロードされ、独立したプロセスとして同じスクリプトを実行します。
• ブラウザは余分なスレッドをバックグラウンドタスクにダウングレードできます。ノードサーバーは、コンピューティングリソースを予約して、リクエスト処理のメインタスクを確保する必要があります。
• 最も有名な魔法：複数のワーカーオブジェクトがTCPポートをリッスンしようとすると、ノードは内部メッセージを使用してポートの共有を許可します
• 同様に、クラスターオブジェクトには、シリアル化されたオブジェクトまたは添付された文字列を含むいくつかのイベントに基づいて、メインスレッドと複数のワーカースレッドがあります
• スレッド間の通信オーバーヘッドを最小限に抑えるには、スレッド間の共有状態をRedisなどの外部データベースに保存する必要があります

第6章非同期スクリプトの読み込み

• スクリプトは分割して征服する必要があります。ページの見栄えを良くする責任があるスクリプトはすぐにロードし、後でロードできるスクリプトは後でロードします。

6.1。制限と補足事項

• インライン技術の使用は避けてください
• document.writeを使用しないでください
• document.writeがDOMを操作するときのGOTOステートメントと同等であることを知ってください

6.2。スクリプトタグの認識

• 最新のブラウザのスクリプトタグは、クラシックとノンブロッキングの2つの新しいタイプに分かれています。
• ページのbodyタグの最後にスクリプトを配置するのが一般的です。一方では、ユーザーはページをより速く見ることができます。他方では、イベントが自分自身をトリガーするのを待たずに、DOMに積極的に触れることができます。
• deferは、ドキュメントが読み込まれるのを静かに待機する整然としたキューイングシナリオを思い出させ、次にasyncは無秩序な無秩序を思い出させます
• スクリプトが遅延と非同期の両方を使用する場合、それを同時にサポートするブラウザーでは、非同期が遅延を上書きします

6.3。プログラム可能なスクリプトの読み込み

• サーバースクリプトを取得して実行する2つの適切な方法：Ajaxリクエストを生成し、eval関数を使用してレスポンスを処理する、スクリプトタグをDOMに挿入する
• require.jsの強力なツールキットは、AMDテクノロジーを使用して、最も複雑なスクリプト依存関係グラフでも自動的に平滑化できます
• 条件に基づいてスクリプトをロードする必要がある場合は、yepnopeなどのスクリプトローダーを検討してください。サイトに相互依存するスクリプトが多数ある場合は、require.jsを検討してください

裏に書く

• PDFブック、メモのマインドマップ、およびパッケージコードのダウンロードアドレス：https://pan.baidu.com/s/1WMzAciLMfTasiWFQjz4ftA（抽出コード：wd01）
• 紙の本Jingdong購入アドレス：https : //u.jd.com/e0BT68（学ぶために紙の本を使用することをお勧めします）
• 携帯電話での閲覧を容易にするために、これらのメモを公開アカウント「Send three factions four」に次々に投稿します。