Das Konzept der Module stammt aus dem modularen Programmierparadigma. Dieses Paradigma schlägt vor, dass Software aus separaten, austauschbaren Komponenten bestehen sollte, die als bezeichnet werden „Module“, indem Programmfunktionen in eigenständige Dateien zerlegt werden, die separat oder gekoppelt arbeiten können Anwendung.

Ein Modul ist eine eigenständige Datei, die Code kapselt, um bestimmte Funktionen zu implementieren und die Wiederverwendbarkeit und Organisation zu fördern.

Hier behandeln Sie die in JavaScript-Anwendungen verwendeten Modulsysteme, einschließlich des Modulmusters, des in den meisten Node.js-Anwendungen verwendeten CommonJS-Modulsystems und des ES6-Modulsystems.

Das Modulmuster

Vor der Einführung nativer JavaScript-Module wurde das Modulentwurfsmuster als Modulsystem verwendet, um Variablen und Funktionen auf eine einzelne Datei zu beschränken.

Dies wurde unter Verwendung von sofort aufgerufenen Funktionsausdrücken implementiert, die im Volksmund als IIFEs bekannt sind. Ein IIFE ist eine nicht wiederverwendbare Funktion, die ausgeführt wird, sobald sie erstellt wurde.

instagram viewer

Hier ist die Grundstruktur eines IIFE:

(Funktion () {
//hier codieren
})();
(() => {
//hier codieren
})();
(asynchron () => {
//hier codieren
})();

Der obige Codeblock beschreibt IIFEs, die in drei verschiedenen Kontexten verwendet werden.

IIFEs wurden verwendet, weil Variablen, die innerhalb einer Funktion deklariert wurden, auf die Funktion beschränkt sind, wodurch sie nur innerhalb der Funktion zugänglich ist, und weil Funktionen es Ihnen ermöglichen, Daten zurückzugeben (sie öffentlich zu machen zugänglich).

Zum Beispiel:

konst foo = (Funktion () {
konst sayName = (Name) => {
Konsole.Protokoll(„Hey, mein Name ist ${name}`);
 };
//Variablen verfügbar machen
zurückkehren {
 callSayName: (Name) => sagName (Name),
 };
})();
//Auf exponierte Methoden zugreifen
foo.callSayName("Bar");

Der obige Codeblock ist ein Beispiel dafür, wie Module vor der Einführung nativer JavaScript-Module erstellt wurden.

Der obige Codeblock enthält ein IIFE. Das IIFE enthält eine Funktion, die es zugänglich macht, indem es sie zurückgibt. Alle im IIFE deklarierten Variablen sind vor dem globalen Gültigkeitsbereich geschützt. Also die Methode (sagName) ist nur über die öffentliche Funktion zugänglich, callSayName.

Beachten Sie, dass das IIFE in einer Variablen gespeichert wird, foo. Dies liegt daran, dass die Variablen nach der Ausführung des Skripts unzugänglich sind, wenn keine Variable auf ihren Speicherort verweist. Dieses Muster ist möglich aufgrund JavaScript-Schließungen.

Das CommonJS-Modulsystem

Das CommonJS-Modulsystem ist ein Modulformat, das von der CommonJS-Gruppe definiert wurde, um JavaScript-Bereichsprobleme zu lösen, indem jedes Modul in seinem Namespace ausgeführt wird.

Das CommonJS-Modulsystem funktioniert, indem es Module dazu zwingt, explizit Variablen zu exportieren, die sie anderen Modulen zur Verfügung stellen möchten.

Dieses Modulsystem wurde für erstellt serverseitiges JavaScript (Node.js) und wird daher nicht standardmäßig in Browsern unterstützt.

Um CommonJS-Module in Ihrem Projekt zu implementieren, müssen Sie zunächst NPM in Ihrer Anwendung initialisieren, indem Sie Folgendes ausführen:

npm init -y

Variablen, die nach dem CommonJS-Modulsystem exportiert wurden, können wie folgt importiert werden:

//randomModule.js
// Installiertes Paket
konst installiertImport = erfordern("Paketnamen");
//lokales Modul
konst localImport = erfordern("/path-to-module");

Module werden in CommonJS mit dem importiert erfordern -Anweisung, die eine JavaScript-Datei liest, die gelesene Datei ausführt und die zurückgibt Exporte Objekt. Der Exporte Objekt enthält alle verfügbaren Exporte im Modul.

Sie können eine Variable nach dem CommonJS-Modulsystem exportieren, indem Sie entweder benannte Exporte oder Standardexporte verwenden.

Benannte Exporte

Benannte Exporte sind Exporte, die durch die ihnen zugewiesenen Namen identifiziert werden. Benannte Exporte ermöglichen im Gegensatz zu Standardexporten mehrere Exporte pro Modul.

Zum Beispiel:

//main.js
exports.myExport = Funktion () {
Konsole.log("Dies ist ein Beispiel von ein benannt Export");
};
exports.anotherExport = Funktion () {
Konsole.log("Dies ist ein weiteres Beispiel von ein benannt Export");
};

Im obigen Codeblock exportieren Sie zwei benannte Funktionen (meinExport Und ein weitererExport), indem Sie sie an die anhängen Exporte Objekt.

Ebenso können Sie die Funktionen wie folgt exportieren:

konst meinExport = Funktion () {
Konsole.log("Dies ist ein Beispiel von ein benannt Export");
};
konst otherExport = Funktion () {
Konsole.log("Dies ist ein weiteres Beispiel von ein benannt Export");
};
Modul.Exporte = {
 meinExport,
 ein anderer Export,
};

Im Codeblock oben setzt du die Exporte Objekt zu den benannten Funktionen. Sie können nur die zuweisen Exporte Objekt zu einem neuen Objekt durch die Modul Objekt.

Ihr Code würde einen Fehler auslösen, wenn Sie versuchen, dies auf diese Weise zu tun:

//Falsche Weg
Exporte = {
 meinExport,
 ein anderer Export,
};

Es gibt zwei Möglichkeiten, benannte Exporte zu importieren:

1. Importieren Sie alle Exporte als ein einzelnes Objekt und greifen Sie separat mit darauf zu die Punktnotation.

Zum Beispiel:

//otherModule.js
konst foo = erfordern("./hauptsächlich");
foo.meinExport();
foo.ein weiterer Export();

2. Destrukturieren Sie die Exporte aus der Exporte Objekt.

Zum Beispiel:

//otherModule.js
konst { meinExport, ein andererExport } = erfordern("./hauptsächlich");
meinExport();
otherExport();

Allen Importmethoden ist eines gemeinsam: Sie müssen unter denselben Namen importiert werden, mit denen sie exportiert wurden.

Standardexporte

Ein Standardexport ist ein Export, der durch einen beliebigen Namen Ihrer Wahl identifiziert wird. Sie können nur einen Standardexport pro Modul haben.

Zum Beispiel:

//main.js
KlasseFoo{
 Bar() {
Konsole.log("Dies ist ein Beispiel von A StandardExport");
 }
}
Modul.Exporte = Foo;

Im obigen Codeblock exportieren Sie eine Klasse (Foo) durch Neuzuweisung der Exporte widersprechen.

Das Importieren von Standardexporten ähnelt dem Importieren benannter Exporte, außer dass Sie einen beliebigen Namen Ihrer Wahl verwenden können, um sie zu importieren.

Zum Beispiel:

//otherModule.js
konst Balken = erfordern("./hauptsächlich");
konst Objekt = neu Bar();
Objekt.Bar();

Im obigen Codeblock wurde der Standardexport benannt Bar, obwohl Sie einen beliebigen Namen Ihrer Wahl verwenden können.

Das ES6-Modulsystem

ECMAScript Harmony-Modulsystem, im Volksmund als ES6-Module bekannt, ist das offizielle JavaScript-Modulsystem.

ES6-Module werden von Browsern und Servern unterstützt, obwohl Sie vor der Verwendung ein wenig Konfiguration benötigen.

In Browsern müssen Sie die angeben Typ als Modul im script import-Tag.

So:

//index.html
<script src="./app.js" Typ="Modul"></script>

In Node.js müssen Sie festlegen Typ Zu Modul in deinem Paket.json Datei.

So:

//package.json
"Typ":"Modul"

Sie können Variablen auch mit dem ES6-Modulsystem exportieren, indem Sie entweder benannte Exporte oder Standardexporte verwenden.

Benannte Exporte

Ähnlich wie benannte Importe in CommonJS-Modulen werden sie durch die ihnen zugewiesenen Namen identifiziert und ermöglichen mehrere Exporte pro Modul.

Zum Beispiel:

//main.js
Exportkonst meinExport = Funktion () {
Konsole.log("Dies ist ein Beispiel von ein benannt Export");
};
Exportkonst otherExport = Funktion () {
Konsole.log("Dies ist ein weiteres Beispiel von ein benannt Export");
};

Im ES6-Modulsystem werden benannte Exporte exportiert, indem der Variablen das Präfix vorangestellt wird Export Stichwort.

Benannte Exporte können auf die gleiche Weise wie CommonJS in ein anderes Modul in ES6 importiert werden:

  • Destrukturierung der erforderlichen Exporte aus der Exporte Objekt.
  • Importieren Sie alle Exporte als ein einzelnes Objekt und greifen Sie mit der Punktnotation separat darauf zu.

Hier ist ein Beispiel für die Destrukturierung:

//otherModule.js
importieren { meinExport, ein andererExport } aus "./main.js";
meinExport()
ein andererExport()

Hier ist ein Beispiel für den Import des gesamten Objekts:

importieren * als foo aus './main.js'
foo.meinExport()
foo.ein weiterer Export()

Im obigen Codeblock ist das Sternchen (*) bedeutet „alle“. Der als Schlüsselwort ordnet die Exporte Objekt auf die folgende Zeichenfolge, in diesem Fall foo.

Standardexporte

Ähnlich wie Standardexporte in CommonJS werden sie durch einen beliebigen Namen Ihrer Wahl identifiziert, und Sie können nur einen Standardexport pro Modul haben.

Zum Beispiel:

//main.js
KlasseFoo{
 Bar() {
Konsole.log("Dies ist ein Beispiel von A StandardExport");
 }
}
ExportStandard Foo;

Standardexporte werden durch Hinzufügen der erstellt Standard Schlüsselwort nach dem Export Schlüsselwort, gefolgt vom Namen des Exports.

Das Importieren von Standardexporten ähnelt dem Importieren benannter Exporte, außer dass Sie einen beliebigen Namen Ihrer Wahl verwenden können, um sie zu importieren.

Zum Beispiel:

//otherModule.js
importieren Bar aus "./main.js";

Gemischte Exporte

Der ES6-Modulstandard ermöglicht es Ihnen, im Gegensatz zu CommonJS, sowohl Standardexporte als auch benannte Exporte in einem Modul zu haben.

Zum Beispiel:

//main.js
Exportkonst meinExport = Funktion () {
Konsole.log("Dies ist ein weiteres Beispiel von ein benannt Export");
};
KlasseFoo{
 Bar() {
Konsole.log("Dies ist ein Beispiel von A StandardExport");
 }
}
ExportStandard Foo;

Bedeutung von Modulen

Das Aufteilen Ihres Codes in Module macht ihn nicht nur leichter lesbar, sondern auch wiederverwendbarer und wartbarer. Module in JavaScript machen Ihren Code außerdem weniger fehleranfällig, da alle Module standardmäßig im strikten Modus ausgeführt werden.