JavaScript
Modularisierungstechniken

Universal Module Definition (UMD)

Das UMD-Muster (Universal Module Definition) wird verwendet, wenn unser Modul von verschiedenen Modulladern (z. B. AMD, CommonJS) importiert werden muss.

Das Muster selbst besteht aus zwei Teilen:

1. Ein IIFE (Sofort aufgerufener Funktionsausdruck), der nach dem vom Benutzer implementierten Modullader sucht. Dies erfordert zwei Argumente. root (a this Verweis auf den globalen Bereich) und factory (die Funktion , wo wir unser Modul deklarieren).

2. Eine anonyme Funktion, die unser Modul erstellt. Dies wird als zweites Argument an den IIFE-Teil des Musters übergeben. Diese Funktion kann mit einer beliebigen Anzahl von Argumenten übergeben werden, um die Abhängigkeiten des Moduls anzugeben.

In dem folgenden Beispiel wird nach AMD und dann nach CommonJS gesucht. Wenn keiner dieser Loader verwendet wird, müssen wir das Modul und seine Abhängigkeiten global verfügbar machen.

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'b'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('b'));
    } else {
        // Browser globals
        factory((root.commonJsStrict = {}), root.b);
    }
}(this, function (exports, b) {
    //use b in some fashion.

    // attach properties to the exports object to define
    // the exported module properties.
    exports.action = function () {};
}));

Sofort aufgerufene Funktionsausdrücke (IIFE)

Sofort aufgerufene Funktionsausdrücke können verwendet werden, um einen privaten Bereich zu erstellen, während eine öffentliche API erstellt wird.

var Module = (function() {
  var privateData = 1;

  return {
    getPrivateData: function() {
      return privateData;
    }
  };
})();
Module.getPrivateData(); // 1
Module.privateData; // undefined

Weitere Informationen finden Sie im Modulmuster .

Asynchrone Moduldefinition (AMD)

AMD ist ein Moduldefinitionssystem, das versucht, einige der häufigsten Probleme mit anderen Systemen wie CommonJS und anonymen Schließungen zu beheben.

AMD behandelt diese Probleme durch:

• Registrieren der Factory-Funktion durch Aufrufen von define (), anstatt sie sofort auszuführen
• Übergeben von Abhängigkeiten als Array von Modulnamen, die geladen werden, anstatt globale Werte zu verwenden
• Die Factory-Funktion wird erst ausgeführt, wenn alle Abhängigkeiten geladen und ausgeführt wurden
• Übergeben der abhängigen Module als Argumente an die Factory-Funktion

Der Schlüssel ist hier, dass ein Modul eine Abhängigkeit haben kann und nicht alles aufhalten muss, während es auf das Laden wartet, ohne dass der Entwickler komplizierten Code schreiben muss.

Hier ist ein Beispiel für AMD:

// Define a module "myModule" with two dependencies, jQuery and Lodash
define("myModule", ["jquery", "lodash"], function($, _) {
    // This publicly accessible object is our module
    // Here we use an object, but it can be of any type
    var myModule = {};

    var privateVar = "Nothing outside of this module can see me";

    var privateFn = function(param) {
        return "Here's what you said: " + param;
    };

    myModule.version = 1;

    myModule.moduleMethod = function() {
        // We can still access global variables from here, but it's better
        // if we use the passed ones
        return privateFn(windowTitle);
    };

    return myModule;
});

Module können den Namen auch überspringen und anonym bleiben. Wenn dies erledigt ist, werden sie normalerweise nach Dateinamen geladen.

define(["jquery", "lodash"], function($, _) { /* factory */ });

Sie können auch Abhängigkeiten überspringen:

define(function() { /* factory */ });

Einige AMD-Lader unterstützen die Definition von Modulen als einfache Objekte:

define("myModule", { version: 1, value: "sample string" });

CommonJS - Node.js

CommonJS ist ein beliebtes Modularisierungsmuster, das in Node.js verwendet wird.

Das CommonJS-System konzentriert sich auf eine require() Funktion, die andere Module lädt, und eine exports , mit der Module öffentlich zugängliche Methoden exportieren können.

Hier ein Beispiel für CommonJS. Wir laden das Modul fs Lodash und Node.js:

// Load fs and lodash, we can use them anywhere inside the module
var fs = require("fs"),
    _ = require("lodash");

var myPrivateFn = function(param) {
    return "Here's what you said: " + param;
};

// Here we export a public `myMethod` that other modules can use
exports.myMethod = function(param) {
    return myPrivateFn(param);
};

Sie können eine Funktion auch als gesamtes Modul mit module.exports :

module.exports = function() {
    return "Hello!";
};

ES6-Module

export function greet(name) {
    console.log("Hello %s!", name);
}

var myMethod = function(param) {
    return "Here's what you said: " + param;
};

export {myMethod}

export class MyClass {
    test() {}
}

import greet from "mymodule.js";

greet("Bob");

import * as myModule from "mymodule.js";

myModule.greet("Alice");

import { greet as A, myMethod as B } from "mymodule.js";

Weitere Informationen zu ES6-Modulen finden Sie im Thema Module .