JavaScript-Module und -Klassen

Tag 9: JavaScript-Module und -Klassen

Datum: 16. Dezember 2024

Willkommen zu Tag 9! Heute erkunden wir Module und Klassen in JavaScript, zwei Konzepte, die die Codeorganisation, Wiederverwendbarkeit und Lesbarkeit erheblich verbessern. Das Verständnis dieser Themen wird Ihre JavaScript-Kenntnisse verbessern und es Ihnen ermöglichen, Ihre Projekte wie ein professioneller Entwickler zu strukturieren.

---

1. JavaScript-Module

Mit Modulen können Sie Ihren Code in kleinere, wiederverwendbare Teile aufteilen. Anstatt eine große Datei zu haben, können Sie die Funktionalität in mehreren Dateien organisieren, wodurch Ihre Codebasis einfacher zu verwalten und zu warten ist.

Warum Module verwenden?

1. Separation of Concerns: Jedes Modul übernimmt eine bestimmte Verantwortung.
2. Wiederverwendbarkeit: Code aus einem Modul kann in einem anderen wiederverwendet werden.
3. Wartbarkeit: Einfacheres Debuggen und Aktualisieren.

---

Exportieren und Importieren in Modulen

Exportieren aus einem Modul

Mit Export können Sie Variablen, Funktionen oder Klassen aus einem Modul exportieren.

Benannter Export

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

Standardexport

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

Modul importieren

Verwenden Sie das Schlüsselwort import, um Funktionen aus einem anderen Modul einzubinden.

Beispiel: Benannte Exporte importieren

// main.js
import { add, subtract } from './utils.js';

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

Beispiel: Importieren eines Standardexports

// main.js
import greet from './greet.js';

console.log(greet("Alice")); // Output: Hello, Alice!

---

Dynamischer Import

Dynamische Importe laden Module zur Laufzeit mit import().

Beispiel: Lazy Loading

const loadModule = async () => {
  const module = await import('./utils.js');
  console.log(module.add(5, 3)); // Output: 8
};

loadModule();

---

2. JavaScript-Klassen

Klassen in JavaScript bieten eine Blaupause für die Erstellung von Objekten und die Kapselung zugehöriger Daten und Methoden. Sie sind Teil von ES6 und von grundlegender Bedeutung für die objektorientierte Programmierung in JavaScript.

Eine Klasse definieren

Eine Klasse wird mit dem Schlüsselwort class definiert.

Beispiel: Grundkurs

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  }
}

const person1 = new Person("John", 30);
console.log(person1.greet()); // Output: Hello, my name is John and I am 30 years old.

---

Klassenvererbung

Vererbung ermöglicht es einer Klasse, Eigenschaften und Methoden von einer anderen Klasse mithilfe des Schlüsselworts „extends“ abzuleiten.

Beispiel: Vererbung

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Buddy");
dog.speak(); // Output: Buddy barks.

---

Statische Methoden

Statische Methoden gehören zur Klasse selbst, nicht zur Instanz.

Beispiel: Statische Methode

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

---

Private Felder und Methoden

Private Felder und Methoden sind nur innerhalb der Klasse zugänglich und werden durch ein #-Präfix gekennzeichnet.

Beispiel: Privates Feld

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

---

Klassen- vs. Objektliterale

Während Objektliterale für einfache Datenstrukturen schnell und unkompliziert sind, bieten Klassen Folgendes:

• Eine klare Blaupause zum Erstellen mehrerer ähnlicher Objekte.
• Unterstützung für Vererbung und Kapselung.

---

3. Kombinieren von Modulen und Kursen

Module und Klassen ergänzen sich in modernen JavaScript-Anwendungen wunderbar. Sie können eine Klasse in einem Modul definieren und in einem anderen verwenden.

Beispiel: Kombination von Modulen und Kursen

// main.js
import { add, subtract } from './utils.js';

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

---

4. Beispiel aus der Praxis: Warenkorb

Hier ist ein praktisches Beispiel, das beide Module und Kurse kombiniert.

Datei: cart.js

// main.js
import greet from './greet.js';

console.log(greet("Alice")); // Output: Hello, Alice!

Datei: main.js

const loadModule = async () => {
  const module = await import('./utils.js');
  console.log(module.add(5, 3)); // Output: 8
};

loadModule();

---

Wichtige Erkenntnisse

1. Module: Helfen Sie dabei, Ihren Code zu organisieren und die Wiederverwendbarkeit zu fördern.
2. Klassen: Bieten eine strukturierte Möglichkeit, mit Objekten zu arbeiten, und bieten Funktionen wie Vererbung und Kapselung.
3. Kombinierte Nutzung: Verwenden Sie Module und Klassen zusammen, um skalierbare und wartbare Anwendungen zu erstellen.

---

Übungsaufgaben

1. Erstellen Sie ein Modul, das Funktionen für grundlegende arithmetische Operationen exportiert.
2. Schreiben Sie eine Klasse für ein Bibliothekssystem mit Methoden zum Hinzufügen und Auflisten von Büchern.
3. Kombinieren Sie Module und Klassen, um einen einfachen E-Commerce-Warenkorb zu simulieren.

---

Was kommt als nächstes?

Morgen, am Tag 10, beschäftigen wir uns mit Ereignisschleife und asynchroner Programmierung, wo Sie lernen, wie JavaScript Parallelität, Rückrufe, Versprechen und die Ereignisschleife handhabt . Bleiben Sie dran!

Das obige ist der detaillierte Inhalt vonJavaScript-Module und -Klassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!