JavaScript モジュール化のアイデア: CommonJS、AMD、CMD、UMD

私が知っている 3 つのモジュール読み込み方法は、CommonJS、AMD、CMD です。

これら 3 つのモジュール読み込み方法について詳しく知りたい場合は、簡単に紹介します。関連書類をオンラインで確認できます。

(1) CommonJS

CommonJSでは、単一のファイルがモジュールです。呼び出されるモジュールは、export を使用してインターフェイスを公開し、呼び出し側モジュールは、require を使用して、公開されたインターフェイスを呼び出します。

例は次のとおりです:

// student.js
// 私有变量
var a = 123;
function add(student) {
    console.log('Add student：' + student);
}
// exports对象上的方法和变量是外部可访问的
exports.add = add;

1 // 学生.js モジュール 2 をロードするには require を使用します var Student = require('./student.js');

CommonJS 読み込みモジュールは「同期」です、つまり, if 呼び出されたモジュール内のパブリック メソッドと変数を呼び出したい場合は、呼び出されたモジュールがロードされるまで待つ必要があります。サーバーで使用される NodeJS は CommonJS を使用してモジュールを管理します。ただし、ブラウザ側では同期読み込みはネットワーク環境の影響により不確実性が大きいため、CommonJSはブラウザ側には適していません。

ブラウザ環境でサーバーからモジュールをロードする場合は、「非同期」メソッドを使用する必要があります。そこで、AMD および CMD ソリューションが登場しました。

(2)AMD (非同期モジュール定義)

requireJS は、AMD を使用してモジュールを非同期にロードする管理プラグインです。 AMD モジュールは、オブジェクト、関数、コンストラクター、文字列、JSON など、さまざまなタイプのモジュールをサポートします。

AMD 仕様では、define メソッドを使用してモジュールを定義します。

//define(param1,param2) 通过define方法定义模块
//@param1: 数组，元素为引入的依赖模块
//@param2: 回调函数，通过形参传入依赖
define(['firstModule','secondModule'],function(firstModule,secondModule){
     function foo(){
           firstModule.test();
     }
     // 暴露foo()
     return {foo:foo};
});

同時に、AMD では、CommonJS 仕様と互換性があり、require およびexports を使用できる、define メソッドを使用してモジュールを定義することができます。

define(function(require,exports,module){
     var reqModule = require("./firstModule");
     reqModule.test();

     exports.pubPort = function(){
            // 函数体
     }
});

(3) CMD

CMD と AMD の違いは、主に依存モジュールの実行タイミングに反映されます。 AMD は「依存性フロントロード」です。必要なモジュールを事前にロードすることをお勧めします。CMD は「最も近いモジュールに依存します」。つまり、使用できるときにロードします。これは、Java の「飢えた人モード」と「怠け者モード」に似ています。

requireJS 2.0からは遅延読み込みも可能になりました。

例を挙げてください:

// AMD——依赖前置
define(['./a','./b'],function(a,b){
    //提前声明要依赖的模块
});

// CMD
define(function(require,exports,module){
    //依赖可以就近写
    var a = require('./a');
    a.test();

    //软依赖
    if(status){
        var b = require('./b');
        b.test();
    }

ここでソフト依存性と呼ばれる用語がありますが、私は個人的に、ソフト依存性は必ずしも依存しないことを意味し、ハード依存性は必ず依存するモジュールを意味し、ソフト依存性を意味すると理解しています。必要なときだけ依存し、必要がなければ依存しないということです。

(4) UMD

UMD - ユニバーサルモジュール定義、ユニバーサルモジュール定義

UMD は CommonJS に AMD を加えたものと同等です。 UMD の実際の仕事は、以下の判断を行うことです:

- まず、現在の環境の NodeJs でサポートされているモジュールが存在するかどうかを判断します。存在する場合は、Node.js モジュール モード (エクスポート) を使用します。

- サポートされていない場合は、AMD をサポートするかどうかを判断し (定義)、存在する場合は、AMD メソッドを使用してロードします。

UMDってよく分からない気がするし、具体的な使い方も分からない。理解を進めていきましょう。来て！