JavaScript Module Demo

Was sind Module?
Module ermöglichen es, Code in separate Dateien aufzuteilen und nur bestimmte Funktionen, Klassen oder Variablen zu exportieren und in anderen Dateien zu importieren. Dies fördert Wiederverwendbarkeit, Wartbarkeit und Strukturierung von Code.

Math Module (math.js)

Demonstriert Named Exports - mehrere Funktionen aus einem Modul exportieren

                export function add(a, b) { return a + b; }

                export function subtract(a, b) { return a - b; }

                export function multiply(a, b) { return a * b; }

Demo:

String Utils Module (stringUtils.js)

Demonstriert Default Export und Named Exports kombiniert

                export default function capitalize(str) { ... }

                export function reverse(str) { ... }

                export function toKebabCase(str) { ... }

Demo:

UI Module (ui.js)

Demonstriert wie Module andere Module importieren und verwenden

                import { add, multiply } from './math.js';

                import capitalize, { reverse } from './stringUtils.js';

Demo:

Module Import/Export Übersicht

Named Exports & Imports:

                // Export

                export function myFunction() { }

                export const myVariable = "value";

                // Import

                import { myFunction, myVariable } from './module.js';

Default Exports & Imports:

                // Export

                export default function() { }

                // Import

                import anyName from './module.js';

Kombinierte Imports:

import defaultExport, { named1, named2 } from './module.js';

Alias verwenden:

import { originalName as newName } from './module.js';