Módulos
## Objetivos de Aprendizaje
- Entender la sintaxis ES6 de módulos
- Comparar CommonJS y ES modules
- Dominar imports dinámicos
## Introducción a los Módulos
Los módulos permiten organizar código en archivos separados e importar solo lo que necesitas.
## Módulos ES6
### Exportar
```javascript
// named-export.js
export const PI = 3.14159;
export const E = 2.71828;
export function sumar(a, b) {
return a + b;
}
export class Calculadora {
multiplicar(a, b) {
return a * b;
}
}
const helper = () => console.log("Ayudante");
export default helper;
```
### Importar
```javascript
// named-import.js
import { PI, E, sumar } from "./named-export.js";
console.log(PI);
console.log(sumar(2, 3));
import { sumar as suma } from "./named-export.js";
console.log(suma(2, 3));
import helper from "./named-export.js";
import * as math from "./named-export.js";
console.log(math.PI);
console.log(math.sumar(2, 3));
```
### Sintaxis Combinada
```javascript
import { default as helper, PI, sumar } from "./module.js";
```
## Exportaciones
### Export Nombrado
```javascript
export const nombre = "Juan";
export function saludar() { }
export class MiClase { }
```
### Export Default
```javascript
export default function greet(name) {
return `¡Hola, ${name}!`;
}
export default class MiClase { }
```
### Re-exportar
```javascript
export { sumar, restar } from "./math-utils.js";
export { PI } from "./constants.js";
```
## CommonJS (Node.js)
### Exportar en CommonJS
```javascript
// module.js
exports.PI = 3.14159;
exports.sumar = (a, b) => a + b;
module.exports = {
PI: 3.14159,
sumar: (a, b) => a + b
};
```
### Importar en CommonJS
```javascript
const { PI, sumar } = require("./module.js");
const math = require("./module.js");
```
## Importaciones Dinámicas
```javascript
// Solo cargar cuando sea necesario
button.addEventListener("click", async () => {
const { heavyFunction } = await import("./heavy-module.js");
heavyFunction();
});
```
## Módulo en HTML
```html
```
## Ámbito de Módulo
```javascript
// module-a.js
const privateVar = "Soy privado"; // No exportado
export const publicVar = "Soy público";
```
```javascript
// Las variables en módulos estánScoped al módulo
// No se vuelven globales
```
## Mejores Prácticas
1. **Usar exportaciones nombradas** para la mayoría de cosas
2. **Usar exportación default** para la exportación principal de un módulo
3. **Mantener módulos enfocados** - un módulo por característica
4. **Usar archivos barrel** (index.js) para re-exports
5. **Usar convenciones de nomenclatura consistentes**
## Resumen
- Módulos ES6: sintaxis `import` y `export`
- Exportaciones nombradas: `export const x = 1; import { x } from "./mod";`
- Exportación default: `export default fn; import fn from "./mod";`
- Importaciones dinámicas cargan módulos bajo demanda con `import()`
- CommonJS (`require`/`exports`) es el formato legacy de Node.js
Comments
Comments powered by Giscus
To enable comments, add your Giscus embed code here.
Learn more about Giscus →