MODULI JAVASCRIPT IN ES6
I moduli ES6 sono memorizzati in file come ad esempio lib.js
DEFINIZIONE
OBBIETTIVI DEI MODULI ES6
Quando parliamo di nascondere i dettagli implementativi ricordiamoci dell’esempio del lettore DVD. L’obbiettivi dei moduli sono:
- Astrarre il codice, quindi creare un API che ci consenta di lavorare in modo astratto
- Incapsulamento, ovvero racchiudere il codice in una capsula
- Creata la API pubblica è possibile riutilizzare il codice dentro la nostra applicazione e in altre applicazioni
PRIMO ESEMPIO ED ERRORE CORS
Per lavorare con i moduli dobbiamo utilizzare il protocollo http, se abbiamo la cartella su cui stiamo facendo i test index.html sulla scrivania e facciamo doppio click riceviamo un errore di CORS policy del browser. La CORS policy impedisce la comunicazione tra origini diverse, quindi dobbiamo utilizzare un web server. Alla fine del post viene spiegato come installare XAMPP su windows. Per chi invece utilizza come editor Visual Studio Code basterà installare l’estensione Live Server ed eseguire le pagine HTML con questo web server locale.
EXPORT MULTIPLI E IMPORT
Oltre alle funzioni possiamo esportare classi, oggetti e tipi primitivi come si vede dall’esempio di codice sopra riportato.
EXPORT DEFAULT
Un modulo può effettuare una singola esportazione contrassegnata come default. Tuttavia possiamo usare lakeyword export per esportare altri oggetti.
INSTALLARE XAMPP SU WINDOWS
In informatica un server web (o web server) è un’applicazione software che, in esecuzione su un server, è in grado di gestire le richieste di trasferimento di pagine web di un client, tipicamente un web browser. La comunicazione tra server e client avviene tramite il protocollo HTTP, che utilizza la porta TCP 80 (o 8080), o eventualmente la versione sicura HTTPS, che utilizza invece la 443. Su un server web risiedono dunque i siti web tramite hosting. L’insieme di tutti i web server interconnessi a livello mondiale dà vita al World Wide Web. (wikipedia)
Pacchetto XAMPP: disponibile per windows, Linux e Mac
Utenti windows
La soluzione più semplice per installare un web server è installare il pacchetto XAMPP
STEP 1: Scaricare e installare XAMPP
Per scaricare XAMPP cliccare al seguente link: https://www.apachefriends.org/it/download.html e selezionare per il download XAMPP per windows.
STEP 2: Eseguire l’installer seguendo i passaggi e facendo attenzione alla cartella di installazione di XAMPP (di default dovrebbe essere C:\xampp).
STEP 3: Eseguire XAMPP
Start -> XAMPP -> XAMPP Control Panel
STEP 4: Avviare il Modulo Apache
APPROFONDIMENTO AI
I moduli in JavaScript sono un concetto introdotto per facilitare l’organizzazione e la riusabilità del codice, soprattutto nelle applicazioni di grandi dimensioni. Con l’introduzione del modulo ECMAScript (ES6) nel 2015, JavaScript ha nativamente supportato l’importazione e l’esportazione di funzionalità tra file separati. Prima di ES6, bisognava fare affidamento su soluzioni come CommonJS o AMD (Asynchronous Module Definition).
Che cosa sono i moduli in JavaScript?
I moduli in JavaScript sono blocchi autonomi di codice che contengono variabili, funzioni, classi e altri costrutti. Consentono di isolare e riutilizzare codice in modo più efficiente. Con i moduli, è possibile:
•Includere solo ciò che è necessario: ogni modulo può esportare solo gli elementi che devono essere accessibili da altri file, nascondendo tutto il resto.
•Evitare collisioni di nomi: grazie agli spazi di nomi separati, i moduli impediscono che variabili o funzioni globali si sovrappongano tra loro.
•Avere un codice più pulito e manutenibile: facilitano la separazione delle responsabilità all’interno di un’applicazione.
Sintassi di base dei moduli JavaScript (ES6)
1. Esportare (export)
Per rendere parti di un modulo disponibili ad altri file, si utilizza l’istruzione export. Ci sono due modi principali per esportare elementi da un modulo: export nominato e export di default.
•Export nominato: Si esportano specifiche funzioni, oggetti, variabili o classi da un modulo.
// modulo.js
export const pi = 3.14159;
export function somma(a, b) {
return a + b;
}
export class Persona {
constructor(nome) {
this.nome = nome;
}
}
•Export di default: Un modulo può avere un’esportazione di default. È utile quando si vuole esportare una singola funzionalità principale da un file.
// modulo.js
export default function saluto() {
console.log(“Ciao!“);
}
2. Importare (import)
Per utilizzare il codice di un altro modulo, si utilizza l’istruzione import. Anche qui, si possono fare import nominati o import di default.
•Import nominato: Si importano elementi specifici utilizzando le parentesi graffe.
// main.js
import { pi, somma } from ‘./modulo.js‘;
console.log(pi); // 3.14159
console.log(somma(2, 3)); // 5
•Import di default: Si può importare il valore di default senza bisogno di parentesi graffe.
// main.js
import saluto from ‘./modulo.js‘;
saluto(); // Ciao!
È possibile combinare import nominati e di default:
import saluto, { pi, somma } from ‘./modulo.js‘;
3. Alias negli import e export
Per evitare conflitti di nome, è possibile utilizzare alias con l’operatore as:
•Alias nell’import:
import { somma as addizione } from ‘./modulo.js‘;
console.log(addizione(2, 3)); // 5
•Alias nell’export:
export { pi as piGreco };
4. Import dinamico
Con l’importazione dinamica, si può caricare un modulo solo quando è necessario, ritardando l’import fino al momento dell’esecuzione. Si utilizza la funzione import():
// main.js
import(‘./modulo.js‘)
.then((modulo) => {
console.log(modulo.somma(2, 3));
})
.catch((error) => {
console.error(‘Errore nell’importazione‘, error);
});
L’import dinamico è utile in contesti come il code splitting, dove si caricano solo i moduli necessari per ottimizzare le prestazioni.
Vantaggi dei Moduli in JavaScript
1. Migliore organizzazione del codice: Invece di avere tutto il codice in un unico file, è possibile modularizzare il codice in blocchi separati.
2. Manutenzione e scalabilità: I moduli permettono di lavorare in modo più agevole su progetti grandi o team di sviluppo, poiché ciascuno può gestire un modulo specifico.
3. Riutilizzo del codice: Si può esportare il codice da un modulo e riutilizzarlo in vari altri moduli o applicazioni.
4. Miglioramento delle prestazioni: Con la possibilità di caricare moduli dinamicamente, si possono ridurre i tempi di caricamento iniziale delle pagine web.
Tipologie di moduli
1. ES6 Modules (nativi): Questo è il sistema di moduli standard per JavaScript. Funziona con l’istruzione import/export e viene supportato nativamente dai moderni browser e da Node.js a partire dalle versioni più recenti.
2. CommonJS: Utilizzato principalmente in Node.js, i moduli CommonJS usano module.exports e require per importare ed esportare moduli. Ad esempio:
// modulo.js
module.exports = {
saluto: function() {
console.log(“Ciao!“);
}
};
// main.js
const modulo = require(‘./modulo.js‘);
modulo.saluto();
Supporto e compatibilità
I moduli ES6 sono supportati dalla maggior parte dei browser moderni e da Node.js. Tuttavia, è importante notare che non tutti i vecchi browser supportano i moduli nativamente. In questi casi, è possibile usare strumenti di transpiling come Babel per convertire il codice in una forma compatibile con i vecchi ambienti.
Inoltre, molte applicazioni moderne utilizzano bundler come Webpack o Rollup per gestire e ottimizzare l’uso dei moduli, rendendo l’integrazione con diversi tipi di moduli (ES6, CommonJS, etc.) più facile e compatibile.
Esempio di utilizzo di moduli in un progetto web
Nel contesto di una applicazione web moderna, i moduli JavaScript possono essere usati in questo modo:
1. File HTML:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Moduli in JavaScript</title>
</head>
<body>
<script type=”module” src=”main.js“></script>
</body>
</html>
2. File JavaScript (modulo.js):
// modulo.js
export function saluto() {
console.log(‘Ciao dal modulo!‘);
}
3. File JavaScript principale (main.js):
import { saluto } from ‘./modulo.js‘;
saluto(); // Output: Ciao dal modulo!
Conclusione
I moduli in JavaScript sono diventati una parte essenziale dello sviluppo moderno, permettendo una migliore struttura del codice e miglioramenti significativi in termini di mantenibilità, performance e riutilizzo del codice.
Scrivi un commento