La mayoría de las veces, usamos la importación estática para incluir todas las exportaciones en nuestro script al principio. La importación ocurre cada vez que se usa el script, ya sea que se use el módulo o no. Por lo tanto, si alguien quiere importar condicionalmente ciertas partes de un módulo cuando sea necesario, la importación estática no sería de ayuda.
Por lo tanto, dado un código JavaScript, necesitamos encontrar una solución para cargar otros módulos JavaScript solo cuando se requiera dinámicamente.
Acercarse:
- ES6 nos proporciona una construcción import() , que brinda la posibilidad de importar un módulo a pedido.
- import() devuelve una promesa de proporcionar un objeto de módulo del módulo solicitado.
- Podemos utilizar el objeto de módulo para usar las diversas importaciones.
Sintaxis:
import("#ModuleSource").then((module)=>{
//use module object to access any of the imports.
})
Ejemplo: digamos que queremos ejecutar un script para realizar alguna operación en una string según el botón en el que se hizo clic.
string inversa.mjs:
// reverseString.mjs
// module to reverse a given string
export function reverseString(str){
return str.split('').reverse().join('');
}
esPalindromo.mjs:
// isPalindrome.mjs
// module to check whether string is palindrome or not
export function isPalindrome(str){
return (str===str.split('').reverse().join(''))
}
índice.html:
<!-- index.html:- contains frontend scripts -->
<!DOCTYPE html>
<html>
<head>
<title>String operations</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<input type="text"
id="myString">
<button id="reverse"
style="padding: 0.5em 0.5em;">
Reverse the String !!
</button>
<button id="palindrome"
style="padding: 0.5em 0.5em;">
Check whether palindrome !!
</button>
<div id="answer"
style="color: green;
font-size: 2em;
padding: 1em;">
</div>
<!-- Script to perform one of the operations. -->
<script type="text/javascript">
var reverseButton = document.getElementById("reverse");
var palindromeButton = document.getElementById("palindrome");
//module containing the logic to reverse a string.
var module1 = '/reverseString.mjs';
//module containing the logic to check
//whether the string is palindrome or not.
var module2 = '/isPalindrome.mjs';
reverseButton.addEventListener("click", () => {
//consuming the value of input
var str = document.getElementById("myString").value;
import (module1).then(module => {
document.getElementById("answer").innerHTML =
module.reverseString(str);
});
});
palindromeButton.addEventListener("click", () => {
//consuming the value of input
var str = document.getElementById("myString").value;
import (module2).then(module => {
if (module.isPalindrome(str)) {
document.getElementById("answer").innerHTML =
"The string is a palindrome";
} else {
document.getElementById("answer").innerHTML =
"The string is not a palindrome";
}
});
});
</script>
</body>
</html>
Producción:
Visualización inicial cuando se carga la página.
Después de hacer clic en el botón «Invertir la string».
Después de hacer clic en «¡¡Comprobar si palíndromo!!» botón.
Nota:
- Los módulos también se pueden cargar dinámicamente dentro de scripts regulares.
- Es necesario configurar un servidor local para evitar problemas de origen entre sitios al usar módulos ES6.
¿Cuándo usar qué?
Las importaciones dinámicas son útiles cuando hay algún módulo que rara vez se requiere en el script. Esto mejora el rendimiento en el tiempo de carga inicial. Pero si alguna exportación se usa con frecuencia dentro de una secuencia de comandos, puede causar cierto retraso durante la ejecución.
Publicación traducida automáticamente
Artículo escrito por SauravVirmani y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA