Tema 12 · Módulos ES6

Módulos ES (ESM): export, import y Arquitectura de Archivos de Clases

Aprende a estructurar proyectos limpios aplicando la regla de una clase por archivo mediante el sistema oficial de módulos ECMAScript con export e import.

Fijación de Contexto con bind, call, apply y Arrow Functions (Enlace Léxico) Patrón Singleton y Module Pattern en JavaScript

La Regla de Oro: Un Archivo por Clase

Escribir todo el código de una aplicación en un único archivo gigante de 5000 líneas es una receta para el desastre: colisiones de variables, dificultad para colaborar en equipo y conflictos constantes en Git.

En la arquitectura moderna de software, cada clase se declara en su propio archivo independiente con el mismo nombre (ej: Usuario.js, ServicioFacturacion.js) y se comparte utilizando el sistema oficial de Módulos ECMAScript (ESM).

Exportaciones: Nombradas vs. Por Defecto

Tipo de Exportación Sintaxis en el Archivo Origen Sintaxis en el Archivo Destino
Exportación por Defecto (`export default`) export default class Pedido { ... } import Pedido from './Pedido.js'; (Sin llaves)
Exportación Nombrada (`export`) export class DetallePedido { ... } import { DetallePedido } from './DetallePedido.js';
Importación con Alias (`as`) export class Logger { ... } import { Logger as FileLogger } from './Logger.js';

Habilitación de Módulos

  • En el Navegador Web: Se añade el atributo type="module" a la etiqueta script:
    <script type="module" src="app.js"></script>
  • En Node.js: Se especifica "type": "module" en el archivo package.json o se utiliza la extensión de archivo .mjs.

⚡ Arquitectura Modular de Clases con Export, Import y Controlador

Ejecuta el código en el Sandbox y observa cómo interactúan módulos separados:

ModulosDemo.js
Solo lectura 
// ==========================================
// SIMULACIÓN DE MÓDULO 1: /models/Cliente.js
// ==========================================
const ModuloCliente = (() => {
    class Cliente {
        constructor(id, nombre, email) {
            this.id = id;
            this.nombre = nombre;
            this.email = email;
        }

        obtenerFicha() {
            return `Cliente: ${this.nombre} <${this.email}>`;
        }
    }

    return { Cliente };
})();

// ==========================================
// SIMULACIÓN DE MÓDULO 2: /services/Facturacion.js
// ==========================================
const ModuloFacturacion = (() => {
    class ServicioFacturacion {
        generarFactura(cliente, items) {
            const subtotal = items.reduce((acc, item) => acc + item.precio, 0);
            const iva = subtotal * 0.19;
            const total = subtotal + iva;

            return {
                folio: "FAC-" + Math.floor(1000 + Math.random() * 9000),
                cliente: cliente.obtenerFicha(),
                articulos: items.length,
                subtotal: subtotal.toFixed(2),
                total: total.toFixed(2),
                fecha: new Date().toLocaleDateString()
            };
        }
    }

    return { ServicioFacturacion };
})();

// ==========================================
// CÓDIGO PRINCIPAL: /app.js (Importa y Orquesta)
// ==========================================
const { Cliente } = ModuloCliente;
const { ServicioFacturacion } = ModuloFacturacion;

console.log("=== ARQUITECTURA MODULAR DE CLASES ===");
const nuevoCliente = new Cliente(1, "Valeria Torres", "[email protected]");
const servicio = new ServicioFacturacion();

const carrito = [
    { nombre: "Curso Arquitectura JS", precio: 89.99 },
    { nombre: "E-book Patrones de Diseño", precio: 29.99 }
];

const facturaEmitida = servicio.generarFactura(nuevoCliente, carrito);

console.log("✔ Factura generada por el módulo de facturación:");
console.log(`• Folio: ${facturaEmitida.folio}`);
console.log(`• Destinatario: ${facturaEmitida.cliente}`);
console.log(`• Total a Pagar (+IVA): $${facturaEmitida.total} USD`);
console.log(`• Fecha de Emisión: ${facturaEmitida.fecha}`);
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🧠
Mini-Quiz de Retención
Comprueba tu comprensión antes de pasar a la siguiente lección
1 Pregunta
Pregunta 1
¿Cuál es la diferencia en la sintaxis de importación entre una clase exportada con "export default" y una con "export" nombrada?
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual de Programación Orientada a Objetos en JavaScript (POO) y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.