Eine Einführung in Modulsysteme in JavaScript

Eine Einführung in Modulsysteme in JavaScript

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





MAKEUSEOF VIDEO DES TAGES

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.



Hier ist die Grundstruktur eines IIFE:

(function () { 
  //code here 
})(); 
   
(() => { 
  //code here 
})(); 
   
(async () => { 
  //code here 
})();

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



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

Zum Beispiel:



const foo = (function () { 
  const sayName = (name) => { 
    console.log(`Hey, my name is ${name}`); 
  }; 
  //Exposing the variables 
  return { 
    callSayName: (name) => sayName(name), 
  }; 
})(); 
//Accessing exposed methods 
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 Geltungsbereich 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-Umfangsprobleme 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 
//installed package 
const installedImport = require("package-name"); 
//local module 
const localImport = require("/path-to-module");

Module werden in CommonJS mit dem importiert benötigen -Anweisung, die eine JavaScript-Datei liest, die gelesene Datei ausführt und die zurückgibt Exporte Objekt. Das 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 = function () { 
  console.log("This is an example of a named export"); 
}; 
exports.anotherExport = function () { 
  console.log("This is another example of a named 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:

const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
const anotherExport = function () { 
  console.log("This is another example of a named export"); 
}; 
module.exports = { 
  myExport, 
  anotherExport, 
};

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:

//wrong way 
exports = { 
  myExport, 
  anotherExport, 
};

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 
const foo = require("./main"); 
foo.myExport(); 
foo.anotherExport();

2. Destrukturieren Sie die Exporte aus dem Exporte Objekt.

Zum Beispiel:

//otherModule.js 
const { myExport, anotherExport } = require("./main"); 
myExport(); 
anotherExport();

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 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
module.exports = Foo;

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

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

Zum Beispiel:

//otherModule.js 
const Bar = require("./main"); 
const object = new Bar(); 
object.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 wie Modul im script import-Tag.

So:

wie viele leute können netflix gleichzeitig nutzen 
//index.html 
<script src="./app.js" type="module"></script>

In Node.js müssen Sie festlegen Typ zu Modul in deiner Paket.json Datei.

So:

//package.json 
"type":"module"

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 
export const myExport = function () { 
  console.log("This is an example of a named export"); 
}; 
export const anotherExport = function () { 
  console.log("This is another example of a named 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 
import { myExport, anotherExport } from "./main.js"; 
myExport() 
anotherExport()

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

import * as foo from './main.js' 
foo.myExport() 
foo.anotherExport()

Im obigen Codeblock ist das Sternchen ( * ) bedeutet „alle“. Das wie 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 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default Foo;

Standardexporte werden durch Hinzufügen der erstellt Ursprünglich 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 
import Bar from "./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 
export const myExport = function () { 
  console.log("This is another example of a named export"); 
}; 
class Foo { 
  bar() { 
    console.log("This is an example of a default export"); 
  } 
} 
export default 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.