JavaScript ES6 モジュールの詳細な説明

JavaScript ES6 モジュールの詳細な説明

0. モジュールとは何か

歴史的に、JavaScript にはモジュール システムがなかったため、大規模なプログラムを小さな相互依存ファイルに分割し、それらを簡単な方法で組み立てることは不可能でした。他の言語にもこの機能があり、例えばRubyのrequire、Pythonのimport、さらにはCSSにも@importがありますが、JavaScriptにはこの点に関するサポートがないため、大規模で複雑なプロジェクトの開発に大きな障害となっています。

ES6 より前に、コミュニティはいくつかのモジュール読み込みソリューションを開発しましたが、その中で最も重要なのは CommonJS と AMD でした。 ES6 モジュールの設計思想は、モジュールの依存関係や入力変数、出力変数をコンパイル時に決定できるように、可能な限り静的にすることです。 ES6 モジュールはオブジェクトではなく、エクスポート コマンドを通じて出力用に明示的に指定され、インポート コマンドを通じてインポートされるコードです。

モジュール システムによって解決される主な問題は次のとおりです。

  • モジュール化の問題
  • グローバル変数を削除する
  • ロード順序の管理

1.モジュールの読み込み

<script> タグを使用してモジュールをロードする場合は、type="module" を追加する必要があります。

1.1 方法1

<スクリプトタイプ="モジュール">
    「./module.js」からモジュールをインポートします。
</スクリプト>

1.2 方法2

<script src="./module.js" type="module"></script>

2. 輸出と輸入

2.1 モジュールのエクスポートは他のモジュールからインポートしてアクセスできます。

例 1: About.js を使用して Base.js 内の Base オブジェクトを呼び出し、ホームページに出力します。

インデックス.html

<スクリプトタイプ="モジュール">
    「./js/About.js」からAboutをインポートします。
    console.log(バージョン情報);
</スクリプト>

ベース

定数ベース = {
    ニックネーム: 'admin',
    年齢: 19
}
デフォルトのベースをエクスポートします。

について

'../js/Base.js' から Base をインポートします。
const src = `ニックネーム:${Base.nick},年齢:${Base.age}.`;
デフォルトの src をエクスポートします。

出力:

ニックネーム:admin、年齢:19。

2.2 輸出されていなくても輸入できる

例 2: About.js はエクスポートされず、ホームページにインポートされます。

インデックス.html

<スクリプトタイプ="モジュール">
    「./js/About.js」をインポートします。
</スクリプト>

について

const src = 'Hello World!';
コンソールログ(ソース);

出力:

「こんにちは世界」

2.3 インポートされたコードは一度だけ実行されます

例 3: About.js を 3 回インポートし、エクスポート結果を確認します。

インデックス.html

<スクリプトタイプ="モジュール">
    「./js/About.js」をインポートします。
    「./js/About.js」をインポートします。
    「./js/About.js」をインポートします。
</スクリプト>

について

const src = 'Hello World!';
コンソールログ(ソース);

出力:

「こんにちは世界」

3. デフォルトのエクスポートと対応するインポート

export default はデフォルト値をエクスポートするために使用されます。モジュールには 1 つしか設定できません。

エクスポートにエクスポート デフォルトを使用する場合、インポート名は任意の名前にすることができます。

例 4: export default を使用してエクスポートし、インポートに任意の名前を付けます。

インデックス.html

<スクリプトタイプ="モジュール">
    「./js/About.js」からbbbをインポートします。
    コンソールにログ出力します。
</スクリプト>

について

const src = 'Hello World!';
デフォルトの src をエクスポートします。

出力:

「こんにちは世界」

4. 輸出とそれに伴う輸入

export を使用してエクスポートする場合、インポートの名前は任意にすることはできません。

例 5: export を使用してエクスポートします。

インデックス.html

<スクリプトタイプ="モジュール">
    「./js/About.js」から{age、nick}をインポートします。
    console.log(ニックネーム、年齢);
</スクリプト>

jsについて

定数年齢 = 18;
{age} をエクスポートします。
// 年齢をエクスポートします; ×
// エクスポート const age = 18; √
エクスポート const nick = 'admin';

出力:

管理者 18

5. モジュールに関する注意事項

1. モジュールでは、トップレベルの this は undefined を指します。

2import には昇格効果があり、モジュール全体の先頭に昇格され、最初に実行されます。

3. インポートが実行された時点では、コードはまだ実行されていません。

4. インポートとエクスポートは、コード ブロック内ではなく、モジュールの最上位レベルでのみ実行できます。

5.import() は条件付きでインポートできます。

6. 複合書き込みメソッドはエクスポートされており、現在のモジュールでは使用できません

複合書き込み、インポートしてからエクスポート:

'./js/About.js' から About をエクスポートします。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Node.js エクスポート、module.exports および ES6 エクスポート、エクスポートのデフォルトの詳細な説明
  • ES6入門チュートリアル: クラスとモジュールの詳細な説明
  • ES6のモジュール開発例の簡単な分析
  • ES6の新機能であるModuleの使い方を詳しく解説

<<:  Docker でコンテナのポート マッピングを動的に変更する方法

>>:  CSS セレクタのグループ化の簡単な分析

推薦する

Dockerコンテナのホスト間マルチネットワークセグメント通信ソリューションの詳細説明

1. マックヴラン前回のブログ投稿で紹介した Docker コンテナのホスト間通信を実現するための ...

GolangでMySQLデータベースのバックアップを実装する方法

背景Navicat は、最高の MySQL 視覚化ツールです。ただし、ビューのインポートとエクスポー...

MySQL マスタースレーブレプリケーションの役割と動作原理の詳細な説明

1. マスタースレーブレプリケーションとは何ですか?マスタースレーブレプリケーションは、スレーブデー...

Linux環境でOpenSSL証明書を生成する

1. 環境: CentOS7、OpenSSL1.1.1k。 2. コンセプト:ルート証明書: サーバ...

Json の長所と短所、使用方法の紹介

目次1. JSONとは何か1.1 配列リテラル1.2 オブジェクトリテラル1.3 混合リテラル1.4...

vue-admin-template 動的ルーティング実装例

ログインを提供し、ユーザー情報データインターフェースを取得するapi/user.js内 '@...

Linux システムでのユーザー管理の概要

目次1. ユーザーとユーザーグループの重要性1) ユーザーの存在意義2) ユーザーグループの重要性2...

HTML ページ内の js および css ファイルのキャッシュを自動的にクリーンアップします (バージョン番号を自動的に追加します)

Web プロジェクトの開発プロセスでは、CSS ファイルや JS ファイルを参照することがよくあり...

MySQL 8.0.13 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.13のインストールと設定のチュートリアルを参考までに紹介します。具...

CSS の子要素を親要素と高い一貫性を持たせる方法

絶対位置決め方式: (1)親要素を相対配置に設定します。親要素の高さを指定しない場合は、左の子要素の...

MySQL の NULL 値に関する体験談と分析チュートリアルシリーズ

目次1. テストデータ2. ヌル値による不便3. スペース、空の値、null をどのように判断すれば...

Vueはダイアログのカプセル化を実装します

目次Vue2 ライティングVue3プラグインのバージョンの記述Vue3 動的コンポーネントの記述書き...

非常に便利な CSS 開発ツール 8 つを紹介

CSS3 パターン ギャラリーこの CSS3 パターン ライブラリには、純粋な CSS3 を使用して...

Docker は MySQL をインストールし、中国語の文字化けの問題を解決します

目次1. MySQLイメージを取得する2. ダウンロードが完了したか確認する3. MySQLはローカ...