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 のインストールと構成に関するグラフィカル チュートリアル (ローカライズされたウェアハウス構成を含む)

推薦する

Linux サーバーに埋め込まれた ddgs および qW3xT.2 マイニング ウイルスの対処の実践記録

序文仮想通貨の狂気的な投機により、マイニングウイルスは犯罪者が最も頻繁に使用する攻撃方法の 1 つに...

Centos7 で mysqldump を使用して MySQL データベースの毎日の自動バックアップを作成する

1. 要件:データベースのバックアップは、実稼働環境にとって特に重要です。データベースのバックアップ...

JS配列ループ方式と効率分析の比較

配列メソッドJavaScript には多くの配列メソッドが用意されています。次の図は、ほとんどの配列...

Ubuntu 18.04 Server に静的 IP を設定する方法

1. 背景Netplan は、Ubuntu システムのネットワーク設定を簡単に管理および構成できるよ...

CentOS7 インストール Zabbix 4.0 チュートリアル (イラストとテキスト)

SeLinuxを無効にするsetenforce 0永久に閉店: vi /etc/selinux/c...

Linuxのsortコマンドの複数のパラメータを理解するための1つの質問

sort コマンドは非常によく使用されますが、-o、-n、-u、-r などの多くのパラメーターがあり...

Tomcat で server.xml と content.xml を変更した後の自動復元の問題の解決方法

設定ファイルを server.xml と content.xml に書き込みます。サーバーを再起動す...

kubernetes1.5.2 から kubernetes1.10 にアップグレードする際の主要な設定変更記録

この記事では、kubernetes1.5.2 から kubernetes1.10 にアップグレードす...

Nginx ロードバランシング クラスタの実装

(1)実験環境youxi1 192.168.5.101 ロードバランサーyouxi2 192.168...

PSSHを使用してLinuxサーバーを一括管理する

pssh は、多数のマシンでのバッチ ssh 操作に使用される、Python で実装されたオープン ...

1 つ以上の Linux インスタンスから SSH キー ペアのバインドを解除します。

キーペアの分離1 つ以上の Linux インスタンスから SSH キー ペアのバインドを解除します。...

HTML Web ページにおける URL の表現

HTML では、一般的な URL はさまざまな方法で表現されます。相対 URL:コードをコピーコード...

2列の水平タイムラインを実装するためのVueサンプルコード

目次1.コンポーネントtimelineH.vueを実装する2. コンポーネントの呼び出しこの記事では...

CSS3入力ボックスの実装コードはGoogleログインのアニメーション効果に似ています

CSS3を使用して、Googleログインページと同様の入力ボックスをアニメーション化します。効果1 ...

Linux で MySQL のスケジュールバックアップを実装する方法

実際のプロジェクトでは、緊急事態を防ぐためにデータベースを頻繁にバックアップする必要があります。しば...