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 セレクタのグループ化の簡単な分析

推薦する

MySQL 関数インデックス最適化ソリューション

MySQL を使用する場合、多くの開発者は一部の列に対して関数計算を実行することが多く、その結果、イ...

ElementuiはデータをxlsxとExcelテーブルにエクスポートします

最近、Vue プロジェクトについて知り、ElementUI でデータを xlsx および Excel...

uniapp プロジェクトで MQTT を使用する方法

目次1. uniappプラグインマーケットのリファレンスプラグイン2. 具体的な導入プロセス1. m...

WeChatアプレットタブの左右スライドスイッチ機能実装コード

効果画像: 1. はじめに独自のアプレットでこのような機能を実装する必要がある1. 核となる考え方ス...

小さな画面のモバイルデバイス向けにWebページを設計する際に注意すべきこと

その理由は、このタイプの Web ページが WAP と呼ばれるワイヤレス プロトコルから生成されたた...

DockerにElasticsearch7.6クラスタをインストールしてパスワードを設定する方法

目次基本的な設定バージョンとDockerイメージについて始めるelasticsearch.ymlにつ...

CSS3は、ズームと回転を実現するためにscale()とrotate()を使用します。

1. scale() メソッドズームとは「縮小」と「拡大」を意味します。 CSS3 では、scal...

MySQLデスクトップツールSQLyogのリソースとアクティベーション方法は、白黒のコマンドラインに別れを告げます

では、早速リソースについて見ていきましょう。 123WORDPRESS.COM ダウンロードSQLy...

Vue3 のリアクティブ関数 toRef 関数 ref 関数の紹介

目次リアクティブ機能使用法: toRef 関数 (理解するだけ)使用法: ref関数レスポンシブデー...

CSS リスト モデルでのマーカー タグの使用

この記事では主に、 list-itemの下にある::master疑似要素、 list-style-i...

LinuxのCentos7でmysql5.7.29を構築する詳細なプロセス

1. MySQLをダウンロードする1.1 ダウンロードアドレスhttps://downloads.m...

VMWare ネットワーク アダプタの 3 つのモードの実装プロセスの分析

3つのモードブリッジ(ブリッジ モード)、NAT(ネットワーク アドレス変換モード)、ホストオンリー...

VUE 3 テレポート コンポーネントと使用構文をすぐに使い始める

目次1. テレポートの紹介1.1. 複数のテレポートを使用する2. テレポートを使用する理由3. テ...

require/import キーワードを使用して v-for ループでローカル画像をインポートするいくつかの方法

目次問題の説明方法 1 (バックエンドが画像 URL を返す)方法 2 (フロントエンドで requ...

Linux で同じバージョンの R を使用して Seurat2 と Seurat3 を同時にインストールするチュートリアル

Seurat は、単一細胞解析用の重量級の R パッケージです。使用したことがある人なら誰でも、その...