Ideen zur JavaScript-Modularisierung: CommonJS, AMD, CMD, UMD

Die drei Modullademethoden, die ich kenne, sind CommonJS, AMD und CMD

Es gibt viele Artikel im Internet, die diese drei Modullademethoden erklären. Wenn Sie mehr erfahren möchten Sie können online gehen, um die relevanten Informationen zu überprüfen.

(1) CommonJS

In CommonJS ist eine separate Datei ein Modul. Das aufgerufene Modul verwendet Exporte, um die Schnittstelle verfügbar zu machen, und das aufrufende Modul verwendet require, um die verfügbar gemachte Schnittstelle aufzurufen.

Das Beispiel sieht wie folgt aus:

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

1 // Verwenden Sie require, um das student.js-Modul zu laden 2 var student = require('./student.js');

CommonJS-Lademodule sind „synchron“, das heißt, wenn wir öffentliche Methoden und Variablen im aufgerufenen Modul aufrufen möchten, müssen wir warten, bis das aufgerufene Modul geladen ist. Das auf dem Server verwendete NodeJS verwendet CommonJS zur Verwaltung von Modulen. Auf der Browserseite ist das synchrone Laden jedoch aufgrund der Auswirkungen der Netzwerkumgebung sehr unsicher, sodass CommonJS für die Browserseite nicht geeignet ist.

Wenn Sie Module vom Server in einer Browserumgebung laden möchten, müssen Sie die „asynchrone“ Methode verwenden. So entstanden AMD- und CMD-Lösungen.

(2) AMD (Asynchrone Moduldefinition)

requireJS ist ein Verwaltungs-Plug-in, das AMD verwendet, um Module asynchron zu laden. AMD-Module unterstützen verschiedene Modultypen wie Objekte, Funktionen, Konstruktoren, Strings, JSON usw.

Die AMD-Spezifikation verwendet die Methode „define“ zum Definieren von Modulen:

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

Gleichzeitig erlaubt AMD die Verwendung der Methode „define“ zum Definieren von Modulen, was mit der CommonJS-Spezifikation kompatibel ist und kann require und exports verwenden.

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

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

(3) CMD

Der Unterschied zwischen CMD und AMD spiegelt sich hauptsächlich im Ausführungszeitpunkt der abhängigen Module wider. AMD ist „abhängigkeitsorientiert“. Es wird empfohlen, die erforderlichen Module im Voraus zu laden, und CMD ist „abhängig vom nächstgelegenen“. Das heißt, laden Sie es, wenn es verwendet werden kann. Es ähnelt in gewisser Weise dem „Hungry-Man-Modus“ und dem „Lazy-Man-Modus“ in Java.

Ab requireJS 2.0 ist auch Lazy Loading möglich.

Zum Beispiel:

// 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();
    }

Es gibt hier einen Begriff namens weiche Abhängigkeit. Ich persönlich verstehe, dass weiche Abhängigkeit nicht unbedingt abhängig ist, harte Abhängigkeit ist ein Modul, das definitiv abhängig ist darauf, und sanfte Abhängigkeit ist ein Bedürfnis. Verlassen Sie sich nur darauf, verlassen Sie sich nicht darauf, wenn Sie es nicht brauchen, sondern beurteilen Sie anhand des Status.

(4) UMD

UMD – Universelle Moduldefinition, universelle Moduldefinition

UMD ist gleich CommonJS plus AMD. Die Aufgabe von UMD besteht eigentlich darin, ein Urteil zu fällen:

- Beurteilen Sie zunächst, ob das von NodeJs unterstützte Modul in der aktuellen Umgebung vorhanden ist. Wenn es vorhanden ist, verwenden Sie den Node.js-Modulmodus (Exporte).

– Wenn es nicht unterstützt wird, ermitteln Sie, ob es AMD unterstützt (definieren), und wenn es vorhanden ist, verwenden Sie die AMD-Methode, um es zu laden.

Ich habe das Gefühl, dass ich UMD immer noch nicht sehr gut verstehe und nicht weiß, wie ich es konkret anwenden soll. Lasst uns weiter verstehen. Komm schon!