Introduzione
Quando un progetto HTML cresce, collegare semplicemente un foglio CSS e uno script JavaScript può non essere sufficiente. Le applicazioni moderne sono spesso composte da più file, ciascuno con una responsabilità precisa: un file può gestire il menu, un altro la validazione dei moduli e un altro ancora le chiamate a un’API.
In questo tutorial vedremo come costruire una struttura HTML ordinata usando i moduli JavaScript ES. Con type="module" è possibile importare automaticamente altri file JavaScript tramite import, evitando di inserire numerosi tag <script> nella pagina. Questo approccio migliora la manutenzione e rende più chiara la relazione tra i diversi componenti.
L’esempio utilizzerà un foglio CSS esterno, un modulo principale e due moduli secondari. Il risultato sarà una piccola pagina con un pulsante che cambia tema e un messaggio aggiornato dinamicamente.
Codice completo
La struttura dei file può essere organizzata in questo modo:
progetto/
├── index.html
├── css/
│ └── principale.css
└── js/
├── app.js
├── tema.js
└── messaggi.jsIl file HTML collega il CSS esterno e un solo punto di ingresso JavaScript:
<!-- index.html -->
<link rel="stylesheet" href="css/principale.css">
<main class="contenitore">
<h1>Pannello di controllo</h1>
<p id="messaggio">Il tema attivo è chiaro.</p>
<button id="pulsante-tema" type="button">
Cambia tema
</button>
</main>
<script type="module" src="js/app.js"></script>Il foglio di stile definisce l’aspetto iniziale e una classe alternativa per il tema scuro:
/* css/principale.css */
:root {
font-family: Arial, sans-serif;
color: #222;
background-color: #f4f4f4;
}
.contenitore {
max-width: 600px;
margin: 3rem auto;
padding: 2rem;
background-color: #fff;
border-radius: 8px;
text-align: center;
}
.tema-scuro {
color: #f5f5f5;
background-color: #222;
}
.tema-scuro .contenitore {
background-color: #333;
}Il modulo principale importa le funzionalità necessarie e coordina l’avvio dell’applicazione:
// js/app.js
import { configuraCambioTema } from "./tema.js";
import { mostraMessaggio } from "./messaggi.js";
// Recupera gli elementi necessari dalla pagina.
const pulsanteTema = document.querySelector("#pulsante-tema");
const messaggio = document.querySelector("#messaggio");
// Mostra un messaggio iniziale.
mostraMessaggio(messaggio, "Il tema attivo è chiaro.");
// Collega il comportamento del pulsante.
configuraCambioTema(pulsanteTema, messaggio);Il modulo tema.js contiene soltanto la logica relativa al cambio di tema:
// js/tema.js
export function configuraCambioTema(pulsante, elementoMessaggio) {
pulsante.addEventListener("click", () => {
document.body.classList.toggle("tema-scuro");
const temaScuroAttivo =
document.body.classList.contains("tema-scuro");
const testo = temaScuroAttivo
? "Il tema attivo è scuro."
: "Il tema attivo è chiaro.";
elementoMessaggio.textContent = testo;
});
}Infine, messaggi.js espone una funzione riutilizzabile:
// js/messaggi.js
export function mostraMessaggio(elemento, testo) {
elemento.textContent = testo;
}Spiegazione
Il ruolo di type="module"
L’attributo type="module" comunica al browser che lo script deve essere trattato come un modulo ECMAScript. In questo contesto sono disponibili le istruzioni import ed export, che permettono di dividere il codice in file indipendenti.
Un modulo viene eseguito in modalità differita rispetto al parsing dell’HTML. In pratica, il browser può continuare a costruire il documento mentre scarica lo script. Per questo motivo non è normalmente necessario aggiungere anche defer a uno script che possiede già type="module".
Percorsi relativi e estensione dei file
Nei moduli ES è importante indicare l’estensione del file importato. Per esempio, è corretto scrivere import { mostraMessaggio } from "./messaggi.js";. Omettere .js può causare errori, soprattutto quando il codice viene eseguito direttamente dal browser.
Il prefisso ./ indica che il file si trova nella stessa cartella del modulo corrente. Per risalire di una cartella si usa invece ../.
Import ed export
La parola chiave export rende una funzione disponibile agli altri moduli. La parola chiave import permette di utilizzarla in un altro file. In questo modo ogni modulo può concentrarsi su un compito specifico, evitando un unico script lungo e difficile da mantenere.
Perché esiste un solo script nell’HTML?
L’HTML include soltanto app.js, chiamato anche entry point. È il punto di ingresso dell’applicazione e importa internamente le altre funzionalità. Questa scelta riduce il numero di riferimenti presenti nella pagina e rende più semplice modificare l’organizzazione dei file.
Best practice
- Usa nomi descrittivi: preferisci nomi come
validazione-form.jsogestione-menu.jsinvece di nomi generici comefunzioni.js. - Separa le responsabilità: inserisci la logica del tema in un modulo distinto dalla logica dei messaggi o delle chiamate di rete.
- Usa funzioni esportate: evita di inserire troppo codice eseguito automaticamente all’importazione. Le funzioni esplicite sono più facili da testare.
- Controlla gli elementi DOM: prima di aggiungere un listener, verifica che l’elemento esista, soprattutto se lo stesso modulo viene usato in più pagine.
- Servi il progetto tramite un server: i moduli possono essere bloccati se apri il file HTML direttamente con il protocollo
file://. Usa un server locale, per esempio quello integrato nell’editor o un semplice server HTTP. - Evita codice inline: mantieni comportamenti e stili nei rispettivi file esterni. Questo facilita la manutenzione e permette di applicare più facilmente una Content Security Policy.
- Prevedi un percorso compatibile: i browser moderni supportano i moduli ES, ma per applicazioni destinate a browser molto datati può essere necessario un sistema di compilazione.
- Usa import dinamici quando opportuno: funzionalità poco frequenti possono essere caricate solo quando servono con
import("./modulo.js"), riducendo il codice iniziale.
Riepilogo
Una struttura efficace per includere CSS e JavaScript esterni non dipende soltanto dal numero di file collegati, ma anche da come questi file sono organizzati. Il CSS può essere incluso con un normale elemento link, mentre il JavaScript può avere un unico punto di ingresso con type="module".
Grazie a import ed export, il codice viene suddiviso in moduli piccoli, leggibili e riutilizzabili. L’HTML rimane essenziale, le responsabilità sono separate e l’applicazione diventa più semplice da estendere.