Organizzare le classi in moduli

Fa parte della sezione Programmazione orientata agli oggetti del percorso JavaScript di Coddy. Lezione 30 di 56.

Quando il tuo progetto cresce, avere tutte le classi in un unico file diventa un caos. Immagina 10 classi in un unico file: diventa difficile trovare e mantenere il codice.

Abbiamo già imparato a organizzare il codice con i moduli: esportando e importando funzioni e variabili. Con le classi, la logica e la sintassi sono le stesse! Puoi esportare classi da un file e importarle in un altro, proprio come abbiamo fatto con le funzioni.

Esercitiamoci a organizzare le classi in moduli per mantenere il nostro codice pulito e gestibile.

Per esempio:

Come funziona:

File 1: furniture-base.js (Esporta la classe base)

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

File 2: chair.js (Importa ed estendi)

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

File 3: main.js (Usa tutto insieme)

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"

Sfida

Hai un sistema per un negozio di elettronica organizzato in moduli. Le classi Laptop e Smartphone sono create in file separati, ma devono essere rese disponibili agli altri file.

Il tuo compito:

Esporta le classi (usa esportazioni con nome, non predefinite):
- In laptop.js: aggiungi export per rendere disponibile la classe Laptop
- In smartphone.js: aggiungi export per rendere disponibile la classe Smartphone
Importa le classi in main.js:
- Importa la classe Laptop da laptop.js
- Importa la classe Smartphone da smartphone.js

Provalo tu

// TODO: Importa la classe Laptop da laptop.js

// TODO: Importa la classe Smartphone da smartphone.js


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

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