Patrón Módulo (ES Modules) para organizar código JS limpio

Introducción Tener todo tu JavaScript en un solo archivo de 3000 líneas o usar múltiples etiquetas <script> en el HTML genera caos y colisiones de variables globales. Este desorden dificulta el escalado del proyecto y la detección de errores. La solución profesional es el uso de ES Modules (import/export), que permite encapsular la lógica en archivos independientes y reutilizables.

Solución Rápida (Código)

// math.js - Exportación nominada
export const sumar = (a, b) => a + b;

// main.js - Importación selectiva
import { sumar } from './math.js';

console.log(sumar(10, 5));

// En el HTML
<script type="module" src="main.js"></script>

Explicación técnica Los ES Modules (ESM) son el estándar oficial de JavaScript para la modularización. A diferencia de los scripts tradicionales, los módulos tienen su propio scope (ámbito), lo que significa que las variables declaradas dentro de ellos no “contaminan” el objeto global window. Esto elimina por completo el riesgo de que dos scripts diferentes sobrescriban la misma variable.

Además, los módulos se cargan con el atributo defer por defecto, mejorando el rendimiento de carga inicial. Permiten también el uso de Tree Shaking, una técnica que los bundlers (como Vite o Webpack) usan para eliminar el código que no estás utilizando, reduciendo el tamaño final del archivo enviado al usuario. Adoptar módulos es el primer paso hacia una arquitectura de software moderna, mantenible y profesional.

Conclusión Organizar tu código es tan importante como escribirlo. Si quieres avanzar en arquitectura, no te pierdas nuestra guía sobre Diseño de componentes nativos con Web Components.