Jsモジュール化の動作原理とソリューションの詳細な説明

1. モジュラーコンセプト

複雑なプログラムを、特定のルール (仕様) に従って複数のブロック (ファイル) にカプセル化し、それらを組み合わせます。ブロックの内部データと実装は非公開であり、一部のインターフェース (メソッド) のみが外部に公開され、他の外部モジュールと通信します。

2. モジュール化

モジュラー JavaScript を使用する理由は何ですか?

実際の開発プロセスでは、変数、関数、オブジェクトなどの名前の競合が頻繁に発生し、競合が発生してグローバル変数が汚染される可能性があるためです。
同時に、プログラムが複雑な場合は、多くのコードを記述する必要があり、多くのライブラリを導入する必要があるため、注意しないとファイルの依存関係に混乱が生じやすくなります。
上記の問題を解決するために、モジュラー js を使い始めました。モジュール化の役割は次のとおりです。

グローバル変数の汚染を避ける
コードの記述と保守が簡単

3. モジュール化プロセス

1. 通常の記述（グローバル関数と変数）

実際、異なる関数や変数をまとめる限り、それは単純なモジュールです。これの欠点は明らかで、変数が簡単に汚染されるということです。

var name = 'カカ';
関数cat1(){
    name = '年々';
}
関数cat2(){
    name = '魚がいます';
}

2. オブジェクトのカプセル化

モジュール全体をオブジェクトに配置し、外部からアクセスするときにオブジェクトのプロパティまたはメソッドを直接呼び出します。

var 猫 = {
    名前:「カカ」
    cat1:関数(){
        var name = '年々';
        console.log(名前);
    },
    cat2:関数(){
        var name = '魚がいます';
        console.log(名前);
    }
}
cat.name;// Kakacat.cat1();// Nian Niancat.cat2();// 魚がいる

この方法は変数の競合問題を解決しますが、外部の関係者によって自由に変更されやすいという欠点があります。

cat.name = 'ルー・ルー';

3. 匿名関数メソッド

var cat = (関数() {
    // 匿名関数のローカル変数名
    var name = 'カカ';
    // 匿名関数のローカル関数 cat1
    var cat1 = 関数() {
        var name = '年々';
        console.log(名前);
    };
    // 匿名関数のローカル関数 cat2
    var cat2 = 関数() {
        var name = '魚がいます';
        console.log(名前);
    };
    //ウィンドウを通して外部ポートを公開します。外部からアクセスできるようにする場合は、ここに配置します。window.myModule = {
        猫1:猫1,
        猫2:猫2,
        名前:名前、
    };
})();
console.log(myModule.name);// name変数は露出ポートに配置され、出力できます。結果は次のようになります。KakamyModule.cat1();// cat1関数は露出ポートに配置され、出力できます。結果は次のようになります。Nian NianmyModule.cat2();// cat2関数は露出ポートに配置され、出力できます。結果は次のようになります。魚がいます

変数名が削除されると、その時点ではアクセスできず、結果は未定義になります。これにより、変数が任意に変更されないという問題が解決されます。

ウィンドウ.myModule = {
    猫1:猫1,
    猫2:猫2,
};
console.log(myModule.name); // 未定義

匿名関数メソッドは、基本的に関数汚染と変数の恣意的な変更の問題を解決し、モジュール仕様の基礎でもあります。

4. モジュラーソリューション

匿名関数が自分自身を呼び出す方法に基づき、コードの依存関係を強化するために、ほとんどの JavaScript ランタイム環境には独自のモジュール仕様が採用されるようになりました。

Commonjs、AMD、CMD、ES6モジュールの4つのカテゴリに分けられます。

1. コモンJS

①ブラウザ環境ではなく、ノード環境で使用②NodeJSは仕様に準拠③依存関係を導入するにはrequire()を使用する④モジュールを公開するにはexportsを使用する

2. AMD

①ブラウザ環境でのモジュールの非同期読み込み ②RequireJSが準拠する仕様 ③モジュール管理ツールライブラリrequire.jsに依存 ④AMDが依存関係の事前配置を提唱

3. CM

①ブラウザ環境では非同期と同期の両方の読み込みをサポート ②SeaJSは仕様に準拠 ③CMDは最も近いものに依存することを推奨

4. ES6モジュール

ES6 のモジュール構文は、コンパイル時にモジュールの依存関係を決定でき、入力と出力の変数宣言も決定できます。これはもはや単なるモジュール仕様ではなく、次の機能を備えた JS 言語の標準構文として使用されるようになりました。

①ブラウザとサーバー環境の両方でサポートされています ②モジュールの依存関係と変数はコンパイル時に決定でき、その他のモジュール仕様は実行時に決定されます ③エクスポートコマンドはモジュールの外部インターフェースを指定するために使用されます ④インポートコマンドは他のモジュールが提供する関数を入力するために使用されます

ここでもう 1 つ付け加えておきたいことがあります。ES5 バージョンのモジュール化ソリューションは、言語レベルでのモジュール化しか実現しません。欠点は、ほとんどの JavaScript オペレーティング環境で直接実行できないことです。正常に実行するには、ビルドツールを使用して標準の ES5 に変換する必要があります。ここでは、自動ビルドツール webpack を使用する必要があります。

上記は、Js モジュール化の動作原理とソリューションの詳細な説明です。Js モジュール化の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません: