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

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

Mar 07, 2022 pm 06:58 PM
es6 モジュラー

違い: 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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

非同期は es6 または es7 用ですか? 非同期は es6 または es7 用ですか? Jan 29, 2023 pm 05:36 PM

非同期はes7です。 async と await は ES7 に新しく追加されたもので、非同期操作のソリューションです。async/await は co モジュールとジェネレーター関数の糖衣構文と言え、より明確なセマンティクスで JS 非同期コードを解決します。名前が示すように、async は「非同期」を意味します。async は関数が非同期であることを宣言するために使用されます。async と await の間には厳密な規則があります。両方を互いに分離することはできず、await は async 関数内でのみ記述できます。

Java コードの保守性を最適化する方法: 経験とアドバイス Java コードの保守性を最適化する方法: 経験とアドバイス Nov 22, 2023 pm 05:18 PM

Java コードの保守性を最適化する方法: 経験とアドバイス ソフトウェア開発プロセスでは、保守性の高いコードを作成することが重要です。保守性とは、予期せぬ問題や追加の労力を引き起こすことなく、コードを簡単に理解、変更、拡張できることを意味します。 Java 開発者にとって、コードの保守性を最適化する方法は重要な問題です。この記事では、Java 開発者がコードの保守性を向上させるのに役立ついくつかの経験と提案を共有します。標準化された命名規則に従うと、コードが読みやすくなります。

Python コードの保守性が悪いエラーを解決するにはどうすればよいですか? Python コードの保守性が悪いエラーを解決するにはどうすればよいですか? Jun 25, 2023 am 11:58 AM

Python は高級プログラミング言語として、ソフトウェア開発で広く使用されています。 Python には多くの利点がありますが、多くの Python プログラマーがよく直面する問題は、コードの保守性が低いことです。 Python コードの保守性には、コードの読みやすさ、拡張性、再利用性が含まれます。この記事では、Python コードの保守性が低いという問題を解決する方法に焦点を当てます。 1. コードの可読性 コードの可読性とは、コードの可読性を指し、コードの保守性の核心となります。

es6 の一時的なデッドゾーンとは何を意味しますか? es6 の一時的なデッドゾーンとは何を意味しますか? Jan 03, 2023 pm 03:56 PM

es6 では、一時的なデッド ゾーンは構文エラーであり、ブロックを閉じたスコープにする let および const コマンドを指します。コード ブロック内では、let/const コマンドを使用して変数が宣言される前に、変数は使用できず、変数が宣言される前は変数の「デッド ゾーン」に属します。これは構文上「一時デッド ゾーン」と呼ばれます。 ES6 では、一時的なデッド ゾーンや let ステートメントや const ステートメントでは変数のプロモーションが発生しないことを規定しています。これは主に実行時エラーを減らし、変数が宣言される前に使用されて予期しない動作が発生するのを防ぐためです。

es5 および es6 で配列重複排除を実装する方法 es5 および es6 で配列重複排除を実装する方法 Jan 16, 2023 pm 05:09 PM

es5 では、for ステートメントと IndexOf() 関数を使用して配列の重複排除を実現できます。構文 "for(i=0;i<配列長;i++){a=newArr.indexOf(arr[i]);if( a== -1){...}}」。 es6 では、スプレッド演算子 Array.from() および Set を使用して重複を削除できます。まず配列を Set オブジェクトに変換して重複を削除してから、スプレッド演算子または Array.from() 関数を使用する必要があります。 Set オブジェクトを配列に変換してグループ化するだけです。

Python コードのコード複雑さのエラーを解決するにはどうすればよいですか? Python コードのコード複雑さのエラーを解決するにはどうすればよいですか? Jun 24, 2023 pm 05:43 PM

Python はシンプルで習得が簡単で効率的なプログラミング言語ですが、Python コードを作成すると、コードが過度に複雑になるため問題が発生する場合があります。これらの問題が解決されない場合、コードの保守が困難になり、エラーが発生しやすくなり、コードの可読性とスケーラビリティが低下します。そこで、この記事では、Python コードのコード複雑さのエラーを解決する方法について説明します。コードの複雑さについて コードの複雑さは、理解と保守が難しいコードの性質を表す尺度です。 Pythonでは使用できるインジケーターがいくつかあります

es6 インポートは変数をプロモートしますか? es6 インポートは変数をプロモートしますか? Jan 18, 2023 pm 07:44 PM

ES6 インポートにより変数が昇格されます。変数ホイスティングとは、変数宣言をそのスコープの先頭に昇格させることです。 js はコンパイルと実行のフェーズを経る必要があります。コンパイル フェーズでは、すべての変数宣言が収集され、変数は事前に宣言され、他のステートメントの順序は変更されません。したがって、コンパイル フェーズでは、最初のステップはすでに2 番目の部分は、ステートメントが実行フェーズで実行された場合にのみ実行されます。

コードのモジュール化の練習に Go 言語を使用する方法 コードのモジュール化の練習に Go 言語を使用する方法 Aug 03, 2023 am 10:31 AM

コードのモジュール化実践のための Go 言語の使い方 はじめに: ソフトウェア開発において、コードのモジュール化は一般的な開発手法であり、コードを再利用可能なモジュールに分割することで、コードの保守性、テスト容易性、テスト容易性を向上させることができます。この記事では、Go 言語を使用してコードのモジュール化を実践する方法と、対応するコード例を紹介します。 1. モジュール化の利点により、コードの保守性が向上します。モジュール化により、コードが独立した機能モジュールに分割され、各モジュールが特定のタスクを担当するため、コードがより明確になり、変更が容易になります。コードは改善できる

See all articles