Ich bin immer noch sehr verwirrt über CommonJS, AMD und RequireJS , selbst nachdem ich viel gelesen habe.

Ich weiß, dass CommonJS (früher ServerJS ) eine Gruppe zum Definieren einiger JavaScript- Spezifikationen (dh Module) ist, wenn die Sprache außerhalb des Browsers verwendet wird. Die CommonJS- Modulspezifikation hat einige Implementierungen wie Node.js oder RingoJS , richtig?

Welche Beziehung besteht zwischen CommonJS , Asynchronous Module Definition (AMD) und RequireJS ?

Ist RequireJS eine Implementierung der CommonJS- Moduldefinition? Wenn ja, was ist dann AMD ?

RequireJS implementiert die AMD- API (Quelle) .

CommonJS ist eine Möglichkeit, Module mithilfe eines exportsObjekts zu definieren, das den Modulinhalt definiert. Einfach ausgedrückt könnte eine CommonJS-Implementierung folgendermaßen funktionieren:

// someModule.js
exports.doSomething = function() { return "foo"; };

//otherModule.js
var someModule = require('someModule'); // in the vein of node    
exports.doSomethingElse = function() { return someModule.doSomething() + "bar"; };

Grundsätzlich gibt CommonJS an, dass Sie eine require()Funktion zum Abrufen von Abhängigkeiten, eine exportsVariable zum Exportieren von Modulinhalten und eine Modulkennung (die den Speicherort des betreffenden Moduls in Bezug auf dieses Modul beschreibt) benötigen, mit der die Abhängigkeiten ( Quelle) benötigt werden ). CommonJS verfügt über verschiedene Implementierungen, einschließlich Node.js , die Sie erwähnt haben.

CommonJS wurde nicht speziell für Browser entwickelt, daher passt es nicht sehr gut in die Browserumgebung ( ich habe wirklich keine Quelle dafür - es sagt es einfach überall, einschließlich der RequireJS-Site. ) Anscheinend hat dies etwas zu tun tun mit asynchronem Laden usw.

Andererseits implementiert RequireJS AMD, das für die Browserumgebung ( Quelle ) ausgelegt ist. Anscheinend begann AMD als Spin-off des CommonJS-Transportformats und entwickelte sich zu einer eigenen Moduldefinitions-API. Daher die Ähnlichkeiten zwischen den beiden. Die neue Funktion in AMD ist die define()Funktion, mit der das Modul seine Abhängigkeiten deklarieren kann, bevor es geladen wird. Zum Beispiel könnte die Definition sein:

define('module/id/string', ['module', 'dependency', 'array'], 
function(module, factory function) {
  return ModuleContents;  
});

CommonJS und AMD sind also JavaScript- Moduldefinitions-APIs mit unterschiedlichen Implementierungen, die jedoch beide denselben Ursprung haben.

• AMD ist besser für den Browser geeignet, da es das asynchrone Laden von Modulabhängigkeiten unterstützt.
• RequireJS ist eine Implementierung von AMD , während gleichzeitig versucht wird, den Geist von CommonJS beizubehalten (hauptsächlich in den Modulkennungen).

Um Sie noch mehr zu verwirren, bietet RequireJS als AMD-Implementierung einen CommonJS-Wrapper, sodass CommonJS-Module fast direkt zur Verwendung mit RequireJS importiert werden können.

define(function(require, exports, module) {
  var someModule = require('someModule'); // in the vein of node    
  exports.doSomethingElse = function() { return someModule.doSomething() + "bar"; };
});

Ich hoffe das hilft die Dinge zu klären!

CommonJS ist mehr als das - es ist ein Projekt zur Definition einer gemeinsamen API und eines gemeinsamen Ökosystems für JavaScript. Ein Teil von CommonJS ist die Modulspezifikation . Node.js und RingoJS sind serverseitige JavaScript-Laufzeiten, und ja, beide implementieren Module basierend auf der CommonJS-Modulspezifikation.

AMD (Asynchronous Module Definition) ist eine weitere Spezifikation für Module. RequireJS ist wahrscheinlich die beliebteste Implementierung von AMD. Ein wesentlicher Unterschied zu CommonJS besteht darin, dass AMD angibt, dass Module asynchron geladen werden. Dies bedeutet, dass Module parallel geladen werden, anstatt die Ausführung zu blockieren, indem auf das Beenden eines Ladevorgangs gewartet wird.

Aus diesem Grund wird AMD in der clientseitigen JavaScript-Entwicklung (im Browser) häufiger verwendet, und CommonJS-Module werden im Allgemeinen serverseitig verwendet. Sie können jedoch beide Modulspezifikationen in beiden Umgebungen verwenden. Beispielsweise bietet RequireJS Anweisungen zum Ausführen in Node.js und browserify ist eine CommonJS- Modulimplementierung , die im Browser ausgeführt werden kann.

Die kurze Antwort wäre:

CommonJS und AMD sind Spezifikationen (oder Formate), wie Module und ihre Abhängigkeiten in Javascript-Anwendungen deklariert werden sollen.

RequireJS ist eine Skriptladeprogrammbibliothek , dieAMD-kompatibel ist. Curljs ist ein weiteres Beispiel.

CommonJS-konform:

Entnommen aus Addy Osmanis Buch .

// package/lib is a dependency we require
var lib = require( "package/lib" );

// behavior for our module
function foo(){
    lib.log( "hello world!" );
}

// export (expose) foo to other modules as foobar
exports.foobar = foo;

AMD-konform:

// package/lib is a dependency we require
define(["package/lib"], function (lib) {

    // behavior for our module
    function foo() {
        lib.log( "hello world!" );
    }

    // export (expose) foo to other modules as foobar
    return {
        foobar: foo
    }
});

An anderer Stelle kann das Modul verwendet werden mit:

require(["package/myModule"], function(myModule) {
    myModule.foobar();
});

Einige Hintergrundinformationen:

Tatsächlich ist CommonJS viel mehr als eine API-Deklaration, und nur ein Teil davon befasst sich damit. AMD begann als Entwurf einer Spezifikation für das Modulformat in der CommonJS-Liste, aber es wurde kein vollständiger Konsens erzielt, und die Weiterentwicklung des Formats wurde in die amdjs-Gruppe verschoben . Argumente, um welches Format es sich besser handelt, besagen, dass CommonJS versucht, ein breiteres Spektrum von Bedenken abzudecken, und dass es aufgrund seiner Synchronität besser für die serverseitige Entwicklung geeignet ist und dass AMD aufgrund seiner asynchronen Natur und der Entwicklung besser für die clientseitige (Browser-) Entwicklung geeignet ist Tatsache, dass es seine Wurzeln in der Implementierung der Moduldeklaration von Dojo hat.

Quellen:

• RequireJS - Warum AMD?
• Addy Osmani - Lernen von JavaScript-Entwurfsmustern - Moderne modulare JavaScript-Entwurfsmuster

Zitieren

AMD :

• Ein Browser-First-Ansatz
• Entscheiden Sie sich für asynchrones Verhalten und vereinfachte Abwärtskompatibilität
• Es gibt kein Konzept für Datei-E / A.
• Es unterstützt Objekte, Funktionen, Konstruktoren, Zeichenfolgen, JSON und viele andere Modultypen.

CommonJS :

• Ein Server-First-Ansatz
• Synchrones Verhalten annehmen
• Decken Sie ein breiteres Spektrum von Anliegen ab, z. B. E / A, Dateisystem, Versprechen und mehr.
• Unterstützt nicht verpackte Module, kann sich den ES.next/Harmony-Spezifikationen etwas näher fühlen und befreit Sie vom definierten define () - Wrapper AMD.
• Unterstützt nur Objekte als Module.

Es ist ganz normal, JavaScript-Programme modular in mehrere Dateien zu organisieren und child-modulesvon der aus aufzurufen main js module.

Die Sache ist, dass JavaScript dies nicht bietet. Nicht einmal heute in den neuesten Browserversionen von Chrome und FF.

Aber gibt es in JavaScript ein Schlüsselwort, um ein anderes JavaScript-Modul aufzurufen?

Diese Frage kann für viele ein völliger Zusammenbruch der Welt sein, denn die Antwort lautet Nein .

In ES5 (veröffentlicht im Jahre 2009) hatte JavaScript keine Schlüsselwörter wie Import , enthalten oder benötigen .

ES6 spart den Tag (veröffentlicht im Jahr 2015) und schlägt das Importschlüsselwort vor ( https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import ), aber kein Browser implementiert dies.

Wenn Sie Babel 6.18.0 verwenden und nur mit der Option ES2015 transpilen

import myDefault from "my-module";

du wirst requirewieder bekommen .

"use strict";
var _myModule = require("my-module");
var _myModule2 = _interopRequireDefault(_myModule);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

Dies liegt daran, requiredass das Modul von Node.js geladen wird. Node.js erledigt alles vom Lesen von Dateien auf Systemebene bis zum Umschließen von Funktionen in das Modul.

Denn in JavaScript sind Funktionen die einzigen Wrapper, die die Module darstellen.

Ich bin sehr verwirrt über CommonJS und AMD?

Sowohl CommonJS als auch AMD sind nur zwei verschiedene Techniken, um den JavaScript- "Defekt" zu überwinden und Module intelligent zu laden.