JavaScript のモジュール性の説明

序文：

1. コンセプト

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

2. モジュール化の利点

名前の競合を回避する（名前空間の汚染を減らす）
より優れた分離、オンデマンドの読み込み。
再利用性の向上
メンテナンス性の向上。

3. 複数のスクリプトタグを導入した後の問題

リクエストが多すぎます (依存モジュールが多すぎると、リクエストも多くなります)。
依存関係の曖昧さ (モジュールの特定の依存関係が不明なため、読み込み順序が正しくありません)。
維持するのが難しい（上記の 2 つの理由により、この結果が発生します）。

//インデックス.html
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
  <メタ文字セット="UTF-8">
  <title>タイトル</title>
  <script src="jQuery.js"></script>
  <script src="module.js"></script>
</head>
<本文>
  <div>123</div>
</本文>
<スクリプト>
  myModule.foo();
  myModule.bar();
  コンソールにログ出力します。
  myModule.data = 'xxxx';
  myModule.foo();
</スクリプト>
</html>

//module.js IIFE (匿名関数の自己呼び出し)
;(関数(ウィンドウ、$){
  データ = "www.baidu.com";
  関数foo(){
    console.log(`foo() ${data}`);
    //ここではjQueryライブラリを使用する必要があります $('body').css('background', 'red')
  }
  関数バー() {
    console.log(`bar() ${data}`);
    その他のFun();
  }
  関数otherFun() {
    コンソールにログ出力します。
  }
  window.myModule = { foo, bar };
})(ウィンドウ、jQuery)

1. コモンJS

NODE はcommonJSモジュール仕様に基づいています。各ファイルはモジュールであり、独自のスコープを持っています。サーバー側では、モジュールは同期的にロードされます。ブラウザ側では、モジュールを事前にコンパイルしてパッケージ化する必要があります。

特徴：

すべてのコードはモジュールスコープ内で実行され、グローバルスコープを汚染しません。
モジュールは複数回読み込むことができますが、最初に読み込まれたときにのみ実行され、実行結果がキャッシュされます。再度読み込まれると、キャッシュされた結果が直接読み込まれます。モジュールを再び動作させるには、キャッシュをクリアする必要があります。
モジュールはコード内に現れる順序でロードされます。

文法：

モジュールを公開: js module.exports = valueまたはjs exports.xxx = value
モジュールをインポート: js require('xxx')サードパーティのモジュールの場合、xxxはモジュール名です。カスタムモジュールの場合、xxxはモジュールファイルのパスです。

CommonJS仕様では、各モジュール内でモジュール変数が現在のモジュールを表すことが規定されています。この変数はオブジェクトであり、そのエクスポート属性 (つまり module.exports) は外部インターフェースです。モジュールをロードすると、実際にはモジュールの module.exports プロパティがロードされます。

requireコマンドはモジュールファイルをロードするために使用されます。 require コマンドの基本的な機能は、JavaScript ファイルを読み取って実行し、モジュールのエクスポートオブジェクトを返すことです。指定されたモジュールが見つからない場合は、エラーが報告されます。

CommonJSモジュールの読み込みメカニズムでは、入力は出力値のコピーになります。つまり、値が出力されると、モジュール内の変更はその値に影響しません。

アム

CommonJS の同期読み込みモジュールと比較すると、AMD ではコールバック関数の指定が許可されているため、ブラウザ側での非同期モジュール読み込みに適しています。
ディレクトリ構造

require.js の使用

<!-- index.html -->
<script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js"></script>

//依存関係のない module1 を定義する define('module1', () => {
  count = 0 とします。
  const add = () => ++ count;
  const リセット = () => カウント = 0;
  const upperCase = 文字列 => string.toUpperCase()

  戻る {
    追加、
    リセット、
    大文字
  }
})

// module1 に依存する依存関係を持つ module2 を定義します
定義('モジュール2',['モジュール1'], (モジュール1) => {
  const showMsg = () => module1.upperCase('hello-amd');

  戻る {
    メッセージを表示
  }
})

<!-- HTML ファイルでモジュールを使用する -->
<本文>

<スクリプト>
  .config が必要です({
    パス: {
      モジュール1: './modules/module1',
      モジュール2: './modules/module2'
    }
  })
  必要(['モジュール1', 'モジュール2'], (モジュール1, モジュール2) => {
    コンソール.log(モジュール1.add()) // 1
    コンソール.log(モジュール1.リセット()) //0
    console.log(module2.showMsg()) //HELLO-AMD
  })
</スクリプト>
</本文>

3. CM

CMDはCommonJSとAMDの利点を組み合わせたものです。ブラウザ側では特にcmd仕様が使用されます。モジュールは非同期でロードされ、モジュールが使用されるときのみロードされ実行されます（オンデマンドロードが実現されますが、AMDはオンデマンドロードをサポートしていません）
ディレクトリ構造

sea.js の使用

<script src="https://cdn.bootcdn.net/ajax/libs/seajs/3.0.3/sea.js"></script>

//モジュール module1 を定義する
定義((require, exports, module) => {

  let string = '私は文字列です';
  const readString = () => 'module1 show() ' + 文字列;

  // 外部に公開 exports.readString = readString;
})

//モジュール module2 を定義する
定義((require, exports, module) => {
  exports.msg = "それは私です"
})

//モジュールを定義する
定義((require, exports, module) => {
  //依存モジュールを導入する（同期）
  var module1 = require('./module1');
  console.log(module1.readString()) // module1 show() 私は文字列です

  //依存モジュールを導入する（非同期）
  require.async('./module2', md2 => {
    console.log(`これは非同期的にインポートされます: ${md2.msg}`) //これは非同期的にインポートされます: It's me})
})

<!-- HTML ファイルはモジュールを使用します -->
<本文>
<スクリプト>
  seajs.use('./modules/module')
</スクリプト>

ES6 のモジュール性

ES6 モジュールの設計思想は、モジュールの依存関係や入力変数、出力変数をコンパイル時に決定できるように、可能な限り静的にすることです。 CommonJS モジュールと AMD モジュールはどちらも、実行時にのみこれらのことを判断できます。
2つのキーワードインポートとエクスポート

輸入
輸出

//mian.js
エクスポートデフォルト{
  表示メッセージ() {
    console.log('ハハハハハ')
  }
}
export const msg = "満月と花が咲く美しい季節です！"

//index.js
import module1 from "./module1"; // export default に相当
モジュール1.showMsg()
import { msg } from './module1'; //エクスポートに対応
コンソール.log(メッセージ)

/*ヒント: HTML では <script type="module"> を使用しないでください
import .....、クロスドメインの問題がありますが、vscode でプラグインをダウンロードするか、ローカル サービスを開始して解決できますが、詳細については説明しません。
</script>*/

JavaScript モジュール化の詳細な説明については、これで終わりです。JavaScript モジュール化に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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