JavaScript のモジュール性を理解するにはどうすればよいでしょうか?

JavaScript のモジュール性の理解: 1. モジュール モード、クロージャの特性を通じて新しいスコープを開き、グローバル スコープの名前の競合とセキュリティの問題を軽減します; 2. CommonJS モード、主に Node で使用されます。開発では、各ファイルはモジュールであり、各ファイルには独自のスコープがあります。

JavaScript のモジュール性の理解:

1. モジュール モード

モジュール仕様が形成される前、JS 開発者はモジュール設計パターンを使用して、JS のグローバル スコープの汚染問題を解決していました。モジュール パターンは元々、従来のソフトウェア エンジニアリングにおいてクラスにプライベートおよびパブリックのカプセル化を提供する方法として定義されました。 JavaScript では、モジュール モードは匿名関数の自己呼び出し (クロージャ) を使用してカプセル化し、カスタマイズされた公開動作を通じてプライベート メンバーとパブリック メンバーを区別します。

let myModule = (function (window) {
    let moduleName = 'module'  // private
    // public
    function setModuleName(name) {
      moduleName = name
    }
    // public
    function getModuleName() {
      return moduleName
    }
    return { setModuleName, getModuleName }  // 暴露行为
  })(window)

上記の例は、モジュール パターンを記述する方法であり、クロージャ機能を通じて新しいスコープを開き、グローバル スコープの名前の競合とセキュリティの問題を軽減します。しかし、開発者はこれを使用してコードを整理したり分割したりすることができなかったため、これに基づくモジュール仕様が登場しました。

関連する学習の推奨事項: JavaScript ビデオ チュートリアル

2. CommonJS

CommonJS が主に使用されますノード開発では、各ファイルはモジュールであり、各ファイルには独自のスコープがあります。 module.exports を通じてパブリック メンバーを公開します。例:

// 文件名：x.js
let x = 1;
function add() {
  x += 1;
  return x;
}
module.exports.x = x;
module.exports.add = add;

さらに、CommonJS は require() を通じてモジュールの依存関係を導入します。require 関数は、Node の組み込みモジュール、カスタム モジュール、および 3 番目のモジュールを導入できます。 npm などのパーティー モジュール。

// 文件名：main.js
let xm = require('./x.js');
console.log(xm.x);  // 1
console.log(xm.add());  // 2
console.log(xm.x);   // 1

上記のコードから、require 関数が x.js を同期的にロードし、module.exports 出力リテラルのコピー値を返すことがわかります。

一部の人は、module.exports.x = x;これは割り当てではないのですか?それがどうして大したことになるのでしょうか?と尋ねるかもしれません。 Module パターンはモジュール仕様の基礎であり、CommonJS も Module パターンのカプセル化であると言えます。モジュール モードを完全に使用して、上記のコード効果を実現できます。

let xModule = (function (){
  let x = 1;
  function add() {
    x += 1;
    return x;
  }
  return { x, add };
})();
let xm = xModule;
console.log(xm.x);  // 1
console.log(xm.add());  // 2
console.log(xm.x);   // 1

モジュール モードでシミュレートされた CommonJS 原理を通じて、CommonJS の特性をうまく説明できます。 CommonJS は値の割り当てを通じて匿名関数の自己呼び出しの戻り値を取得する必要があるため、モジュールのロード時に require 関数は同期します。ただし、HTTP を介した CommonJS モジュールの同期ロードは非常に時間がかかるため、CommonJS モジュールのロード メカニズムにより、クライアントでの CommonJS の使用が制限されます。

3、AMD

// 定义AMD规范的模块
define([function() {
  return 模块
})

CommonJS、AMD とは異なり、標準の依存モジュールは非同期でロードされますが、定義されたモジュールはそのままロードされますコールバック関数として実行され、require.js モジュール管理ツール ライブラリに依存します。もちろん、AMD 仕様は匿名関数の自己呼び出しによってカプセル化されていませんが、クロージャーの原則を使用してモジュールのプライベート メンバーとパブリック メンバーを実装することはできます:

define(['module1', 'module2'], function(m1, m2) {
  let x = 1;
  function add() {
    x += 1;
    return x;
  }
  return { add };
})

4 、CMD

CMD は、SeaJS のプロモーション プロセス中のモジュール定義の標準化された出力です。 AMD は前にある依存関係を推奨し、CMD は近くの依存関係を推奨します。

define(function(require, exports, module) {
  //  同步加载模块
  var a = require('./a');
  a.doSomething();
  // 异步加载一个模块，在加载完成时，执行回调
  require.async(['./b'], function(b) {
    b.doSomething();
  });
  // 对外暴露成员
  exports.doSomething = function() {};
});
// 使用模块
seajs.use('path');

CMD は CommonJS と AMD の機能を統合し、モジュールの同期および非同期読み込みをサポートします。 CMD は、依存モジュールをロードした後に実行するのではなく、ダウンロードするだけです。すべての依存モジュールがロードされた後、メイン ロジックに入ります。対応するモジュールは、require ステートメントが見つかった場合にのみ実行されます。このように、モジュールは作成順序と完全に一致しています。したがって、CMD の require 関数がモジュールを同期的にロードする場合、HTTP リクエストのプロセスはありません。

5. ES6 モジュール

ES6 のモジュール化はもはや標準ではなく、JS 言語の機能です。 ES6 のリリースにより、AMD と CMD は歴史になりました。モジュール仕様と比較すると、ES6 モジュールには 2 つの大きな特徴があります。

• モジュール仕様は値のコピーを出力し、ES6 モジュールは値への参照を出力します。

• モジュール仕様は実行時にロードされ、ES6 モジュールはコンパイル時の出力インターフェイスです。

モジュール仕様の出力はオブジェクトであり、スクリプトの実行後にのみ生成されます。 ES6 モジュールはオブジェクトではありません。ES6 モジュールはマルチオブジェクト出力およびマルチオブジェクト読み込みモデルです。原則として、モジュール仕様は匿名関数の自己呼び出しのカプセル化ですが、ES6 モジュールは出力メンバーの呼び出しに匿名関数の自己呼び出しを使用します。

以上がJavaScript のモジュール性を理解するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。