モジュール解読

3789 ワード
javascript 先端
カテゴリ
主に以下のいくつかのモジュール化案を紹介します.
  • ES 6
  • Common JS
  • AMD
    • ES 6
    紹介:ES 6は言語標準のレベルで、モジュール機能を実現しました.しかも、かなり簡単に実現しました.CommonJSとAMD規格に取って代わることができます.ブラウザとサーバー共通のモジュールソリューションになります.
    特徴:
  • は、コンパイル時にモジュールの依存関係を決定することができるように、できるだけ静的にしてください.また、入力と出力の変数は
    • です.
  • ES 6モジュールはオブジェクトではなく、exportコマンドで明示的に出力コードを指定し、importコマンドで入力し、出力の対外インターフェース
    • を定義した.
  • このようなローディングは「コンパイル時ローディング」または静的ローディングと呼ばれ、すなわちES 6はコンパイル時にモジュールローディングを完了することができ、効率はCommunJSモジュールのローディング方式よりも高いです.もちろん、これはES 6モジュール自体を参照することができませんでした.対象ではないので
    • です.
  • コンパイル時にロードされ、静的解析が可能になる.
    文法的規則
  • さらに、export文が出力するインターフェースは、その対応する値が動的バインディング関係、すなわちこのインターフェースを通じて、モジュール内部のリアルタイムの値
    • に取り込むことができる.
  • exportコマンドは、モジュールの最上階にある限り、モジュールの任意の位置に現れることができる.ブロックレベルのスコープ内にあると、エラーが発生します.
  • は、exportコマンドの後に、大括弧を使用して、変数、匿名関数、名札関数を含む出力変数のセットを指定します.ここで間違った例を見てください.変数出力は
    • と同じです.
    //   
function f() {}
export f;

//   
export function f() {};

//   
function f() {}
export {f};
    importを見てください
  • importコマンド入力の変数は読み取り専用です.その本質は入力インターフェースですが、導入対象は属性を変更することができても、推奨されない
    • です.
  • は、一般的にimport文を処理の方法の前に置くが、importコマンドは、アップグレード効果があり、モジュール全体のヘッダにアップグレードされ、最初に実行され、エラーが発生することもない.
    • foo();

import { foo } from 'my_module';
    3.importは静的に実行されているので、式と変数は使用できません.これらは実行時にしか結果が得られない構文構造4.Babelトランスコードによって、CommonJSモジュールのrequireコマンドとES 6モジュールのimportコマンドは同じモジュールに記入できますが、それはしないほうがいいです.importは静的解析段階で実行されるので、モジュールの中で最初に実行される5.モジュール全体のロードを実現する6.export defaultを使用してデフォルト出力を指定し、対応するimport文は大かっこを使用する必要がない.
    import関数
  • は、動的ローディングモジュールをサポートし、実行時の処理モジュールが利点であるが、動的ローディングは
    • を失うことができない.
  • は非同期をサポートし、必要に応じて
    • をロードする.
  • このとき、requireが
    • をローディングするのと同じです.
    ちょっと見たほうがいいです.
    async function main() {
  const myModule = await import('./myModule.js');
  const {export1, export2} = await import('./myModule.js');
  const [module1, module2, module3] =
    await Promise.all([
      import('./module1.js'),
      import('./module2.js'),
      import('./module3.js'),
    ]);
}
main()
    1.非同期ブロックを防止する2.import戻り値の解消
    ES 6とCommon JSの違い
  • Common JSモジュールが出力するのは値のコピーです.ES 6モジュールが出力するのは値の参照
    • です.
  • Common JSモジュールは実行時にロードされ、ES 6モジュールはコンパイル時に出力インターフェース
    • です.
    Common JS
  • Common JSのモジュールはスクリプトファイルです.requireコマンドは、最初にスクリプトをロードすると、スクリプト全体を実行し、メモリ内にオブジェクトを生成し、オブジェクトは3つの属性に注目する.
  • id:モジュール名
  • export:出力インターフェース
  • loaded:スクリプトが実行されたかどうか
    • 再requireはスクリプトを実行しません.対応する結果とコピー値だけを取得します.
  • ロード時
    • を実行します.
  • 文法
  • module.exports = valueまたはexports.xxx = value
  • require(xxx)、もし第三者モジュールであれば、xxxはモジュール名である.カスタムモジュールの場合、xxxはモジュールファイルパス
    • です.
    AMD
    asyncで始まる言葉には、一般的に非同期的な意味があります.node appiに多いです.ブラウザでモジュールをロードするのはこのような案を採用します.
  • define定義モジュール
    • を使用する.
  • は、requireを使用してモジュールを使用し、処理ロジック非同期
    • を実行する.
    モジュール化記事はhttps://es6.ruanyifeng.com/#d...を参照してください.
    いくつかの問題
  • 必要に応じて
    • をロードする.
    import { stat, exists, readFile } from 'fs';
    ここにはモジュールだけが必要です.他はロードしません.これは必要に応じてどのように実装されますか?
  • deferとasyncの違いは
    • です.
  • 、node.jsでES 6を使用したモジュール化
  • 循環ローディングはどのように処理しますか?
  • ES 6はコンパイルする時モジュールを分析して、実行の文脈の中でVOを分析することに相当して、循環的にロードする時定義の方式を見て、変数の昇格していない普通はエラーを報告することを招きます.
  • は、Common JSに対して、ループローディングの実行プロセスは以下の通りである.
  • は他のモジュールをロードし、jsモジュールの実行権は新しいモジュール
    • に変化する.
  • サイクルプロセスは、ロードされたモジュールを繰り返して実行しません.キャッシュ結果のみを取得します.
  • ちなみにwebpackのはリサイクルがありますか?
    • javascriptはどのように変数が配列であるかを判断しますか?