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:
// Importieren einer spezifischen Funktion aus einem Modul
import { greet } from './greeting.js';
// Jetzt können wir die greet-Funktion verwenden
greet('John'); // Ausgabe: Hello, John!Du kannst mehrere benannte Exporte gleichzeitig importieren:
// Importieren mehrerer Exporte
import { greet, farewell } from './greeting.js';
greet('John'); // Ausgabe: Hello, John!
farewell('John'); // Ausgabe: Goodbye, John!Importiere einen Default-Export:
// Importieren eines Default-Exports (keine geschweiften Klammern nötig)
// Verwende dies, wenn die andere Datei Folgendes hat: export default functionName
import Person from './person.js';
// Erstelle eine neue Person
const john = new Person('John');Aufgabe
EinfachDu erstellst ein Anmeldeformular. Du hast eine Datei validation-utils.js, die nützliche Funktionen zur E-Mail-Validierung enthält.
Deine Aufgabe:
- Importiere die Funktion
validateEmailinmain.js(sie ist der benannte Export, nicht der Standardexport). - Rufe die Funktion auf und übergib die E-Mail-Adresse user@example.com.
- Gib die Ergebnisse mit
console.logaus.
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 ausDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in Objektorientierte Programmierung
1Objekte & das this-Schlüsselwort
Kurze Wiederholung: ObjekteMethoden zu Objekten hinzufügenDas this-Schlüsselwort verstehenKonstruktorfunktionenDas new-SchlüsselwortWiederholungs-Challenge7Vererbung & das extends-Schlüsselwort
VererbungDie „ist-ein“-BeziehungDas extends-SchlüsselwortDie super()-MethodeVererben von Eigenschaften & MethodenWiederholungs-Challenge10Polymorphie
Was ist Polymorphie?Geerbte Methoden überschreibenVerwendung von superWiederholungs-Challenge13Komposition vs. Vererbung
Die "hat-ein"- vs. "ist-ein"-BeziehungDie Grenzen tiefer VererbungObjekte zusammenbauen2Code organisieren
Was sind Module?Exportieren mit exportImportieren mit importDefault- vs. benannte Exports5Kapselung & Zugriff
KapselungÖffentliche & private KlassenfelderPrivate MethodenWiederholungs-Herausforderung8OOP-Code strukturieren
Klassen in Modulen organisieren11Projekt: Ein Shape-Renderer
Setup: Shape-Klasse & ExportCircle-Klasse: VererbungOverriding & Area-MethodeStatischer Shape-Zähler14Bibliotheksverwaltungssystem
Entwurf der BibliothekBuch-Klasse mit KompositionValidierung der Buchautoren3Klassen & Objekte
Was ist eine Klasse?Instanzen erstellenEigenschaften und MethodenWiederholungs-Challenge6Projekt: Ein einfaches Bankkonto
Klasse BankAccountEinzahlungen und AuszahlungenKontostand als privates Feld9Statische Methoden & Eigenschaften
Klassenebene vs. InstanzebeneStatische EigenschaftenStatische HilfsmethodenWiederholungs-Challenge12Getter & Setter
Die Schlüsselwörter get und setBerechnete EigenschaftenValidierung und SeiteneffekteWiederholungs-Challenge15Abschluss-Herausforderungen
Spielfiguren-BuilderE-Commerce ProduktsystemUniversitäts-VerwaltungssystemSmart-Home-GerätesystemÜbe selbstständig: Online-JavaScript-Compiler