Organizar Classes em Módulos

Parte da seção Programação Orientada a Objetos do Journey de JavaScript da Coddy — lição 30 de 56.

Quando o seu projeto cresce, ter todas as classes em um único arquivo torna-se bagunçado. Imagine 10 classes em um único arquivo - torna-se difícil encontrar e manter o código.

Já aprendemos como organizar o código com módulos - exportando e importando funções e variáveis. Com classes, a lógica e a sintaxe são as mesmas! Você pode exportar classes de um arquivo e importá-las em outro, exatamente como fizemos com funções.

Vamos praticar a organização de classes em módulos para manter nosso código limpo e gerenciável.

Por exemplo:

Como Funciona:

Arquivo 1: furniture-base.js (Exporta a classe base)

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

Arquivo 2: chair.js (Importar e estender)

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

Arquivo 3: main.js (Use tudo 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"

Desafio

Você tem um sistema de loja de eletrônicos organizado em módulos. As classes Laptop e Smartphone são criadas em arquivos separados, mas precisam ser disponibilizadas para outros arquivos.

Sua tarefa:

Exporte as classes (use named exports - não default):
- Em laptop.js: Adicione export para tornar a classe Laptop disponível
- Em smartphone.js: Adicione export para tornar a classe Smartphone disponível
Importe as classes em main.js:
- Importe a classe Laptop de laptop.js
- Importe a classe Smartphone de smartphone.js

Folha de consulta

Classes podem ser exportadas e importadas entre módulos usando a mesma sintaxe que funções e variáveis.

Exportando uma classe:

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

Importando e estendendo uma classe:

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

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

Importando múltiplas classes:

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

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

Experimente você mesmo

// TODO: Importe a classe Laptop de laptop.js

// TODO: Importe a classe Smartphone de smartphone.js


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

console.log(myLaptop.type);      // Saída: "laptop"
console.log(myPhone.type);       // Saída: "smartphone"