El atributo type="module" en la etiqueta <script> indica que el script debe ser tratado como un módulo de JavaScript, lo que trae consigo una serie de ventajas y funcionalidades.
type="module"?Cuando se incluye este atributo en una etiqueta <script>, se indica que el archivo de script es un módulo. Esto permite importar y exportar funcionalidades entre diferentes archivos JavaScript.
Para utilizar type="module", simplemente se debe agregar el atributo a la etiqueta <script>:
<script type="module" src="app.js"></script> Importación (import) y exportación (export) de módulos: Permite dividir el código en archivos más pequeños y reutilizables. Puedes importar y exportar funciones, objetos y variables entre diferentes archios JavaScript.
Carga diferida: Los módulos se cargan de forma asíncrona por defecto, lo que mejora el rendimiento de la carga de la página. Además, el navegador no bloqueará la carga de la página mientras se descargan los módulos.
Modo estricto por defecto: Los scripts de módulos se ejecutan en modo estricto, lo que ayuda a evitar errores comunes en JavaScript.
Ámbito de módulo: Las variables definidas en el módulo no contaminan el espacio de nombres global, lo que ayuda a evitar conflictos de nombres.
Para exportar funciones, objetos o variables desde un archivo, se utiliza la palabra clave export.
// archivo: utilidades.js
export const sumar = (a, b) => a + b;
export const restar = (a, b) => a - b;Para importar un módulo en otro archivo, se utiliza la palabra clave import.
// archivo: app.js
import { sumar, restar } from './utilidades.js';
console.log(sumar(5, 3)); // Imprime: 8
console.log(restar(5, 3)); // Imprime: 2 El uso de type="module" solo es compatible con navegadores modernos.
Los módulos tienen su propio ámbito de ejecución, lo que significa que las variables definidas en un módulo no son accesibles globalmente, a menos que se exporten.