Moduli in JavaScript

Se diventa lungo, il codice ha bisogno di abbandonare la struttura monolitica, con un unico enorme elenco di istruzioni, e va organizzato in maniera modulare.

I moduli in JavaScript permettono di fare proprio questo: separare il codice complessivo in piccole parti riutilizzabili e indipendenti l’una dall’altra. I Modules generano una struttura più facile da comprendere e mantenere, anche grazie a gestori di pacchetti. 

Nel linguaggio JavaScript ci sono almeno due approcci, la proposta interna ES (ECMAScript) e la proposta esterna con librerie o framework (CommonJS, AMD-Asynchronous Module Definition…).

Le comunicazioni tra i moduli e il programma chiamante sono garantite dalle keyword export ed import.

Un semplice esempio può essere il seguente, composto da due azioni. Dichiariamo la funzione saluta, che non fa nulla ma restituisce la scritta “Salve!”; Quindi, la chiamiamo dalla console.

// script.js
function saluta() {
  return "Salve!";
}
console.log(saluta());

L’uscita, nella riga successiva della console, sarà ovviamente:

Salve!

Dividiamo, ora, le due azioni, assegnando ciascuna ad un modulo, numerati 1 e 2:

-modulo 1 ospita la funzione “saluta”;

-modulo 2 la stampa sulla console.

// modulo1.js
export function saluta() {
  return "Salve!!";
}

// modulo2.js
import { saluta } from "./module1.js";
console.log(saluta());

Sfortunatamente, non puoi mandare in esecuzione questi moduli con le due modalità di questa guida, ovvero il browser e VSC con Lite Server. È,infatti, necessario un ambiente più complesso. È comunque un esempio introduttivo di come rendere modulare il tuo codice.