Il concetto di moduli deriva dal paradigma della programmazione modulare. Questo paradigma propone che il software dovrebbe essere composto da componenti separati e intercambiabili chiamati "moduli" suddividendo le funzioni del programma in file autonomi che possono funzionare separatamente o accoppiati in un file applicazione.
Un modulo è un file autonomo che incapsula il codice per implementare determinate funzionalità e promuovere la riusabilità e l'organizzazione.
Qui tratterai i sistemi di moduli utilizzati nelle applicazioni JavaScript, incluso il modello di modulo, il sistema di moduli CommonJS utilizzato nella maggior parte delle applicazioni Node.js e il sistema di moduli ES6.
Il modello del modulo
Prima dell'introduzione dei moduli JavaScript nativi, il modello di progettazione del modulo veniva utilizzato come sistema di moduli per definire l'ambito di variabili e funzioni in un singolo file.
Questo è stato implementato utilizzando espressioni di funzione richiamate immediatamente, popolarmente note come IIFE. Un IIFE è una funzione non riutilizzabile che viene eseguita non appena viene creata.
Ecco la struttura di base di un IIFE:
(funzione () {
//codice qui
})();(() => {
//codice qui
})();
(asincrono () => {
//codice qui
})();
Il blocco di codice sopra descrive gli IIFE utilizzati in tre diversi contesti.
Gli IIFE sono stati utilizzati perché le variabili dichiarate all'interno di una funzione sono limitate alla funzione, rendendole uniche accessibile all'interno della funzione, e perché le funzioni consentono di restituire dati (rendendoli public accessibile).
Per esempio:
cost pippo = (funzione () {
cost sayName = (nome) => {
consolare.tronco d'albero(`Ehi, il mio nome è ${nome}`);
};
//Esporre le variabili
ritorno {
callSayName: (nome) => direNome (nome),
};
})();
//Accesso ai metodi esposti
foo.callSayName("Sbarra");
Il blocco di codice sopra è un esempio di come i moduli sono stati creati prima dell'introduzione dei moduli JavaScript nativi.
Il blocco di codice sopra contiene un IIFE. L'IIFE contiene una funzione che rende accessibile restituendola. Tutte le variabili dichiarate nell'IIFE sono protette dall'ambito globale. Pertanto, il metodo (direNome) è accessibile solo attraverso la funzione pubblica, chiamaSayName.
Si noti che l'IIFE viene salvato in una variabile, pippo. Questo perché, senza una variabile che punta alla sua posizione in memoria, le variabili saranno inaccessibili dopo l'esecuzione dello script. Questo modello è possibile a causa di Chiusure JavaScript.
Il sistema di moduli CommonJS
Il sistema di moduli CommonJS è un formato di modulo definito dal gruppo CommonJS per risolvere i problemi di ambito JavaScript eseguendo ogni modulo nel relativo spazio dei nomi.
Il sistema di moduli CommonJS funziona forzando i moduli a esportare esplicitamente le variabili che desiderano esporre ad altri moduli.
Questo sistema di moduli è stato creato per JavaScript lato server (Node.js) e, come tale, non è supportato per impostazione predefinita nei browser.
Per implementare i moduli CommonJS nel tuo progetto, devi prima inizializzare NPM nella tua applicazione eseguendo:
npm init -y
Le variabili esportate seguendo il sistema di moduli CommonJS possono essere importate in questo modo:
//randomModule.js
//pacchetto installato
cost importazione installata = richiedere("nome del pacchetto");
//modulo locale
cost importazione locale = richiedere("/path-to-module");
I moduli vengono importati in CommonJS utilizzando il file richiedere istruzione, che legge un file JavaScript, esegue il file letto e restituisce l'estensione esportazioni oggetto. IL esportazioni object contiene tutte le esportazioni disponibili nel modulo.
È possibile esportare una variabile seguendo il sistema di moduli CommonJS utilizzando le esportazioni denominate o le esportazioni predefinite.
Esportazioni denominate
Le esportazioni denominate sono esportazioni identificate dai nomi a cui sono state assegnate. Le esportazioni con nome consentono più esportazioni per modulo, a differenza delle esportazioni predefinite.
Per esempio:
//main.js
exports.myExport = funzione () {
consolare.log("Questo è un esempio Di un nominato esportare");
};
exports.anotherExport = funzione () {
consolare.log("Questo è un altro esempio Di un nominato esportare");
};
Nel blocco di codice sopra, stai esportando due funzioni denominate (myExport E anotherExport) allegandoli al file esportazioni oggetto.
Allo stesso modo, puoi esportare le funzioni in questo modo:
cost miaEsporta = funzione () {
consolare.log("Questo è un esempio Di un nominato esportare");
};
cost un'altra esportazione = funzione () {
consolare.log("Questo è un altro esempio Di un nominato esportare");
};
modulo.esportazioni = {
miaesportazione,
un'altra esportazione,
};
Nel blocco di codice sopra, imposti il file esportazioni oggetto alle funzioni denominate. Puoi solo assegnare il file esportazioni oggetto a un nuovo oggetto attraverso il modulo oggetto.
Il tuo codice genererebbe un errore se provassi a farlo in questo modo:
//Senso vietato
esportazioni = {
miaesportazione,
un'altra esportazione,
};
Esistono due modi per importare le esportazioni denominate:
1. Importa tutte le esportazioni come un singolo oggetto e accedi ad esse separatamente utilizzando la notazione punto.
Per esempio:
//otherModule.js
cost pippo = richiedere("./principale");
pippo.myExport();
pippo.un'altra esportazione();2. Destrutturare le esportazioni dal esportazioni oggetto.
Per esempio:
//otherModule.js
cost { myExport, anotherExport } = richiedere("./principale");
miaEsporta();
un'altraEsporta();
Una cosa è comune a tutti i metodi di importazione, devono essere importati utilizzando gli stessi nomi con cui sono stati esportati.
Esportazioni predefinite
Un'esportazione predefinita è un'esportazione identificata da qualsiasi nome di tua scelta. Puoi avere solo un'esportazione predefinita per modulo.
Per esempio:
//main.js
classePippo{
sbarra() {
consolare.log("Questo è un esempio Di UN predefinitoesportare");
}
}
modulo.esportazioni = Pippo;
Nel blocco di codice sopra, stai esportando una classe (Pippo) riassegnando il esportazioni opporsi ad essa.
L'importazione di esportazioni predefinite è simile all'importazione di esportazioni con nome, tranne per il fatto che puoi utilizzare qualsiasi nome di tua scelta per importarle.
Per esempio:
//otherModule.js
cost Barra = richiedere("./principale");
cost oggetto = nuovo Sbarra();
oggetto.sbarra();
Nel blocco di codice sopra, è stata nominata l'esportazione predefinita Sbarra, anche se puoi utilizzare qualsiasi nome di tua scelta.
Il sistema di moduli ES6
Il sistema di moduli ECMAScript Harmony, popolarmente noto come moduli ES6, è il sistema di moduli JavaScript ufficiale.
I moduli ES6 sono supportati da browser e server, anche se è necessaria un po' di configurazione prima di utilizzarli.
Nei browser, devi specificare il file tipo COME modulo nel tag di importazione dello script.
Così:
//index.html
<script src="./app.js" tipo="modulo"></script>
In Node.js, devi impostare tipo A modulo nel tuo pacchetto.json file.
Così:
//package.json
"tipo":"modulo"
È inoltre possibile esportare le variabili utilizzando il sistema di moduli ES6 utilizzando le esportazioni denominate o le esportazioni predefinite.
Esportazioni denominate
Analogamente alle importazioni con nome nei moduli CommonJS, sono identificate dai nomi che sono stati loro assegnati e consentono esportazioni multiple per modulo.
Per esempio:
//main.js
esportarecost miaEsporta = funzione () {
consolare.log("Questo è un esempio Di un nominato esportare");
};
esportarecost un'altra esportazione = funzione () {
consolare.log("Questo è un altro esempio Di un nominato esportare");
};
Nel sistema di moduli ES6, le esportazioni denominate vengono esportate anteponendo alla variabile il prefisso esportare parola chiave.
Le esportazioni denominate possono essere importate in un altro modulo in ES6 allo stesso modo di CommonJS:
- Destrutturazione delle esportazioni richieste dal esportazioni oggetto.
- Importare tutte le esportazioni come un singolo oggetto e accedervi separatamente utilizzando la notazione punto.
Ecco un esempio di destrutturazione:
//otherModule.js
importare { miaesportazione, un'altra esportazione } da "./principale.js";
miaesportazione()
un'altra esportazione()
Ecco un esempio di importazione dell'intero oggetto:
importare * COME pippo da './principale.js'
pippo.myExport()
pippo.un'altra esportazione()
Nel blocco di codice sopra, l'asterisco (*) significa "tutto". IL COME parola chiave assegna il esportazioni oggetto alla stringa che lo segue, in questo caso, pippo.
Esportazioni predefinite
Analogamente alle esportazioni predefinite in CommonJS, sono identificate da qualsiasi nome a tua scelta e puoi avere solo un'esportazione predefinita per modulo.
Per esempio:
//main.js
classePippo{
sbarra() {
consolare.log("Questo è un esempio Di UN predefinitoesportare");
}
}
esportarepredefinito Pippo;
Le esportazioni predefinite vengono create aggiungendo il file predefinito parola chiave dopo il esportare parola chiave, seguita dal nome dell'esportazione.
L'importazione di esportazioni predefinite è simile all'importazione di esportazioni con nome, tranne per il fatto che puoi utilizzare qualsiasi nome di tua scelta per importarle.
Per esempio:
//otherModule.js
importare Sbarra da "./principale.js";
Esportazioni miste
Lo standard del modulo ES6 consente di avere sia esportazioni predefinite che esportazioni denominate in un modulo, a differenza di CommonJS.
Per esempio:
//main.js
esportarecost miaEsporta = funzione () {
consolare.log("Questo è un altro esempio Di un nominato esportare");
};
classePippo{
sbarra() {
consolare.log("Questo è un esempio Di UN predefinitoesportare");
}
}
esportarepredefinito Pippo;
Importanza dei moduli
Dividere il codice in moduli non solo li rende più facili da leggere, ma lo rende più riutilizzabile e anche gestibile. I moduli in JavaScript rendono anche il tuo codice meno soggetto a errori, poiché tutti i moduli vengono eseguiti in modalità rigorosa per impostazione predefinita.