Modules

Module sind wiederverwendbare Codeteile, die Implementierungsdetails kapseln. Dabei sind Module meistens in einem File.

import { rand } from './math.js';

const diceP1 = rand(1, 6, 2);
const diceP2 = rand(1, 6, 2);
const scores = { diceP1, diceP2 }

export { scores };

Vorteile

• Software zusammensetzen: Module sind kleine Bausteine, die wir zusammenfügen, um komplexe Anwendungen zu erstellen

• Komponenten isolieren: Module können isoliert entwickelt werden, ohne an die gesamte Codebasis denken zu müssen

• Code abstrahieren: Low-Level-Code in Modulen implementieren und diese Abstraktionen in andere Module importieren

• Code organisieren: Module führen auf natürliche Weise zu einer besser organisierten Codebase

• Code wiederverwenden: Module ermöglichen es uns, denselben Code einfach wiederzuverwenden, auch über mehrere Projekte hinweg

ES6 Modules

Bei ES6 Modulen beinhaltet eine Datei genau ein Modul.

Unterschiede: Modules vs. Scripts

Eigenschaft	ES6 Module	Script
Top-Level-Variablen	Auf Modul beschränkt	Global
Standardmodus	Strict Mode	"Sloppy" Mode
Top-Level this	undefined	window
Imports und Exports	✓ Ja	× Nein
HTML-Linking	<script type="module">	<script>
Download	Asynchron	Synchron

Importieren und exportieren

Wir können ein File einfach über ein import-Statement importieren.

script.js

import './shoppingCart.js';
console.log('Importing module');

shoppingCart.js

Output

Wie wir sehen können, wird also einfach der Code des importieren Files ausgeführt. Dabei spielt die Reihenfolge keine Rolle, da das import-Statement sowieso gehoisted wird.

---

Weiter gibt es sogenannte Named Exports, das heisst, dass wir den Namen des zu importierenden Codes angeben müssen.

script.js

import { addToCart, totalPrice as price, tq } from './shoppingCart.js';

addToCart('bread', 5);
addToCart('milk', 3);
console.log(price, tq);

shoppingCart.js

Output

---

Wir können auch das ganze Modul als Objekt importieren.

script.js

import * as ShoppingCart from './shoppingCart.js';

console.log(ShoppingCart.totalPrice);

Output

---

Wir können auch Default-Exports machen. Diese können wir dann beim importieren nennen, wie wir wollen.

script.js

import log from './shoppingCart.js';

log();

shoppingCart.js

Output

Technisch ist es möglich Named-Exports und Default-Exports zu mischen, es ist jedoch nicht empfohlen!

CommonJS

CommonJS Imports und Export wurden vor allem in Node.js gebraucht und sind dadurch auch heute noch weit verbreitet.

script.js

const { addToCart } = require(./shoppingCart.js);

shoppingCart.js