Hoy en día, JavaScript juega un papel muy importante en el desarrollo de sitios web. Los desarrolladores front-end usan JavaScript para crear aplicaciones web interactivas. Como resultado, ha habido un aumento en la demanda de desarrolladores de JavaScript.
Ciertamente, JavaScript ha evolucionado a lo largo de los años. ES6 introdujo muchas características nuevas en el lenguaje. Una de ellas es una forma de compartir fácilmente códigos entre archivos JavaScript.
La importación y exportación de funciones para JavaScript son nuevas funciones que lo convertirán en un mejor desarrollador. Así es como funcionan estas funciones.
¿Qué es un módulo JavaScript?
Un módulo JavaScript es un archivo JavaScript que contiene una colección de código para su uso. Los módulos generalmente se escriben en archivos separados y se importan usando el importar palabra clave. Ahorra tiempo y esfuerzo porque puede reutilizarlo más tarde.
Por ejemplo, si tienes una función llamada calcularSuma(), puede incluirlo en otro archivo y hacerlo disponible en cualquier parte de su proyecto usando el
exportar y importar JavaScript funciona sin ningún problema.Uno de los beneficios de usar módulos es que ayuda a mantener el código organizado. También hace que su código sea más manejable y fácil de depurar.
Para utilizar un archivo JavaScript como módulo, debe crear un script en su documento HTML con un tipo = "módulo".
<tipo de guión ="módulo" origen="nombreDeArchivo.js"></script>
Hay dos tipos de módulos:
- Módulos ECMAScript: módulos JavaScript estándar y son compatibles con todos los principales navegadores.
- Módulos CommonJS: son más antiguos y no son ampliamente compatibles.
Nos centraremos en los módulos ECMAScript aquí. Si es necesario, consulte nuestro introducción a JavaScript para repasar lo básico.
Cómo exportar funciones en JavaScript
En JavaScript, las funciones son objetos de primera clase que se pueden pasar como argumentos además de usarse por sí solos. Exportar funciones es una buena forma de transferirlas a otros programas. También se usa cuando desea crear bibliotecas reutilizables.
La exportación de funciones en JavaScript se realiza mediante el exportar función. El exportar función exporta una función dada para ser utilizada por otro archivo o secuencia de comandos. Exportando nuestras propias funciones, podemos usarlos libremente en otros archivos o scripts sin preocuparnos por problemas de licencia.
Hay dos formas de usar el exportar funcionar eficientemente. Repasaremos esto con ejemplos de código.
Supongamos que tiene un archivo obtenerDetallesPersonales.js que tiene una función que devuelve el nombre completo de un usuario después de una entrada de solicitud. La función se ve así:
funciónobtenerNombreCompleto(nombre completo){
nombre completo = indicador ('Cuál es tu primer nombre');
consola.log (nombre completo);
}
- Puede exportar esta función simplemente usando el exportar palabra clave seguida del nombre de la función entre llaves. Se parece a esto:
exportar {getFullName}; - El segundo método es agregar el exportar palabra clave justo antes de declarar la función.
exportarfunciónobtenerNombreCompleto (nombre completo){...}
Puede exportar varias funciones utilizando el primer método. Esto se hace incluyendo los nombres de las funciones deseadas en la llave. Las funciones están separadas por comas.
Por ejemplo: Suponga que tiene tres funciones en nuestro obtenerDetallesPersonales.js archivo - getNombreCompleto(),obtener correo electrónico (), getDob(). Puede exportar las funciones agregando la siguiente línea de código:
exportar {getFullName, getEmail, getDob};
Cómo importar funciones en JavaScript
Para utilizar un módulo, primero debe importarlo. Cualquier función se puede importar utilizando una referencia de ruta completa.
La importación de funciones es bastante sencilla. JavaScript tiene una función integrada para importar sus propias funciones desde otros archivos. Si desea acceder a esas funciones desde otros módulos, es una buena idea incluir una declaración de función para cada una de sus utilidades.
Una función a importar ya está exportada en su archivo original.
Puede importar funciones desde un archivo diferente usando el importar funcionalidad de palabras clave. Importar le permite elegir qué parte de un archivo o módulo cargar.
Así es como importas nuestro obtenerNombreCompleto función de obtenerDetallesPersonales.js:
importar {getFullName} de './getPersonalDetails.js'Esto hará que esta función esté disponible para su uso en nuestro archivo actual.
Para importar varias funciones, las funciones que se van a importar se incluyen entre llaves. Cada uno está separado por una coma (,).
importar {getFullName, getEmail, getDob} de './getPersonalDetails.js'Hay otra forma de usar el importar funcionalidad. Esto nos permite importar todas las exportaciones en un archivo en particular. Se hace usando el importar * como sintaxis.
Puedes importar todas las exportaciones en nuestro obtenerDetallesPersonales.js agregando la siguiente línea de código:
importar * como PersonalDetailsModule de './getPersonalDetails.js'Lo anterior creará un objeto llamado módulo de detalles personales.
Este es solo un nombre de variable, puede nombrarlo cualquier cosa.
Este objeto contiene todas las exportaciones en nuestro getPersonalDetails.js. Las funciones se almacenan en este objeto y se puede acceder a ellas de la misma forma que se accede a cualquier propiedad del objeto.
Por ejemplo, podemos acceder a la obtenerNombreCompleto función agregando la siguiente línea de código
PersonalDetailsModule.getFullName();¿Qué es el valor predeterminado de exportación?
Exportar por defecto es una funcionalidad de exportación excepcional. Esto se usa si solo se exporta una variable de un archivo. También se utiliza para crear un valor alternativo para un archivo o módulo.
A continuación se muestra un ejemplo en el que utilizamos el obtenerNombreCompleto funcionan por defecto:
exportarpor defectofunciónobtenerNombreCompleto (nombre completo){...}No puede tener más de un valor por defecto en cada módulo o archivo.
Una función utilizada por defecto se importa de forma diferente. Aquí se explica cómo importar nuestro obtenerNombreCompleto función utilizada por defecto:
importar nombre completo de './getPersonalDetails.js'Aquí están las diferencias:
- No hay llaves alrededor del valor importado, nombre completo.
- nombre completo Aquí hay solo un nombre de variable. Almacena el valor de cualquiera que sea la función predeterminada.
Potencie sus funciones de JavaScript
Los módulos de JavaScript son fragmentos de código que se pueden reutilizar en otras partes de su código mediante las funciones de importación y exportación de JavaScript. Por lo general, se escriben en archivos separados y se importan con la palabra clave de importación. Uno de los beneficios de usar módulos es que ayuda a mantener el código organizado. También hace que su código sea más manejable y fácil de depurar.
