Módulos en JavaScript

Este artículo explica los módulos en JavaScript.

YouTube Video

Módulos en JavaScript

Los módulos en JavaScript son una forma de organizar el código y dividirlo en componentes reutilizables. Al usar módulos, se mejora la legibilidad y el mantenimiento del código, y se puede reutilizar la misma funcionalidad en otros proyectos. Aquí explicamos varios sistemas de módulos, desde el concepto de módulos hasta ejemplos de uso específicos.

El concepto de módulos en JavaScript

JavaScript no tenía originalmente un sistema modular. Sin embargo, a medida que las aplicaciones crecieron, la modularización se volvió importante para dividir el código en unidades más pequeñas para su reutilización. Un módulo es un fragmento de código con una función específica que puede ser gestionado de forma independiente de otros códigos, permitiendo dividirlo en varios archivos.

Principales tipos de módulos

Existen varios sistemas de módulos en JavaScript. Los más comunes son los módulos ES (ESM) y CommonJS.

• Los Módulos ES son un sistema de módulos introducido en ECMAScript 2015 (ES6), que define módulos usando las palabras clave import y export. Este sistema se utiliza ampliamente tanto en el lado del cliente (navegadores) como en el lado del servidor (Node.js).

• CommonJS es un sistema de módulos utilizado principalmente en Node.js. Los módulos se definen usando require y module.exports para importar y exportar archivos.

Detalles de los Módulos ES (ESM)

Los módulos ES son el sistema de módulos estándar en JavaScript, permitiendo un intercambio fácil de funcionalidades entre módulos. En los navegadores y Node.js, este sistema se utiliza para definir e importar módulos.

export e import

export es una palabra clave para exponer funcionalidades de un módulo al exterior. import se utiliza para incorporar funcionalidades definidas en otros módulos.

Ejemplo: Exportación de Módulo

Los módulos pueden ser exportados en ES Modules de la siguiente manera.

1// math.mjs
2export function add(a, b) {
3    return a + b;
4}
5export function subtract(a, b) {
6    return a - b;
7}

En este módulo math.mjs, se exportan las funciones add y subtract. Estas funciones pueden ser importadas desde otros módulos.

Aquí, .mjs es una extensión de archivo que indica explícitamente un archivo JavaScript en formato de Módulo ES. En Node.js, la extensión del archivo determina si es CommonJS o ES Modules. Sin embargo, si se especifica type: "module" en package.json, los archivos con extensión .js se tratan como ES Modules por defecto.

Ejemplo: Importación de Módulo

Los módulos pueden ser importados en ES Modules de la siguiente manera.

1// main.mjs
2import { add, subtract } from './math.mjs';
3
4console.log(add(3, 5)); // 8
5console.log(subtract(10, 7)); // 3

De esta manera, usando import, puedes utilizar fácilmente funciones definidas en otros archivos.

Exportación por Defecto y Exportación Nombrada

Hay dos métodos de exportación para los módulos. Uno es la exportación nombrada y el otro es la exportación por defecto.

• Las exportaciones nombradas se usan cuando se exportan múltiples funciones o variables de un módulo. Puede realizar múltiples exportaciones y, al importar, las recibe con nombres especificados.

1// utils.mjs
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

1// main.mjs
2import { sum, multiply } from './utils.mjs';
3
4console.log(sum(4, 6));       // 10
5console.log(multiply(3, 5));  // 15

• La exportación predeterminada se utiliza al exportar una sola función o clase desde un módulo. Durante la importación, se puede recibir con cualquier nombre.

1// greet.mjs
2export default function greet() {
3    return "Hello, World!";
4}

1// main.mjs
2import greet from './greet.mjs';
3
4console.log(greet()); // "Hello, World!"

Solo es posible una exportación predeterminada, pero las exportaciones con nombre pueden exportar múltiples elementos simultáneamente.

Ejemplo de uso en el lado del cliente (navegador).

Ejemplo: Exportación de Módulo

Los módulos pueden ser exportados en ES Modules de la siguiente manera.

1// utils.js
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

En este módulo utils.js, se exportan las funciones sum y multiply.

Ejemplo: Importación de Módulo

Los módulos pueden ser importados en el lado del cliente de la siguiente manera.

 1<!DOCTYPE html>
 2<html lang="ja">
 3<head>
 4  <meta charset="UTF-8">
 5  <title>ES Modules Sample in HTML</title>
 6</head>
 7<body>
 8  <h1>ES Modules Sample</h1>
 9  <div id="result"></div>
10
11  <script type="module">
12    import { sum, multiply } from './utils.js';
13
14    const result = `
15      <p>sum(3, 5) = ${sum(3, 5)}</p>
16      <p>multiply(10, 7) = ${multiply(10, 7)}</p>
17    `;
18
19    document.getElementById('result').innerHTML = result;
20    console.log(sum(3, 5));      // 8
21    console.log(multiply(10, 7)); // 70
22  </script>
23</body>
24</html>

• Al establecer el atributo type de la etiqueta <script> como module, la sintaxis de módulos ES como import y export puede utilizarse dentro de HTML.
• La declaración import carga el archivo externo utils.js y muestra el resultado.

Detalles de CommonJS

CommonJS es un sistema de módulos utilizado principalmente en Node.js. Los módulos se exportan e importan utilizando module.exports y require.

require y module.exports

En CommonJS, se utiliza module.exports para exportar módulos. Además, se utiliza require para utilizar módulos de otros archivos.

Ejemplo: Exportación de Módulo

Los módulos pueden ser exportados en CommonJS de la siguiente manera.

1// math.js
2module.exports = {
3    add: function(a, b) {
4        return a + b;
5    },
6    subtract: function(a, b) {
7        return a - b;
8    }
9};

Ejemplo: Importación de Módulo

Los módulos pueden ser importados en CommonJS de la siguiente manera.

1// main.js
2const math = require('./math.js');
3
4console.log(math.add(4, 7));      // 11
5console.log(math.subtract(9, 2)); // 7

En Node.js, CommonJS se utiliza como el sistema de módulos predeterminado, pero también se admiten los módulos ES.

Importación Dinámica

En JavaScript, los módulos se pueden importar dinámicamente utilizando import(). Este método utiliza procesamiento asíncrono para cargar módulos según sea necesario.

Las importaciones dinámicas pueden realizarse de la siguiente manera.

1async function loadModule() {
2    const math = await import('./math.js');
3    console.log(math.add(5, 3)); // 8
4}
5
6loadModule();

La importación dinámica es una forma de mejorar el rendimiento de las aplicaciones. Dado que puede cargar módulos según sea necesario en lugar de cargarlos todos durante la carga inicial, mejora la velocidad de visualización de la página.

Ventajas de los Módulos

• Reutilización de código

  • El código modularizado puede ser reutilizado en otros proyectos. Al crear módulos con funcionalidades comunes y utilizarlos en varias aplicaciones, se mejora significativamente la eficiencia del desarrollo.

• Mantenibilidad mejorada

  • Al dividir el código en módulos, es más fácil modificar características o partes específicas. Gestionar el código en pequeñas unidades facilita encontrar y corregir errores.

• Evitar colisiones de espacio de nombres

  • Definir muchas variables y funciones en el ámbito global puede causar colisiones de nombres, pero la modularización lo previene y ayuda a mantener una base de código más limpia.

• Gestión de dependencias

  • El uso de módulos permite gestionar explícitamente las dependencias de una aplicación. Queda claro qué módulo depende de otros módulos, lo que facilita entender la estructura del código.

Resumen

El sistema de módulos de JavaScript es una herramienta poderosa para organizar el código y dividirlo en componentes reutilizables. Al comprender las diferencias entre los módulos ES y CommonJS y elegir el sistema de módulos adecuado según el proyecto, puede mejorar la legibilidad y el mantenimiento del código. Además, al utilizar importaciones dinámicas, puede optimizar el rendimiento de la aplicación.

Aprovechemos el sistema de módulos para crear aplicaciones JavaScript más escalables y eficientes.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video