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

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"