フロントエンド ESM とは何ですか。具体的なコード例が必要です。
フロントエンド開発では、ESM は ECMAScript モジュールを指します。これは、以下に基づくモジュール式開発手法です。 ECMAScriptの仕様。 ESM は、より優れたコード構成、モジュール間の分離、再利用性など、多くの利点をもたらします。この記事では、ESM の基本概念と使用法を紹介し、いくつかの具体的なコード例を示します。
<script type="module" src="main.js"></script>
モジュール ファイルでは、import ステートメントを使用して他のモジュールのインターフェイスを導入し、export ステートメントを使用して独自のインターフェイスを他のモジュールに公開できます。たとえば、2 つのモジュール ファイルがあります。
// module1.js export function sayHello() { console.log("Hello, module1!"); } // module2.js import { sayHello } from "./module1.js"; sayHello();
2.2 エクスポートおよびインポート インターフェイス
ESM では、export ステートメントを使用して、モジュール内の変数、関数、またはクラスを他のモジュールにエクスポートできます。例:
// module1.js export const PI = 3.14; export function square(x) { return x * x; }
他のモジュールは、import ステートメントを使用してインターフェースを module1.js にインポートし、それを使用できます。例:
// module2.js import { PI, square } from "./module1.js"; console.log(PI); // 输出3.14 console.log(square(2)); // 输出4
2.3 デフォルトのエクスポートとデフォルトのインポート
名前付きインターフェイスのエクスポートに加えて、ESM はデフォルトのエクスポートとデフォルトのインポートもサポートしています。モジュールにはデフォルトのエクスポートを 1 つだけ含めることができ、デフォルトのエクスポートを {} で囲む必要はありません。デフォルトのインポートでは、任意の変数名を使用して受信できます。例:
// module1.js export default function sayGoodbye() { console.log("Goodbye!"); } // module2.js import goodbye from "./module1.js"; goodbye(); // 输出Goodbye!
ESM の利点は、モジュールの依存関係がより明確になり、モジュールの読み込みと実行順序を制御するためにグローバル変数を使用する必要がないことです。 CommonJS の利点は、実行時にモジュールの依存関係を動的に計算できるため、より高い柔軟性が得られることです。
次は、ESM と CommonJS を混合する例です:
// module1.js (ESM) export const PI = 3.14; // module2.js (CommonJS) const { PI } = require("./module1.js"); console.log(PI); // 输出3.14
概要:
ESM は、フロントエンド開発で一般的に使用されるモジュラー開発手法であり、静的なインポートと共有を通じてモジュールを管理します。エクスポートの参照関係。 ESM では、モジュールは相互に参照してコードを再利用でき、グローバル変数の汚染を心配する必要はありません。実際の開発では、モジュールの考え方に従って複雑なコードを分割し、コードの保守性と可読性を向上させることができます。
以上は ESM の基本的な概念と使い方についての紹介でしたが、この記事の紹介を通じて読者の皆様が ESM について一定の理解を深め、実際の開発に ESM 技術を適用できるようになれば幸いです。
以上がフロントエンド モジュラー ESM とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。