Moduli JavaScript

Moduli (Modules)

I moduli JavaScript ti permettono di decomporre il codice in file singoli.

Questo rende più facile la manutenzione della libreria di codice.

Il modulo è utilizzato import dalla dichiarazione import da file esterni.

Il modulo dipende anche da type="module".

Esempio

<script type="module">
import message from "./message.js";
</script>

Prova a fare tu stesso

esportazione

confunzioneovariabileIl modulo può essere memorizzato in qualsiasi file esterno.

Ci sono due tipi di esportazione:Esportazione nominataeEsportazione predefinita.

Esportazione nominata (Named Exports)

Creiamo un file chiamato person.js e riempiamolo con il contenuto che vogliamo esportare.

Puoi creare esportazioni nominate in due modi. Uno è crearele in modo inline per ciascuna, l'altro è crearle tutte insieme alla fine del file.

Creazione inline per ciascuno:

person.js

export const name = "Bill";
export const age = 19;

Creazione in una volta sola alla fine del file:

person.js

const name = "Bill";
const age = 19;
export {name, age};

Esportazione predefinita (Default Exports)

Creiamo un altro file chiamato message.js e mostriamo l'export default con esso.

In un file può esserci solo un default export.

Esempio

message.js

const message = () => {
const name = "Bill";
const age = 19;
return name + ' è ' + age + ' anni.';
};
export default message;

Importazione

Puoi importare moduli in un file in due modi, a seconda che siano named export o default export.

Il named export è costruito utilizzando parentesi graffe. Il default export no.

Importazione dal named export

Importazione da file person.js del named export:

import { name, age } from "./person.js";

Prova a fare tu stesso

Importazione dal default export

Importazione da file message.js del default export:

import message from "./message.js";

Prova a fare tu stesso

Attenzione

I moduli sono validi solo per il protocollo HTTP(s).

Le pagine aperte tramite il protocollo file:// non possono utilizzare importazione/esportazione.