JavaScriptのモジュール性を理解する方法

1. ブラウザのサポート

JavaScript モジュールの使用は、インポートとエクスポートに依存します。インポートとエクスポートのブラウザサポートは、最新のブラウザバージョンではサポートされていますが、IE や古いバージョンのブラウザではサポートされていません。そのため、IE や古いバージョンのブラウザとの互換性を保ちたい場合は、基本的に使用できません。

エクスポートとインポートはペアになって連携して動作します。

JSのモジュール化は、さまざまなJSフレームワークを学ぶための前提条件です。

import および export ステートメントは、モジュール内の特定の機能を実装する変数または関数をインポート/エクスポートするために使用されます。クラスをインポート/エクスポートすることもできます。

2.エクスポートモジュールのエクスポート

デフォルトのエクスポート

モジュールにはデフォルトのエクスポートが 1 つしか存在できず、デフォルトのエクスポート変数も 1 つしか存在できず、中括弧 {} は使用できません。

構文はエクスポートデフォルト変数名です

モデル.js

関数Test1(){
    console.log("これはデフォルトのエクスポートです")
}
関数Test2(){
    console.log('これは名前付きエクスポートです')
}
デフォルトをエクスポートする Test1

バッチエクスポート

構文は export {変数名, 変数名...} です。

関数Test1(){
    console.log("これはデフォルトのエクスポートです")
}
関数Test2(){
    console.log('これは名前付きエクスポートです')
}
エクスポート {Test1, Test2}

3. モジュールをインポートする

デフォルトのインポート

メイン.js

「./model.js」からTest1をインポートします。
テスト1()

デフォルトのインポートの名前変更

メイン.js

import x from "./model.js" //xはデフォルトでエクスポートされたTest1です
x()

バッチインポート

メイン.js

"./model.js" から {Test1, Test2} をインポートします。
テスト1();
テスト2();

一括インポートの名前変更

asキーワードの後に​​新しい名前が続き、名前の変更を実装します。

メイン.js

"./model.js" から {Test1 を x1 として、Test2 を x2 として} をインポートします。
1 を 1 にする
2倍

エクスポート時にasキーワードを使用して名前を変更することもできます。

モデル.js

関数Test1(){
    console.log("これはデフォルトのエクスポートです")
}
関数Test2(){
    console.log('これは名前付きエクスポートです')
}
エクスポート {Test1 を x1 として、Test2 を x2 として}

アプリケーションモジュール

html

<script src="main.js"></script>

4. モジュールオブジェクトを作成する

オブジェクトを使用すると、asキーワードに基づいて名前の変更がさらに簡素化されます。

* を「./model.js」からモデルとしてインポートします。
モデル.x1();
モデル.x2();

5. 輸出入中継ステーション

複数のサブモジュールを親モジュールに結合し、親モジュールがどのサブモジュールをエクスポートするかを決定する場合があります。この親モジュール ファイルは、さまざまなモジュールを組み合わせるためのトランジット ステーションのようなものです。

構文は、モジュールパスからエクスポート{変数名}です。

現在のディレクトリ構造

ソース

インデックス.html

メイン.js

リダイレクト.js

モデル

モデル.js

モデル2.js

モデル.js

関数Test1(){
    console.log("これはサブモジュール1です")
}
エクスポート {Test1}

モデル2.js

関数Test2(){
    console.log('これはサブモジュール2です')
}
エクスポート {Test2}

リダイレクト.js

「./models/model.js」から{Test1}をエクスポートします。
「./models/model2.js」から{Test2}をエクスポートします。

メイン.js

* を「./redirection.js」からモデルとしてインポートします。
モデル.テスト1()
モデル.テスト2()

html

<script src="./main.js"></script>

6. モジュールの動的ロード

動的にロードされるモジュールは、すべてのモジュールを事前にロードせずにモジュールをインポートするために使用されます。必要に応じて import() を関数呼び出しとして使用し、そのパラメータをモジュールのパスに渡すと、promise が返されます。モジュールのロード結果を操作するために、Promise オブジェクトを使用します。

構文はimport（動的にロードされたモジュールパス）です。

ダイナミック

関数TestDy(){
    console.log("これは動的モジュールです")
}
デフォルトの TestDy をエクスポートする

メイン.js

document.querySelector('.load').onclick = function(){
    import('./dynamic.js').then((モデル)=>{
        モデル.default()
    })
}

以上がJavaScriptのモジュール化を理解する方法の詳細です。JavaScriptのモジュール化の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。