Default- vs. benannte Exports

Teil des Abschnitts Objektorientierte Programmierung der JavaScript-Journey von Coddy — Lektion 10 von 56.

In JavaScript-Modulen haben Sie zwei Hauptmöglichkeiten, Ihren Code zu exportieren: benannte Exporte und Standardexporte.

Benannte Exports ermöglichen es Ihnen, mehrere Werte aus einem Modul zu exportieren:

// math.js
export function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}

Beim Importieren von benannten Exports müssen Sie genau dieselben Namen innerhalb geschweifter Klammern verwenden:

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

console.log(add(5, 3));      // 8
console.log(subtract(10, 4)); // 6

Wenn Sie einen benannten Import umbenennen müssen, verwenden Sie das Schlüsselwort as, um einen Alias zu erstellen:

// app.js
import { add as sum, subtract as minus } from './math.js';

console.log(sum(5, 3));   // 8
console.log(minus(10, 4)); // 6

Default-Exports ermöglichen es Ihnen, einen einzelnen Hauptwert aus einem Modul zu exportieren:

// user.js
const user = {
  name: 'John',
  age: 30
};

export default user;

Beim Importieren eines Standard-Exports können Sie einen beliebigen Namen ohne geschweifte Klammern verwenden:

// app.js
import person from './user.js';

console.log(person.name); // 'John'

Wann verwendet man was? Verwenden Sie named exports, wenn ein Modul mehrere zusammengehörige Dienstprogramme bereitstellt (z. B. eine Sammlung von Hilfsfunktionen). Verwenden Sie einen default export, wenn ein Modul einen primären Zweck oder Hauptwert hat (z. B. eine Klasse, eine Komponente oder ein Konfigurationsobjekt).

Sie können beide Arten von Exports in einem einzigen Modul kombinieren:

// vehicle.js
export const wheels = 4;
export const doors = 4;

const car = {
  brand: 'Toyota',
  model: 'Corolla'
};

export default car;

Und importieren Sie sie zusammen:

// app.js
import myCar, { wheels, doors } from './vehicle.js';

console.log(myCar.brand);  // 'Toyota'
console.log(wheels);       // 4

Aufgabe

Einfach

Du hast zwei Dateien. Deine Aufgabe ist es, die Exports in calculator.js und die Imports in main.js einzurichten.

In calculator.js: Exportiere calculate als default und square als named
In main.js: Importiere beide Funktionen korrekt

Die Tests werden Folgendes prüfen:

Default-Export für calculate verwendet
Named-Export für square verwendet
Beide Imports funktionieren korrekt

Spickzettel

Benannte Exports (Named Exports) — exportieren und importieren Sie mehrere Werte über den exakten Namen:

// math.js
export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }

// app.js
import { add, subtract } from './math.js';
import { add as sum } from './math.js'; // Alias mit "as"

Standard-Exports (Default Exports) — exportieren Sie einen Hauptwert; importieren Sie mit einem beliebigen Namen, ohne geschweifte Klammern:

// user.js
export default { name: 'John', age: 30 };

// app.js
import person from './user.js';

Beides kombinieren — der Standard-Import kommt zuerst, benannte Imports stehen in geschweiften Klammern:

// vehicle.js
export const wheels = 4;
export default { brand: 'Toyota', model: 'Corolla' };

// app.js
import myCar, { wheels } from './vehicle.js';

Wann man was verwendet: Verwenden Sie benannte Exports für mehrere zusammengehörige Hilfsfunktionen; verwenden Sie einen Standard-Export für den einzelnen Hauptwert eines Moduls (Klasse, Komponente, Konfiguration).

Probier es selbst

// TODO: Importiere beide Funktionen hier aus calculator.js


// Test
console.log(calculate(10, 5, '+')); // Sollte 15 ausgeben
console.log(square(4));             // Sollte 16 ausgeben