Module in JavaScript

Dieser Artikel erklärt Module in JavaScript.

YouTube Video

Module in JavaScript

Module in JavaScript sind eine Möglichkeit, Code zu organisieren und ihn in wiederverwendbare Komponenten zu unterteilen. Durch die Verwendung von Modulen werden die Lesbarkeit und Wartbarkeit des Codes verbessert, und dieselbe Funktionalität kann in anderen Projekten wiederverwendet werden. Hier erklären wir verschiedene Modulsysteme, vom Konzept der Module bis hin zu spezifischen Anwendungsbeispielen.

Das Konzept von JavaScript-Modulen

JavaScript hatte ursprünglich kein Modulsystem. Mit zunehmender Größe der Anwendungen wurde die Modularisierung wichtig, um Code in kleinere Einheiten zur Wiederverwendung zu unterteilen. Ein Modul ist ein Codeblock mit einer spezifischen Funktion, der unabhängig von anderem Code verwaltet werden kann und so die Aufteilung auf mehrere Dateien ermöglicht.

Haupttypen von Modulen

Es gibt mehrere Modulsysteme in JavaScript. Die am häufigsten verwendeten sind ES-Module (ESM) und CommonJS.

• ES-Module ist ein Modulsystem, das in ECMAScript 2015 (ES6) eingeführt wurde und Module mit den Schlüsselwörtern import und export definiert. Dieses System wird sowohl auf der Clientseite (Browser) als auch auf der Serverseite (Node.js) weit verbreitet verwendet.

• CommonJS ist ein Modulsystem, das hauptsächlich in Node.js verwendet wird. Module werden mit require und module.exports definiert, um Dateien zu importieren und zu exportieren.

Details zu ES-Modulen (ESM)

ES-Module sind das standardmäßige Modulsystem in JavaScript, das einen einfachen Austausch von Funktionalitäten zwischen Modulen ermöglicht. In Browsern und Node.js wird dieses System verwendet, um Module zu definieren und zu importieren.

export und import

export ist ein Schlüsselwort, um Funktionalitäten aus einem Modul nach außen bereitzustellen. import wird verwendet, um in anderen Modulen definierte Funktionalitäten einzubinden.

Beispiel: Modul-Export

Module können in ES-Module wie folgt exportiert werden.

1// math.mjs
2export function add(a, b) {
3    return a + b;
4}
5export function subtract(a, b) {
6    return a - b;
7}

In diesem math.mjs-Modul werden die Funktionen add und subtract exportiert. Diese Funktionen können aus anderen Modulen importiert werden.

Hier ist .mjs eine Dateiendung, die explizit auf eine JavaScript-Datei im ES-Module-Format hinweist. In Node.js bestimmt die Dateiendung, ob es sich um CommonJS oder ES-Module handelt. Wenn jedoch type: "module" in der package.json angegeben ist, werden Dateien mit der Endung .js standardmäßig als ES-Module behandelt.

Beispiel: Modulinport

Module können in ES-Module wie folgt importiert werden.

1// main.mjs
2import { add, subtract } from './math.mjs';
3
4console.log(add(3, 5)); // 8
5console.log(subtract(10, 7)); // 3

Auf diese Weise können Sie mit import Funktionen verwenden, die in anderen Dateien definiert sind.

Standardexport und benannter Export

Es gibt zwei Exportmethoden für Module. Eine ist der benannte Export, die andere ist der Standardexport.

• Benannte Exporte werden verwendet, wenn mehrere Funktionen oder Variablen aus einem Modul exportiert werden. Es können mehrere Exporte durchgeführt werden, und beim Import werden sie mit den angegebenen Namen empfangen.

1// utils.mjs
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

1// main.mjs
2import { sum, multiply } from './utils.mjs';
3
4console.log(sum(4, 6));       // 10
5console.log(multiply(3, 5));  // 15

• Standardexport wird verwendet, wenn eine einzelne Funktion oder Klasse aus einem Modul exportiert wird. Beim Import kann sie mit einem beliebigen Namen empfangen werden.

1// greet.mjs
2export default function greet() {
3    return "Hello, World!";
4}

1// main.mjs
2import greet from './greet.mjs';
3
4console.log(greet()); // "Hello, World!"

Es ist nur ein Standardexport möglich, jedoch können mit benannten Exporten mehrere Elemente gleichzeitig exportiert werden.

Beispiel für die Verwendung auf der Client-Seite (Browser).

Beispiel: Modul-Export

Module können in ES-Module wie folgt exportiert werden.

1// utils.js
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

In diesem utils.js-Modul werden die Funktionen sum und multiply exportiert.

Beispiel: Modulinport

Module können auf der Client-Seite wie folgt importiert werden.

 1<!DOCTYPE html>
 2<html lang="ja">
 3<head>
 4  <meta charset="UTF-8">
 5  <title>ES Modules Sample in HTML</title>
 6</head>
 7<body>
 8  <h1>ES Modules Sample</h1>
 9  <div id="result"></div>
10
11  <script type="module">
12    import { sum, multiply } from './utils.js';
13
14    const result = `
15      <p>sum(3, 5) = ${sum(3, 5)}</p>
16      <p>multiply(10, 7) = ${multiply(10, 7)}</p>
17    `;
18
19    document.getElementById('result').innerHTML = result;
20    console.log(sum(3, 5));      // 8
21    console.log(multiply(10, 7)); // 70
22  </script>
23</body>
24</html>

• Durch das Setzen des type-Attributs des <script>-Tags auf module kann die ES-Module-Syntax wie import und export innerhalb von HTML verwendet werden.
• Die import-Anweisung lädt das externe utils.js und zeigt das Ergebnis an.

Details zu CommonJS

CommonJS ist ein Modulsystem, das hauptsächlich in Node.js verwendet wird. Module werden mit module.exports und require exportiert und importiert.

require und module.exports

In CommonJS wird module.exports zum Exportieren von Modulen verwendet. Außerdem wird require verwendet, um Module aus anderen Dateien zu nutzen.

Beispiel: Modul-Export

Module können in CommonJS wie folgt exportiert werden.

1// math.js
2module.exports = {
3    add: function(a, b) {
4        return a + b;
5    },
6    subtract: function(a, b) {
7        return a - b;
8    }
9};

Beispiel: Modulinport

Module können in CommonJS wie folgt importiert werden.

1// main.js
2const math = require('./math.js');
3
4console.log(math.add(4, 7));      // 11
5console.log(math.subtract(9, 2)); // 7

In Node.js wird CommonJS als Standardsystem für Module verwendet, aber ES-Module werden ebenfalls unterstützt.

Dynamischer Import

In JavaScript können Module dynamisch mit import() importiert werden. Diese Methode nutzt asynchrone Verarbeitung, um Module nach Bedarf zu laden.

Dynamische Importe können wie folgt durchgeführt werden.

1async function loadModule() {
2    const math = await import('./math.js');
3    console.log(math.add(5, 3)); // 8
4}
5
6loadModule();

Dynamischer Import ist eine Möglichkeit, die Anwendungsleistung zu verbessern. Da Module nach Bedarf geladen werden können, anstatt alles beim ersten Laden zu laden, wird die Seitendarstellungsgeschwindigkeit verbessert.

Vorteile von Modulen

• Wiederverwendbarkeit von Code

  • Modularisierter Code kann in anderen Projekten wiederverwendet werden. Durch die Erstellung von Modulen mit gemeinsamen Funktionalitäten und deren Verwendung in mehreren Anwendungen wird die Entwicklungseffizienz erheblich gesteigert.

• Verbesserte Wartbarkeit

  • Durch die Aufteilung des Codes in Module ist es einfacher, bestimmte Funktionen oder Teile zu ändern. Die Verwaltung von Code in kleinen Einheiten erleichtert das Auffinden und Beheben von Fehlern.

• Vermeidung von Namensraumkollisionen

  • Die Definition vieler Variablen und Funktionen im globalen Gültigkeitsbereich kann zu Namenskollisionen führen, aber Modularisierung verhindert dies und trägt zu einer übersichtlicheren Codebasis bei.

• Abhängigkeitsverwaltung

  • Durch die Verwendung von Modulen können die Abhängigkeiten einer Anwendung explizit verwaltet werden. Es wird klar, welches Modul von anderen Modulen abhängt, was die Code-Struktur leichter verständlich macht.

Zusammenfassung

Das Modulsystem von JavaScript ist ein leistungsstarkes Mittel, um Code zu organisieren und in wiederverwendbare Komponenten aufzuteilen. Durch das Verständnis der Unterschiede zwischen ES-Modulen und CommonJS und die Wahl des geeigneten Modulsystems basierend auf dem Projekt können Sie die Lesbarkeit und Wartbarkeit des Codes verbessern. Darüber hinaus können Sie durch die Nutzung dynamischer Importe die Anwendungsleistung optimieren.

Nutzen wir das Modulsystem, um skalierbarere und effizientere JavaScript-Anwendungen zu erstellen.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video