MÓDULOS DE JAVASCRIPT: CÓMO FUNCIONAN Y CÓMO UTILIZARLOS

Los módulos en javascript son una forma de organizar y reutilizar código dividiéndolo en archivos independientes que pueden exportar e importar funcionalidades (funciones, variables, objetos, etc.) entre sí. Son una característica fundamental para aplicaciones modernas y escalables. A continuación, te explico de manera clara y concisa: ¿Qué son los módulos en JavaScript?Un módulo es un archivo javascript que encapsula código y expone solo las partes que desea compartir mediante export, mientras que otros archivos pueden importar esas partes con import. Esto promueve:

Reutilización: Código compartido entre proyectos o partes de una aplicación.
Encapsulación: Las variables y funciones de un módulo no contaminan el ámbito global.
Mantenibilidad: Código organizado en archivos más pequeños y específicos.

Ventajas de los módulos

Organización: Divide el código en archivos lógicos.
Reutilización: Comparte código entre proyectos.
Menos errores: Evita conflictos de nombres y efectos secundarios globales.
Carga eficiente: Soporte para carga diferida (defer) y dinámica (import()).

En resumen, los módulos en JavaScript (especialmente los módulos ES) son la forma estándar de estructurar aplicaciones modernas, permitiendo un código más limpio, modular y escalable.

Tipos de módulos

Módulo Javascript cuya extensión es ".js" y permite exportar/importar contenido JS. Es el módulo por defecto.
```
<script type="module">
  import { getRandomNumber } from "./getRandomNumber.js";
</script>
```

Módulo JSON script cuya extensión es ".json" y permite exportar/importar contenido JSON.

<script type="module">
   import stickers from "./stickers.json" with { type: "json" };
</script>

Módulo CSS script cuya extensión es ".css" y permite exportar/importar contenido CSS.

<script type="module">
   import styles from "./styles.css" with { type: "css" };
</script>

Módulo HTML script cuya extensión es ".html" y permite exportar/importar contenido HTML.
```
<script type="module">
  import { container } from "./container.html" with { type: "html" };
</script>
```
Esta característica es sólo una propuesta y no está soportada en navegadores aún. La idea es que se puedan importar fragmentos del DOM, según sus ids o clases y utilizarlas como cuando las creamos con el createElement() o las localizamos con el querySelector().

El atributo nomodule

Este atributo le indica a navegadores modernos que soportan el atributo "type=module", que no deben descargar ni ejecutar ese script. Por otro lado, los navegadores antiguos que no soportan módulos, no conocerán ese atributo, por lo que lo tratarán como un script normal y lo ejecutarán.

<script type="module">
  import { getRandomNumber } from "./getRandomNumber.js";
</script>

<script nomodule>
  /* Código orientado a navegadores antiguos */
  function getRandomNumber() {
    var number = Math.ceil(Math.random() * 6);
    return number;
  }
<script>

La finalidad de este atributo es poder crear scripts a modo de fallback para realizar tareas equivalentes en navegadores antiguos y dar soporte a otros sistemas menos modernos. Esto es lo que se conoce como el patrón module/nomodule.