Organiser les classes en modules

Fait partie de la section Programmation Orientée Objet du Journey JavaScript de Coddy — leçon 30 sur 56.

Lorsque votre projet se développe, avoir toutes les classes dans un seul fichier devient désordonné. Imaginez 10 classes dans un seul fichier : il devient difficile de trouver et de maintenir le code.

Nous avons déjà appris à organiser le code avec des modules - en exportant et en important des fonctions et des variables. Avec les classes, c'est la même logique et la même syntaxe ! Vous pouvez exporter des classes d'un fichier et les importer dans un autre, tout comme nous l'avons fait avec les fonctions.

Pratiquons l'organisation des classes en modules pour garder notre code propre et gérable.

Par exemple :

Comment ça fonctionne :

Fichier 1 : furniture-base.js (Exporter la classe de base)

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

Fichier 2 : chair.js (Importer et étendre)

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

Fichier 3 : main.js (Utilisez le tout ensemble)

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());  // "meuble en bois"
console.log(myTable.describe());  // "meuble en verre"

Défi

Vous avez un système de magasin d'électronique organisé en modules. Les classes Laptop et Smartphone sont créées dans des fichiers séparés mais doivent être rendues disponibles pour d'autres fichiers.

Votre tâche :

Exporter les classes (utilisez des exports nommés - pas par défaut) :
- Dans laptop.js : Ajoutez export pour rendre la classe Laptop disponible
- Dans smartphone.js : Ajoutez export pour rendre la classe Smartphone disponible
Importer les classes dans main.js :
- Importez la classe Laptop depuis laptop.js
- Importez la classe Smartphone depuis smartphone.js

Aide-mémoire

Les classes peuvent être exportées et importées entre les modules en utilisant la même syntaxe que pour les fonctions et les variables.

Exporter une classe :

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

Importer et étendre une classe :

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

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

Importer plusieurs classes :

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

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

Essayez vous-même

// À FAIRE : Importer la classe Laptop depuis laptop.js

// À FAIRE : Importer la classe Smartphone depuis smartphone.js


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

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