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

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 の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Node.js のモジュール性、npm パッケージ マネージャーの説明
  • NodeJSのモジュール性に関する詳細な説明
  • JavaScriptのモジュール性を理解する方法
  • JSフロントエンドモジュール化のいくつかの仕様についての簡単な説明
  • モジュール管理を実現するための JavaScript でのエクスポートとインポートに関するチュートリアル
  • JavaScript のモジュール性の説明

<<:  mysql maxとwhere間の実行問題の概要

>>:  Windows での Maven のインストールと構成に関するグラフィカル チュートリアル (ローカライズされたウェアハウス構成を含む)

推薦する

エラー 1045 (28000): ユーザー ''root''@''localhost'' のアクセスが拒否されました (パスワード使用: YES) 実用的な解決策

昨日はデータベースへの接続に問題はありませんでしたが、今日はデータベースへの接続時にこのエラーが報告...

MySQL で準備、実行、割り当て解除ステートメントを使用するチュートリアル

序文MySQLでは、準備、実行、割り当て解除を正式にはPREPARE STATEMENTと呼びます。...

JSタイマーを使用して要素を移動する

JS タイマーを使用して、要素に移動する効果のあるメソッドを作成します。実装のアイデアは、まず要素の...

MySQL InnoDBセカンダリインデックスのソート例の詳細な説明

ソート問題最近、Geek Time の「45 Lectures on MySQL Practice」...

vue+tp5はシンプルなログイン機能を実現

この記事では、参考までに、簡単なログイン機能を実装するためのvue+tp5の具体的なコードを紹介しま...

TypeScript のマップされた型とより優れたリテラル型推論について説明します。

目次概要マップされた型を使用して Object.freeze() を構築するマッピングタイプの構文は...

MySQLの結合の基本原理についての簡単な説明

目次結合アルゴリズム駆動テーブルと非駆動テーブルの違い1. 単純なネストループ結合、単純なネスト、イ...

MySQL 10進数符号なし更新負数を0に変換

今日、インターフェースの同時実行の問題を検証したところ、これまでredisで解決していた同時実行のプ...

MySQLデータベーステーブルの容量を確認する方法の例

この記事では、MySQL のデータベース テーブルの容量を確認するためのコマンド ステートメントを紹...

MySQL データベース グループ クエリの group by ステートメントの詳細な説明

1: グループ化関数の記述順序 1 選択 ... 2 から ... 3 どこで ... 4 グループ...

InnoDB ロック (レコード、ギャップ、Next-Key ロック) の詳細な説明

レコード ロックは、単一のインデックス レコードをロックします。レコード ロックは常にインデックスを...

httpsウェブサイトにリファラーhttpsとhttpジャンプリファラーを送信させる方法

この記事では、HTTP プロトコルのリファラーのメタデータ パラメータの提案について説明します。この...

MySQL アップグレードのベストプラクティス

MySQL 5.7 には、オンライン DDL、マルチソース レプリケーション、拡張された半同期、テー...