Modules

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

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

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		× 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

console.log('Exporting module');

Output

Exporting module
Importing module

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, , tq } from './shoppingCart.js';

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

shoppingCart.js

const shippingCost = 10;
const cart = [];

export const addToCart = (product, quantity) => {
  cart.push({ product, quantity });
  console.log(`${quantity} ${product}(s) added to cart`);
};

const totalPrice = 237;
const totalQuantity = 23;

export { totalPrice,  };

Output

5 bread(s) added to cart
3 milk(s) added to cart
237 23

---

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

script.js

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

console.log(ShoppingCart.totalPrice);

Output

237

---

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

export default () => {
  console.log('Exporting module');
}

Output

Exporting Module

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

exports.addToCart = () => {
  cart.push({ product, quantity });
  console.log(`${quantity} ${product}(s) added to cart`);
}