ホームページ  >  記事  >  ウェブフロントエンド  >  commonjsとes6のモジュール性の違いは何ですか

commonjsとes6のモジュール性の違いは何ですか

青灯夜游
青灯夜游オリジナル
2022-03-07 18:58:2012676ブラウズ

違い: 1. CommonJS モジュールは実行時にロードされますが、ES6 モジュールはコンパイル時の出力インターフェイスです; 2. CommonJS モジュールの require() はモジュールを同期的にロードしますが、CommonJS モジュールの import コマンドはES6 モジュールは非同期でロードされます; 3.、CommonJS はモジュールの浅いコピーであり、ES6 はモジュールの導入です。

commonjsとes6のモジュール性の違いは何ですか

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

CommonJS

  • 基本的なデータ型の場合、これはコピーです。つまり、モジュールによってキャッシュされます。同時に、このモジュールによって出力された変数を別のモジュールで再割り当てすることができます。

  • 複雑なデータ型の場合、これは浅いコピーです。 2 つのモジュールによって参照されるオブジェクトは同じメモリ空間を指しているため、モジュールの値を変更すると、もう一方のモジュールに影響します。

  • require コマンドを使用してモジュールがロードされると、モジュール全体のコードが実行されます。

  • require コマンドを使用して同じモジュールをロードすると、モジュールは再度実行されませんが、キャッシュ内の値が取得されます。つまり、CommonJS モジュールは何度ロードされても、最初にロードされたときに 1 回だけ実行され、後でロードされた場合は、システム キャッシュがない限り、最初の実行の結果が返されます。手動でクリアされます。

  • ループ内でロードする場合、ロード中に実行されます。つまり、スクリプト コードが必要な場合は、すべて実行されます。モジュールを「ループロード」すると、実行された部分のみが出力され、未実行の部分は出力されません。

ES6 モジュール

  • ES6 モジュール内の値は [動的読み取り専用参照] に属します。

  • 読み取り専用の場合、インポートされた変数の値は変更できません。インポートされた変数は、基本データ型であるか、データ型であるかに関係なく、読み取り専用です。複雑なデータ型。モジュールがインポート コマンドに遭遇すると、読み取り専用の参照が生成されます。スクリプトが実際に実行されると、この読み取り専用参照に基づいて、ロードされたモジュールから値が取得されます。

  • ダイナミクスの場合、元の値が変更されると、インポートによって読み込まれる値も変更されます。基本データ型であるか、複雑なデータ型であるか。

  • ループ内でロードする場合、ES6 モジュールは動的に参照されます。 2 つのモジュール間に何らかの参照が存在する限り、コードは実行できます。

ES6 モジュールと CommonJS モジュールの違い

1. CommonJS モジュールは実行時にロードされますが、ES6 モジュールはコンパイル時の出力インターフェイスです。

2. CommonJS モジュールの require() はモジュールを同期的に読み込みますが、ES6 モジュールの import コマンドはモジュールの依存関係を独立した解決フェーズで非同期的に読み込みます。

3. CommonJS はモジュールの浅いコピーであり、ES6 モジュールはモジュールの導入です。つまり、ES6 モジュールは読み取り専用であり、その値を変更できません。具体的な点は、 const と同様に、ポインタは変更できません。

4. import のインターフェースは読み取り専用 (読み取り専用状態) であり、その変数値は変更できません。つまり、変数を指すポインタは変更できませんが、変数を指す内部ポインタは変更できます。 commonJS ペアを再割り当てする (ポインターの指す位置を変更する) ことはできますが、ES6 モジュールに値を割り当てるとコンパイル エラーが発生します。

ES6 モジュールと CommonJS モジュールの共通点:

1. CommonJS モジュールと ES6 モジュールは両方とも、インポートされたオブジェクトに値を割り当てることができます。オブジェクトの内部プロパティの値が変更されます。

【関連する推奨事項: JavaScript ビデオ チュートリアル Web フロントエンド ]

以上がcommonjsとes6のモジュール性の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。