Klassen in Modulen organisieren

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

Wenn Ihr Projekt wächst, wird es unübersichtlich, alle Klassen in einer Datei zu haben. Stellen Sie sich 10 Klassen in einer Datei vor – es wird schwierig, Code zu finden und zu warten.

Wir haben bereits gelernt, wie man Code mit Modulen organisiert – das Exportieren und Importieren von Funktionen und Variablen. Bei Klassen ist es dieselbe Logik und Syntax! Sie können Klassen aus einer Datei exportieren und in eine andere importieren, genau wie wir es mit Funktionen getan haben.

Lass uns üben, Klassen in Modulen zu organisieren, um unseren Code sauber und überschaubar zu halten.

Zum Beispiel:

Wie es funktioniert:

Datei 1: furniture-base.js (Exportiere die Basisklasse)

export class Furniture {
 constructor(material) {
   this.material = material;
 }
 
 describe() {
   return `${this.material} furniture`;
 }
}

Datei 2: chair.js (Importieren und erweitern)

import { Furniture } from './furniture-base.js';
export class Chair extends Furniture {
 constructor(material, legs) {
   super(material);
   this.legs = legs;
 }
 
 sit() {
   return "Sitting comfortably";
 }
}

Datei 3: main.js (Alles zusammen verwenden)

import { Chair } from './chair.js';
import { Table } from './table.js';
const myChair = new Chair("wood", 4);
const myTable = new Table("glass", "round");
console.log(myChair.describe());  // "wood furniture"
console.log(myTable.describe());  // "glass furniture"

Aufgabe

Sie haben ein Elektronikgeschäft-System, das in Modulen organisiert ist. Die Klassen Laptop und Smartphone werden in separaten Dateien erstellt, müssen aber für andere Dateien verfügbar gemacht werden.

Ihre Aufgabe:

Exportieren Sie die Klassen (verwenden Sie benannte Exporte - nicht default):
- In laptop.js: Fügen Sie export hinzu, um die Klasse Laptop verfügbar zu machen
- In smartphone.js: Fügen Sie export hinzu, um die Klasse Smartphone verfügbar zu machen
Importieren Sie die Klassen in main.js:
- Importieren Sie die Klasse Laptop aus laptop.js
- Importieren Sie die Klasse Smartphone aus smartphone.js

Spickzettel

Klassen können mit derselben Syntax wie Funktionen und Variablen zwischen Modulen exportiert und importiert werden.

Exportieren einer Klasse:

export class Furniture {
  constructor(material) {
    this.material = material;
  }
  
  describe() {
    return `${this.material} furniture`;
  }
}

Importieren und Erweitern einer Klasse:

import { Furniture } from './furniture-base.js';

export class Chair extends Furniture {
  constructor(material, legs) {
    super(material);
    this.legs = legs;
  }
  
  sit() {
    return "Sitting comfortably";
  }
}

Importieren mehrerer Klassen:

import { Chair } from './chair.js';
import { Table } from './table.js';

const myChair = new Chair("wood", 4);
const myTable = new Table("glass", "round");

Probier es selbst

// TODO: Importiere die Laptop-Klasse aus laptop.js

// TODO: Importiere die Smartphone-Klasse aus smartphone.js


const myLaptop = new Laptop();
const myPhone = new Smartphone();

console.log(myLaptop.type);      // Ausgabe: "laptop"
console.log(myPhone.type);       // Ausgabe: "smartphone"