Cosa è esattamente un modulo?
In Javascript, il termine “modules” si rifersice a piccole unità indipendenti, a codice riusabile. Sono alla base di tanti Design Patterns di Javascript e sono assolutamente necessari quando si costruisce qualsiasi applicazione sostanziale basata su JavaScript.
In parole povere, i moduli ti aiutano a scrivere codice in un modulo ed esporre solo alcune funzionalità (che siano variabili, funzioni, oggetti) a cui si dovrebbe accedere da altre parti del tuo codice.
JavaScript ha il concetto di modulo già da un bel pò di tempo. Tuttavia, erano integrati tramite librerie esterne e non incorporati nel linguaggio stesso. Il supporto integrato (built-in) dei moduli in Javascript arriva grazie ad ES2015 (ES6).
Per la cronaca, prima della release ES2015, c’erano almeno 3 moduli principali in competizione con gli standard:
- Asynchronous Module Definition (AMD)
- RequireJS Modules
- CommonJS Modules
Ora che abbiamo definito i moduli in Javascript (e come venivano gestiti), l’altra domanda a cui vogliamo rispondere è la seguente: cosa sono i moduli in ES6?
Con i moduli ES6, è possibile concatenare tutti gli script in uno script principale contrassegnandone alcuni come esportazioni, e di conseguenza altri moduli possono importarli.
Quindi per rendere disponibile al mondo esterno un oggetto, una funziona, una classe o una variabile ci basta esportarla e importare dove ne abbiamo bisogno.
Angular 2+ fa un uso “pesante” dei moduli ES6, quindi la sintassi sarà molto familiare a coloro che già lavorano in Angular.
Exporting
È possibile esportare membri uno per uno. Ciò che non viene esportato non sarà disponibile direttamente al di fuori del modulo:
export const myNumbers = [1, 2, 3, 4];
const animals = ['Dog', 'Cat']; // Not available directly outside the module
export function myLogger() {
console.log(myNumbers, animals);
}
export class Tech {
constructor() {
// ...
}
}
Oppure puoi esportare i membri desiderati in una singola istruzione alla fine del modulo:
export { myNumbers, myLogger, Tech };
Exporting con alias
È possibile anche assegnare un alias ai membri esportati con la parola chiave as:
export { myNumbers, myLogger as Logger, Tech as MyAwesomeModule }
Default export
È possibile definire un’esportazione predefinita con la parola chiave predefinita:
export const myNumbers = [1, 2, 3, 4];
const animals = ['Dog', 'Cat'];
export default function myLogger() {
console.log(myNumbers, pets);
}
export class Tech {
constructor() {
// ...
}
}
Importing
Anche l’importazione è davvero molto semplice, con la parola chiave import, i membri da importare tra parentesi graffe e quindi la posizione del modulo rispetto al file corrente:
import { myLogger, Tech } from 'app.js';
app.js è l’ipotetico file in cui abbiamo definito i moduli.
Importing con alias
È possibile assegnare un alias al momento dell’importazione:
import Tech as MyAwesomeModule from 'app.js';
Importing “Tutto”
È possibile importare tutto ciò che è importato da un modulo come in questo esempio:
import * as Utils from 'app.js';
Questo ci permette di accedere ai membri del modulo attraverso la notazione dot:
Utils.myLogger();
Importing di un modulo con un “default member”
È possibile importare il membro predefinito dandogli un nome a tua scelta. Nell’esempio seguente Logger è il nome assegnato al membro predefinito importato:
import Logger from 'app.js';
Ed ecco come importare i membri non predefiniti in concomitanza di quello predefinito:
import Logger, { Tech, myNumbers } from 'app.js';
Alcuni vantaggi dell’utilizzo dei moduli:
- Il codice può essere suddiviso in file più piccoli di funzionalità indipendenti.
- Più script possono essere concatenati aumentando così le prestazioni.
- Il debug diventa più facile.
- Qualsiasi codice che fa riferimento a un modulo comprende che si tratta di una dipendenza. Se il file del modulo viene modificato o spostato, il problema è immediatamente evidente.
- I moduli (di solito) aiutano a sradicare i conflitti di denominazione. Ad esempio la funzione sumAll() nel modulo1 non può interferire con la funzione sumAll() nel modulo2. Gli alias sono molto utili in questo caso infatti diventa module1.sumAll() e module2.sumAll().
- I moduli ES6 vengono sempre eseguiti in modalità strict, quindi non è necessario utilizzare ‘use strict’.
- I moduli ES6 ti aiutano a organizzare meglio il tuo codice
Considerazioni
I moduli ES6 sono una delle maggiori funzionalità introdotte nei browser moderni. I moderni framework JavaScript come Angular, Vue JS e React JS utilizzano questa funzionalità.
Dovresti anche sapere che i moduli ES6 non sono supportati in tutti i browser. Per le applicazioni di produzione, transpilers come Webpack e Babel vengono utilizzati per convertire il nostro codice da ES6 a ES5 per garantire la compatibilità tra browser.
Spero questo articolo sia stato utile. Se si, condividilo con i tuoi amici, colleghi o con chi ritieni che possa essere interessato.
PS. Se sei interessato a conoscere in anticipo gli argomenti per i prossimi appuntamenti, ti consiglio di visitare il primo articolo
Valerio Pisapia, 34 anni, laureato in Ingegneria Informatica all’Università di Napoli Federico II. Ha esperienza decennale nello sviluppo mobile e web in ambito internazionale. Fornisce training e mentoring per progetti di svariata natura. Founder della Dreaming Lab, startup IT in Svizzera, che si occupa di consulenza specializzata in ambito Web.
Comments