Cómo usar la importación y la exportación en JavaScript

JavaScript ofrece una característica avanzada llamada módulos, usando estos módulos Podemos utilizar cualquier objeto, clase, literal o función de un archivo JavaScript en cualquier otro archivo JavaScript. Mejora la reutilización del código y reduce el tiempo de carga del archivo HTML. Para este propósito, los módulos JavaScript proporcionan dos palabras clave, "importar" y "exportar".

Implementación de la exportación en JavaScript

Una palabra clave "exportar" se requiere cada vez que exportamos los datos de un archivo a otro archivo. Usando la palabra clave "exportar" Podemos exportar algo como una variable, función o clase a cualquier otro archivo. Lo que tenemos que hacer es simplemente escribir el "exportar" palabra clave antes de esa variable, función, clase o cualquier cosa que queramos exportar.

La sintaxis para exportar una variable, función y clase es:

// Exportar una variable
exportar var emp_name;
// Exportar una función
Exportar función emp ()

// Exportar una clase
Empleado de clase de exportación

Ahora descubriremos el funcionamiento de la palabra clave "exportar" con la ayuda del siguiente ejemplo, digamos que creamos el archivo con el nombre de exportación.JS:

Considere el siguiente ejemplo que determina cómo exportar una variable, función o clase:

exportar let emp_name = "Mike Smith";
Exportar función emp ()
consola.log ("El nombre del empleado es Mike Smith");

Empleado de clase de exportación
Constructor (EMP_NAME)

consola.log ("bienvenido" + emp_name);

La sintaxis alternativa para exportar los elementos del archivo es:

Exportar emp_name, emp, empleado;

Utilizando la sintaxis dada anteriormente, podemos exportar todos los elementos del archivo en una sola declaración, y al importar utilizaremos el mismo nombre para variable, función y clase. Por ejemplo:

var emp_name = "Mike Smith";
función emp ()
consola.log ("El nombre del empleado es Mike Smith");

empleado de clase
Constructor (EMP_NAME)

consola.log ("bienvenido" + emp_name);


exportar emp_name, emp, empleado;

Otra forma de exportar es la exportación predeterminada, es muy útil para exportar un solo elemento:

var emp_name = "Mike Smith";
Exportar EMP_NAME predeterminado;

Esto ayuda a importar la variable a cualquier otra clase con cualquier otro nombre.

Implementación de la importación en JavaScript

En JavaScript, la palabra clave "importar" se usa cada vez que importamos algo de un archivo. Tenemos que escribir el "importar" Palabra clave antes de todo lo que queramos importar de algún otro archivo.

La sintaxis a importar Una variable, función y clase es:

// Importar una variable
import emp_name de './Nombre del archivo'
// Importar una función
Importar emp de './Nombre del archivo'
// Importar una clase
importar empleado de './Nombre del archivo'

Creamos otro archivo con el nombre "Importar.JS "e importó todos los datos del archivo" Exportar.JS ":

import emp_name de "./exportar.JS "
consola.log (emp_name);
importar emp de "./exportar.JS "
emp ();
importar empleado de "./exportar.JS "
dejar a = nuevo empleado ("John");

Se importa una variable, función y una clase del archivo "./exportar":

La salida verificará que cada elemento presente en el "./exportar.El archivo JS "se importa al" Importar.Archivo JS ":

nombre es variable, Embem es una función, y Empleado es una clase creada en el exportar.js archivo:

import emp_name, emp, empleado de "./exportar.JS ";
consola.log (emp_name);
emp ();
dejar a = nuevo empleado ("John");

Ahora aquí, en el código anterior, importamos todos los elementos en una sola declaración:

Obtendremos la siguiente salida:

Ahora consideraremos otro ejemplo para comprender cómo importar un elemento predeterminado:

importar _name desde "./exportar.JS "
consola.log (_name);

Importamos un miembro predeterminado del archivo "Exportar.JS "con" _name ":

En el "exportar.JS " Archivo La variable se crea con el nombre "Emp_name":

Pero accedemos a la misma variable con "_nombre" en el "importar.JS " archivo y obtener la siguiente salida:

Obtenemos el mismo resultado, esto significa al importar cualquier por defecto elemento No es necesario usar el mismo nombre que en el primer archivo, en su lugar, también podemos usar ningún nombre diferente.

Conclusión

Importar y exportar son nuevas características introducidas en los módulos de JavaScript para mejorar la reutilización del código. JavaScript proporciona palabras clave de importación y exportación para utilizar el código de un archivo a otros archivos. En este artículo, determinamos cómo trabajar con las funciones de importación y exportación del módulo. Para comprender mejor el concepto, consideramos algunos ejemplos e implementamos en JavaScript.

Después de estudiar a fondo este artículo, alguien puede analizar eso mientras usa importar y exportar Características del módulo Tenemos que usar el mismo nombre para la variable, la función y la clase en ambos archivos (el archivo desde donde está exportando los datos y el archivo en el que está importando los datos). Mientras "por defecto" es un caso excepcional en el que no hay tal requisito, puede usar cualquier nombre de su elección mientras importa.