Dichiarazioni di moduli, importazione ed esportazione in JavaScript | Spiegato con esempi

I moduli sono usati in JavaScript per implementare il concetto di modularità che è, nel suo centro, il processo di dividere una soluzione in componenti più piccoli, compatti e più significativi. In JavaScript, la modularità si ottiene utilizzando le parole chiave delle esportazioni e delle importazioni. Quando JavaScript viene utilizzato come script modulare con una pagina Web HTML, la parola chiave "modulo"Viene aggiunto come tipo di tag script

Perché usare i moduli

Evita di ripetere le parole. “Con il passare del tempo le applicazioni Web sono cambiate da programmi molto piccoli a programmi grandi e complessi per svolgere compiti complicati. Per realizzare applicazioni Web più grandi/complesse, ES6 JavaScript è arrivato con la capacità di dividere gli script in componenti più piccoli e gestibili con l'uso del Funzione di esportazione e il Funzione di importazione.

Impostazione di una pagina HTML

Vai nel tuo editor di testo preferito e crea una pagina HTML, basta mettere le seguenti righe di codice all'interno del tag del corpo:

I moduli JS hanno spiegato

Invece di manipolare gli elementi HTML su una pagina Web, visualizzeremo e verificheremo l'output utilizzando la console. Pertanto, non abbiamo bisogno di elementi fantasiosi sulla nostra pagina web HTML.

Esegui il file e vedrai il seguente output:

Impostazione dei file di script

Ora, mentre rimani nella stessa directory in cui si trova il tuo file HTML, crea due ".js"File come:

• Mainscript.JS: Questo file sarà collegato alla pagina Web HTML.
• CompScript.JS: Questo file conterrà alcune funzioni dei componenti.

Proprio come questo:

Ora, nel tuo html, collega il mainscript.JS usando il seguente comando:

Come puoi vedere, a differenza dei normali tag di script, non stiamo solo passando il collegamento di origine, ma anche il tipo che è impostato su "modulo", Per avvisare il browser che questo script è in forma modulare.

Aggiunta della funzione all'interno del file dei componenti

Ora, per visualizzare la modularità, creerai alcune variabili/funzioni nel file di script dei componenti "CompScript.js"Ed esportarli all'interno del Mainscript.js.

Dentro il CompScript.js Crea la seguente funzione che stampa 5 numeri:

funzione printnumbers (num)
per (let i = num; i <= num+5 ; i++)
console.log (i);

Il tuo file di script dei componenti sembrerà così:

Esportazione e importazione di funzionalità

Ora per accedere a questa funzione all'interno del Mainscript.js File È necessario esportare questa funzione da CompScript.file js. Puoi farlo mettendo l'esportazione di parole chiave dietro la funzione proprio così:

Ora, per usarlo all'interno del mainscript.JS, dobbiamo catturarlo esportare usando il importare funzione. Puoi farlo usando la seguente sintassi:

import function-name da "Scriptsoruce.js;

Nel nostro caso, questa linea si trasformerebbe in:

import printnumbers da "./CompScript.js ";

Ora, per utilizzare questa funzione nel nostro file di script principale, puoi semplicemente chiamare la funzione mentre chiamiamo qualsiasi altra funzione in JavaScript:

printnumbers (5);

IL Mainscript.js sembrerà così:

Salva il file e aggiorna l'HTML e vai alla console sviluppatore e vedrai il seguente output:

E se presta molta attenzione all'output all'interno della console, vedrai:

Anche se hai collegato solo il Mianscript.js Con la pagina HTML, il nostro componente è stato eseguito correttamente. Pertanto, puoi dire di aver implementato con successo il concetto di modularità componenziale.

Ma aspetta, c'è di più!

Immagina di esportare più funzioni come:

Funzione di esportazione printNumbers (num)
per (let i = num; i <= num + 5; i++)
console.log (i);


Funzione di esportazione NamePrinter ()
console.Log ("John Doe")

esportazione const age = 22;
Funzione di esportazione printJob ()
console.log ("revisore");

Scrivere la parola chiave esportare Con ogni elemento che si desidera esportare non è un buon approccio, quello che puoi fare è alla fine del file, scrivi un comando di riga, che esporterà le funzioni e le variabili che si desidera.

Lo fai scrivendo la seguente riga:

esporta printnumbers, namepter, età, printjob;

Tuo CompScript.js sembrerà così:

Allo stesso modo, per importare tutte le funzioni e le variabili con la parola chiave di esportazione da un file, è possibile utilizzare il simbolo asterisco "*" come mostrato di seguito:

Importa * come comp da "./CompScript.js ";

IL simbolo asterisco " *" significa che si desidera importare tutte le esportazioni del file sotto il nome "comp",

Per utilizzare la funzione e le variabili che abbiamo appena importato, usa il Operatore DOT Insieme al nome della funzione/variabile:

comp.Nameprinter ();

Se dovessi utilizzare tutte le esportazioni da CompScript.js file, quindi utilizzerai il seguente codice:

Importa * come comp da "./CompScript.js ";
comp.Nameprinter ();
console.log ("L'età è:" + comp.età);
comp.printJob ();
comp.printnumbers (2);

Allora il tuo Mainscript.js sembrerà così:

Salva i file e aggiorna la pagina web e vedrai l'output all'interno della console come

Come puoi vedere, abbiamo utilizzato con successo ogni esportazione da CompScript.js dentro il nostro Mainscript.js file.

Conclusione

I moduli ci aiutano a dividere le nostre applicazioni Web in parti più piccole, concise e gestibili; La modularità in JavaScript si ottiene dividendo lo script in vari componenti e usando il importare E esportare caratteristiche Opzione introdotta in ES6. Per dimostrarlo, abbiamo configurato una pagina HTML di base, creato due diversi file di script e abbiamo dato alcune funzionalità all'interno del file dei componenti. Successivamente, li abbiamo usati all'interno del nostro file di script principale. Abbiamo anche imparato diversi modi per esportare più funzionalità e importare tutte le funzionalità contemporaneamente.