Declaraciones de módulos, importación y exportación en JavaScript | Explicado con ejemplos

Los módulos se utilizan en JavaScript para implementar el concepto de modularidad que es, en su núcleo, el proceso de dividir una solución en componentes más pequeños, compactos y más significativos. En JavaScript, la modularidad se logra mediante el uso de palabras clave de exportaciones e importaciones. Cuando JavaScript se usa como un script modular con una página web HTML, la palabra clave "módulo"Se agrega como el tipo de etiqueta de script

Por qué usar módulos

Evite repetir las palabras. “Con el paso del tiempo, las aplicaciones web cambiaron de ser programas muy pequeños a programas grandes y complejos para realizar tareas complicadas. Para hacer aplicaciones web más grandes/complejas, ES6 JavaScript llegó con la capacidad de dividir los scripts en componentes más pequeños y manejables con el uso del característica de exportación y el función de importación.

Configuración de una página HTML

Vaya a su editor de texto preferido y cree una página HTML, simplemente coloque las siguientes líneas de código dentro de la etiqueta del cuerpo:

Los módulos JS explicaron

En lugar de manipular los elementos HTML en una página web, vamos a mostrar y verificar la salida usando la consola. Por lo tanto, no requerimos elementos elegantes en nuestra página web HTML.

Ejecute el archivo y verá la siguiente salida:

Configuración de archivos de script

Ahora, mientras permanece en el mismo directorio donde está su archivo HTML, cree dos ".js"Archivos como:

• principal.JS: Este archivo se vinculará a la página web HTML.
• componente.JS: Este archivo contendrá algunas funciones de componentes.

Tal como esto:

Ahora, en su HTML, vincule el Mainscript.JS usando el siguiente comando:

Como puede ver, a diferencia de las etiquetas de script normales, no solo estamos pasando el enlace de origen, sino también el tipo que se establece en "módulo", Para notificar al navegador que este script está en forma modular.

Agregar función dentro del archivo componente

Ahora, para mostrar la modularidad, creará algunas variables/funciones en el archivo de script de componente "componente.js"Y exportarlos dentro del principal.js.

Dentro de componente.js Cree la siguiente función que imprima 5 números:

function printnumbers (num)
para (deja i = num; i <= num+5 ; i++)
consola.log (i);

Su archivo de script de componente se verá así:

Exportar e importar características

Ahora para acceder a esta función dentro de la principal.js Archivo que necesita exportar esta función desde CompScript.archivo js. Puede hacerlo colocando la exportación de palabras clave detrás de la función como esta:

Ahora, para usarlo dentro del Mainscript.JS, necesitamos atrapar esto exportar utilizando el importar función. Puede hacerlo usando la siguiente sintaxis:

import function-name de "scriptSoruce.JS;

En nuestro caso, esta línea cambiaría a:

import printnumbers de "./CompScript.JS ";

Ahora para usar esta función en nuestro archivo de script principal, simplemente puede llamar a la función, ya que llamamos a cualquier otra función en JavaScript:

printnumbers (5);

El principal.js se verá así:

Guarde el archivo y actualice el HTML y diríjase a la consola del desarrollador y verá la siguiente salida:

Y si presta mucha atención a la salida dentro de la consola, verá:

Aunque solo vinculaste el mianscript.js Con la página HTML, nuestro componente se ejecutó correctamente. Por lo tanto, puede decir que ha implementado con éxito el concepto de modularidad componencial.

Pero espera hay mas!

Imagine que está exportando múltiples funciones como:

Exportar función printnumbers (num)
para (deja i = num; i <= num + 5; i++)
consola.log (i);


Exportar función nameprinter ()
consola.Log ("John Doe")

exportación const const = 22;
Exportar función printJob ()
consola.log ('auditor');

Escribir la palabra clave exportar Con cada elemento que desea exportar no es un buen enfoque, lo que puede hacer es al final del archivo, escribir un comando de línea, que exportará las funciones y las variables que desea.

Haces esto escribiendo la siguiente línea:

Exportar printnumbers, namePrinter, edad, printJob;

Su componente.js se verá así:

Del mismo modo, para importar todas las funciones y variables con la palabra clave de exportación de un archivo, puede usar el símbolo "*" de Asterisk como se muestra a continuación:

importar * como comp de "./CompScript.JS ";

El símbolo de asterisco " *" significa que desea importar todas las exportaciones del archivo bajo el nombre "compensación",

Para usar la función y las variables que acabamos de importar, use el operador de puntos junto con el nombre de la función/variable:

compensación.Nameprinter ();

Si usara todas las exportaciones del componente.js archivo, luego usará el siguiente código:

importar * como comp de "./CompScript.JS ";
compensación.Nameprinter ();
consola.log ("La edad es:" + comp.edad);
compensación.printJob ();
compensación.printnumbers (2);

Entonces tu principal.js se verá así:

Guarde los archivos y actualice la página web y verá la salida dentro de la consola como

Como puede ver, utilizamos con éxito todas las exportaciones de la componente.js dentro de nuestro principal.js archivo.

Conclusión

Los módulos nos ayudan a dividir nuestras aplicaciones web en piezas más pequeñas, concisas y manejables; La modularidad en JavaScript se logra dividiendo el script en varios componentes y utilizando el importar y exportar características Opción introducida en ES6. Para demostrar esto, configuramos una página HTML básica, creamos dos archivos de script diferentes y dimos algunas características dentro del archivo de componentes. Luego, los usamos dentro de nuestro archivo de script principal. También aprendimos diferentes formas de exportar múltiples características e importar todas las características a la vez.