Módulos JavaScript

En este tutorial, aprenderá sobre módulos en JavaScript con la ayuda de ejemplos.

A medida que nuestro programa crece, puede contener muchas líneas de código. En lugar de poner todo en un solo archivo, puede usar módulos para separar códigos en archivos separados según su funcionalidad. Esto hace que nuestro código esté organizado y sea más fácil de mantener.

El módulo es un archivo que contiene código para realizar una tarea específica. Un módulo puede contener variables, funciones, clases, etc. Veamos un ejemplo,

Supongamos que un archivo llamado greet.js contiene el siguiente código:

 // exporting a function export function greetPerson(name) ( return `Hello $(name)`; )

Ahora, para usar el código de greet.js en otro archivo, puede usar el siguiente código:

 // importing greetPerson from greet.js file import ( greetPerson ) from './greet.js'; // using greetPerson() defined in greet.js let displayName = greetPerson('Jack'); console.log(displayName); // Hello Jack

Aquí,

• La greetPerson()función en greet.js se exporta usando la exportpalabra clave

   export function greetPerson(name) (… )

• Luego, lo importamos greetPerson()en otro archivo usando la importpalabra clave. Para importar funciones, objetos, etc., debe envolverlos ( ).

   import ( greet ) from '/.greet.js';

Nota : Solo puede acceder a funciones, objetos, etc. exportados desde el módulo. Necesita usar la exportpalabra clave para la función particular, objetos, etc. para importarlos y usarlos en otros archivos.

Exportar varios objetos

También es posible exportar varios objetos de un módulo. Por ejemplo,

En el archivo module.js

 // exporting the variable export const name = 'JavaScript Program'; // exporting the function export function sum(x, y) ( return x + y; )

En el archivo principal,

 import ( name, sum ) from './module.js'; console.log(name); let add = sum(4, 9); console.log(add); // 13

Aquí,

 import ( name, sum ) from './module.js';

Esto importa tanto la variable de nombre como la sum()función del archivo module.js .

Cambio de nombre de importaciones y exportaciones

Si los objetos (variables, funciones, etc.) que desea importar ya están presentes en su archivo principal, es posible que el programa no se comporte como desea. En este caso, el programa toma valor del archivo principal en lugar del archivo importado.

Para evitar conflictos de nombres, puede cambiar el nombre de estas funciones, objetos, etc. durante la exportación o durante la importación.

1. Cambiar el nombre en el módulo (archivo de exportación)

 // renaming import inside module.js export ( function1 as newName1, function2 as newName2 ); // when you want to use the module // import in the main file import ( newName1, newName2 ) from './module.js';

Aquí, al exportar la función del archivo module.js , se le dan nuevos nombres (aquí, newName1 y newName2) a la función. Por lo tanto, al importar esa función, el nuevo nombre se usa para hacer referencia a esa función.

2. Cambiar el nombre en el archivo de importación

 // inside module.js export ( function1, function2 ); // when you want to use the module // import in the required file with different name import ( function1 as newName1, function2 as newName2 ) from './module.js';

Aquí, al importar la función, los nuevos nombres (aquí, newName1 y newName2) se utilizan para el nombre de la función. Ahora usa los nuevos nombres para hacer referencia a estas funciones.

Exportación predeterminada

También puede realizar una exportación predeterminada del módulo. Por ejemplo,

En el archivo greet.js :

 // default export export default function greet(name) ( return `Hello $(name)`; ) export const age = 23;

Luego, al importar, puede usar:

 import random_name from './greet.js';

Mientras realiza la exportación predeterminada,

• nombre_aleatorio se importa de greet.js. Dado random_nameque no está en greet.js, la exportación predeterminada ( greet()en este caso) se exporta como random_name.
• Puede utilizar directamente la exportación predeterminada sin encerrar llaves ().

Nota : un archivo puede contener varias exportaciones. Sin embargo, solo puede tener una exportación predeterminada en un archivo.

Los módulos siempre usan el modo estricto

De forma predeterminada, los módulos están en modo estricto. Por ejemplo,

 // in greet.js function greet() ( // strict by default ) export greet();

Beneficio de usar el módulo

• La base del código es más fácil de mantener porque diferentes códigos con diferentes funcionalidades están en diferentes archivos.
• Hace que el código sea reutilizable. Puede definir un módulo y utilizarlo varias veces según sus necesidades.

Es posible que algunos navegadores no admitan el uso de importación / exportación. Para obtener más información, visite Soporte de importación / exportación de JavaScript.