Importieren mit import

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

Nach dem Exportieren von Funktionalität aus einem Modul müssen wir sie importieren, um sie in einer anderen Datei zu verwenden. Die import-Anweisung ermöglicht es uns, exportierte Werte aus anderen Modulen einzubinden.

Einen benannten Export importieren:

// Eine spezifische Funktion aus einem Modul importieren
import { greet } from './greeting.js';

// Jetzt können wir die greet-Funktion verwenden
greet('John'); // Ausgabe: Hello, John!

Sie können mehrere benannte Exports gleichzeitig importieren:

// Mehrere Exports importieren
import { greet, farewell } from './greeting.js';

greet('John');      // Ausgabe: Hello, John!
farewell('John');   // Ausgabe: Goodbye, John!

Einen Standard-Export importieren:

// Einen Standard-Export importieren (keine geschweiften Klammern erforderlich)
// Verwenden Sie dies, wenn die andere Datei Folgendes enthält: export default functionName
import Person from './person.js';

// Eine neue Person erstellen
const john = new Person('John');

Aufgabe

Einfach

Sie erstellen ein Anmeldeformular. Sie haben eine Datei validation-utils.js, die nützliche Funktionen zur E-Mail-Validierung enthält.

Ihre Aufgabe:

Importieren Sie die Funktion validateEmail in main.js (Es handelt sich um den benannten Export, nicht um den Standard-Export)
Rufen Sie die Funktion auf und übergeben Sie die E-Mail-Adresse user@example.com
Geben Sie die Ergebnisse mit console.log aus

Spickzettel

Verwenden Sie die import-Anweisung, um exportierte Werte aus anderen Modulen zu importieren.

Einen benannten Export importieren:

import { greet } from './greeting.js';

greet('John'); // Ausgabe: Hello, John!

Mehrere benannte Exporte importieren:

import { greet, farewell } from './greeting.js';

greet('John');      // Ausgabe: Hello, John!
farewell('John');   // Ausgabe: Goodbye, John!

Einen Standard-Export importieren (keine geschweiften Klammern erforderlich):

import Person from './person.js';

const john = new Person('John');

Probier es selbst

// TODO: Importiere die validateEmail-Funktion hier (es ist der benannte Export)

// TODO: Rufe die Funktion auf, übergib die E-Mail-Adresse user@example.com und gib die Ergebnisse mit console.log aus