En este tema, aprenderemos sobre los módulos en JavaScript, cómo dividir nuestro código en partes más manejables y cómo importar y exportar esas partes para usarlas en diferentes archivos. Los módulos son una característica esencial para mantener el código organizado y reutilizable.
Conceptos Clave
- Módulos: Un módulo es simplemente un archivo que contiene código JavaScript. Cada módulo tiene su propio ámbito y puede exportar variables, funciones, clases, etc., que pueden ser importadas por otros módulos.
- Exportación: Permite que partes de un módulo (como funciones, objetos o variables) sean accesibles desde otros módulos.
- Importación: Permite que un módulo use funciones, objetos o variables exportadas desde otro módulo.
Exportación
Exportación Nombrada
La exportación nombrada permite exportar múltiples valores desde un módulo. Cada valor exportado debe ser importado usando el mismo nombre.
// math.js
export const pi = 3.14159;
export function add(a, b) {
return a + b;
}
export class Calculator {
multiply(a, b) {
return a * b;
}
}Exportación por Defecto
La exportación por defecto permite exportar un único valor desde un módulo. Este valor puede ser importado usando cualquier nombre.
Importación
Importación Nombrada
Para importar valores exportados de manera nombrada, usamos la sintaxis import { ... } from '...'.
// main.js
import { pi, add, Calculator } from './math.js';
console.log(pi); // 3.14159
console.log(add(2, 3)); // 5
const calc = new Calculator();
console.log(calc.multiply(2, 3)); // 6Importación por Defecto
Para importar un valor exportado por defecto, usamos la sintaxis import ... from '...'.
Importación Combinada
Podemos combinar la importación nombrada y por defecto en una sola declaración.
// main.js
import greet, { pi, add, Calculator } from './math.js';
console.log(greet('World')); // Hello, World!
console.log(pi); // 3.14159
console.log(add(2, 3)); // 5
const calc = new Calculator();
console.log(calc.multiply(2, 3)); // 6Ejemplo Práctico
Vamos a crear un pequeño proyecto que usa módulos para organizar el código.
Paso 1: Crear los Módulos
math.js
export const pi = 3.14159;
export function add(a, b) {
return a + b;
}
export default class Calculator {
multiply(a, b) {
return a * b;
}
}greeting.js
Paso 2: Importar y Usar los Módulos
main.js
import greet from './greeting.js';
import Calculator, { pi, add } from './math.js';
console.log(greet('World')); // Hello, World!
console.log(`The value of pi is ${pi}`); // The value of pi is 3.14159
console.log(`2 + 3 = ${add(2, 3)}`); // 2 + 3 = 5
const calc = new Calculator();
console.log(`2 * 3 = ${calc.multiply(2, 3)}`); // 2 * 3 = 6Ejercicio Práctico
-
Crear un módulo llamado
stringUtils.jsque contenga las siguientes funciones:toUpperCase(str): Convierte una cadena a mayúsculas.toLowerCase(str): Convierte una cadena a minúsculas.capitalize(str): Capitaliza la primera letra de una cadena.
-
Crear un archivo
app.jsque importe las funciones destringUtils.jsy las use para manipular una cadena de texto.
Solución
stringUtils.js
export function toUpperCase(str) {
return str.toUpperCase();
}
export function toLowerCase(str) {
return str.toLowerCase();
}
export function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}app.js
import { toUpperCase, toLowerCase, capitalize } from './stringUtils.js';
const text = 'hello world';
console.log(toUpperCase(text)); // HELLO WORLD
console.log(toLowerCase(text)); // hello world
console.log(capitalize(text)); // Hello worldConclusión
En esta sección, hemos aprendido sobre los módulos en JavaScript y cómo usar la importación y exportación para organizar nuestro código. Los módulos nos permiten dividir nuestro código en partes más manejables y reutilizables, lo que facilita el mantenimiento y la escalabilidad de nuestras aplicaciones. En el siguiente módulo, profundizaremos en el JavaScript asíncrono y cómo manejar operaciones asíncronas de manera eficiente.
JavaScript: De Principiante a Avanzado
Módulo 1: Introducción a JavaScript
- ¿Qué es JavaScript?
- Configuración de tu Entorno de Desarrollo
- Tu Primer Programa en JavaScript
- Sintaxis y Conceptos Básicos de JavaScript
- Variables y Tipos de Datos
- Operadores Básicos
Módulo 2: Estructuras de Control
- Sentencias Condicionales
- Bucles: for, while, do-while
- Sentencias Switch
- Manejo de Errores con try-catch
Módulo 3: Funciones
- Definición y Llamada de Funciones
- Expresiones de Función y Funciones Flecha
- Parámetros y Valores de Retorno
- Ámbito y Closures
- Funciones de Orden Superior
Módulo 4: Objetos y Arrays
- Introducción a los Objetos
- Métodos de Objeto y la Palabra Clave 'this'
- Arrays: Conceptos Básicos y Métodos
- Iteración sobre Arrays
- Desestructuración de Arrays
Módulo 5: Objetos y Funciones Avanzadas
- Prototipos y Herencia
- Clases y Programación Orientada a Objetos
- Módulos e Importación/Exportación
- JavaScript Asíncrono: Callbacks
- Promesas y Async/Await
Módulo 6: El Modelo de Objetos del Documento (DOM)
- Introducción al DOM
- Selección y Manipulación de Elementos del DOM
- Manejo de Eventos
- Creación y Eliminación de Elementos del DOM
- Manejo y Validación de Formularios
Módulo 7: APIs del Navegador y Temas Avanzados
- Almacenamiento Local y de Sesión
- Fetch API y AJAX
- WebSockets
- Service Workers y Aplicaciones Web Progresivas (PWAs)
- Introducción a WebAssembly
Módulo 8: Pruebas y Depuración
- Depuración de JavaScript
- Pruebas Unitarias con Jest
- Pruebas de Integración
- Pruebas de Extremo a Extremo con Cypress
Módulo 9: Rendimiento y Optimización
- Optimización del Rendimiento de JavaScript
- Gestión de Memoria
- Manipulación Eficiente del DOM
- Carga Perezosa y División de Código
Módulo 10: Frameworks y Librerías de JavaScript
- Introducción a React
- Gestión de Estado con Redux
- Conceptos Básicos de Vue.js
- Conceptos Básicos de Angular
- Elegir el Framework Adecuado