Organizar clases en módulos

Parte de la sección Programación Orientada a Objetos del Journey de JavaScript de Coddy — lección 30 de 56.

Cuando tu proyecto crece, tener todas las clases en un solo archivo se vuelve desordenado. Imagina 10 clases en un solo archivo: se vuelve difícil encontrar y mantener el código.

Ya aprendimos cómo organizar el código con módulos: exportando e importando funciones y variables. ¡Con las clases, es la misma lógica y sintaxis! Puedes exportar clases desde un archivo e importarlas en otro, tal como lo hicimos con las funciones.

Practiquemos la organización de clases en módulos para mantener nuestro código limpio y manejable.

Por ejemplo:

Cómo funciona:

Archivo 1: furniture-base.js (Exportar la clase base)

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

Archivo 2: chair.js (Importar y extender)

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

Archivo 3: main.js (Usa todo junto)

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"

Desafío

Tienes un sistema de tienda de electrónica organizado en módulos. Las clases Laptop y Smartphone se crean en archivos separados pero deben estar disponibles para otros archivos.

Tu tarea:

Exporta las clases (usa exportaciones con nombre - no por defecto):
- En laptop.js: Agrega export para que la clase Laptop esté disponible
- En smartphone.js: Agrega export para que la clase Smartphone esté disponible
Importa las clases en main.js:
- Importa la clase Laptop desde laptop.js
- Importa la clase Smartphone desde smartphone.js

Hoja de referencia

Las clases se pueden exportar e importar entre módulos utilizando la misma sintaxis que las funciones y las variables.

Exportar una clase:

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

Importar y extender una clase:

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

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

Importar múltiples clases:

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

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

Pruébalo tú mismo

// TODO: Importar la clase Laptop desde laptop.js

// TODO: Importar la clase Smartphone desde smartphone.js


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

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