Suche…


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

6

In ECMAScript 6 wird jede Datei bei Verwendung der Modulsyntax (Import / Export) zu einem eigenen Modul mit einem privaten Namespace. Funktionen und Variablen der obersten Ebene verunreinigen den globalen Namespace nicht. Um Funktionen, Klassen und Variablen für andere zu importierende Module verfügbar zu machen, können Sie das Schlüsselwort export verwenden.

Hinweis: Obwohl dies die offizielle Methode zum Erstellen von JavaScript-Modulen ist, wird sie derzeit von keinen großen Browsern unterstützt. ES6-Module werden jedoch von vielen Transpilern unterstützt.

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() {}
}

Module verwenden

Der Import von Modulen ist so einfach wie der Pfad anzugeben:

import greet from "mymodule.js";

greet("Bob");

Dadurch wird nur die Methode myMethod aus unserer Datei mymodule.js .

Es ist auch möglich, alle Methoden aus einem Modul zu importieren:

import * as myModule from "mymodule.js";

myModule.greet("Alice");

Sie können auch Methoden unter einem neuen Namen importieren:

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

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



Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow