Moduli in JavaScript

Questo articolo spiega i moduli in JavaScript.

YouTube Video

Moduli in JavaScript

I moduli in JavaScript sono un modo per organizzare il codice e suddividerlo in componenti riutilizzabili. Utilizzando i moduli, la leggibilità e la manutenzione del codice migliorano, e la stessa funzionalità può essere riutilizzata in altri progetti. Qui spieghiamo vari sistemi di moduli, dal concetto di modulo a esempi specifici di utilizzo.

Il concetto di moduli JavaScript

JavaScript non aveva originariamente un sistema modulare. Tuttavia, con la crescita delle applicazioni, la modularizzazione è diventata importante per dividere il codice in unità più piccole da riutilizzare. Un modulo è un blocco di codice con una funzione specifica che può essere gestito indipendentemente da altro codice, consentendo di suddividerlo in più file.

Tipi principali di moduli

Ci sono diversi sistemi di moduli in JavaScript. I più comuni sono i moduli ES (ESM) e CommonJS.

• ES Modules è un sistema di moduli introdotto in ECMAScript 2015 (ES6), che definisce i moduli utilizzando le parole chiave import ed export. Questo sistema è ampiamente utilizzato sia lato client (browser) che lato server (Node.js).

• CommonJS è un sistema di moduli utilizzato principalmente in Node.js. I moduli vengono definiti utilizzando require e module.exports per importare ed esportare file.

Dettagli sui moduli ES (ESM)

I moduli ES sono il sistema modulare standard in JavaScript, che consente uno scambio facile di funzionalità tra moduli. Nei browser e in Node.js, questo sistema viene utilizzato per definire e importare moduli.

export e import

export è una parola chiave per esporre le funzionalità di un modulo all'esterno. import viene utilizzato per incorporare funzionalità definite in altri moduli.

Esempio: Esportazione di un modulo

I moduli possono essere esportati in ES Modules come segue.

1// math.mjs
2export function add(a, b) {
3    return a + b;
4}
5export function subtract(a, b) {
6    return a - b;
7}

In questo modulo math.mjs, vengono esportate le funzioni add e subtract. Queste funzioni possono essere importate da altri moduli.

Qui, .mjs è un'estensione di file che indica esplicitamente un file JavaScript in formato ES Modules. In Node.js, l'estensione del file determina se si tratta di CommonJS o ES Modules. Tuttavia, se type: "module" è specificato in package.json, i file con estensione .js sono trattati come ES Modules di default.

Esempio: Importazione di Moduli

I moduli possono essere importati in ES Modules come segue.

1// main.mjs
2import { add, subtract } from './math.mjs';
3
4console.log(add(3, 5)); // 8
5console.log(subtract(10, 7)); // 3

In questo modo, utilizzando import, puoi facilmente utilizzare le funzioni definite in altri file.

Esportazione di Default ed Esportazione Nominale

Esistono due metodi di esportazione per i moduli. Uno è esportazione nominale, l'altro è esportazione di default.

• Le esportazioni nominali sono utilizzate per esportare più funzioni o variabili da un modulo. Puoi effettuare più esportazioni e, al momento dell'importazione, riceverle con nomi specificati.

1// utils.mjs
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

1// main.mjs
2import { sum, multiply } from './utils.mjs';
3
4console.log(sum(4, 6));       // 10
5console.log(multiply(3, 5));  // 15

• L'esportazione di default viene utilizzata per esportare una singola funzione o classe da un modulo. Durante l'importazione, può essere ricevuta con qualsiasi nome.

1// greet.mjs
2export default function greet() {
3    return "Hello, World!";
4}

1// main.mjs
2import greet from './greet.mjs';
3
4console.log(greet()); // "Hello, World!"

È possibile effettuare una sola esportazione di default, ma le esportazioni nominali possono esportare più elementi contemporaneamente.

Esempio di utilizzo lato client (browser).

Esempio: Esportazione di un modulo

I moduli possono essere esportati in ES Modules come segue.

1// utils.js
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

In questo modulo utils.js, vengono esportate le funzioni sum e multiply.

Esempio: Importazione di Moduli

I moduli possono essere importati dal lato client come segue.

 1<!DOCTYPE html>
 2<html lang="ja">
 3<head>
 4  <meta charset="UTF-8">
 5  <title>ES Modules Sample in HTML</title>
 6</head>
 7<body>
 8  <h1>ES Modules Sample</h1>
 9  <div id="result"></div>
10
11  <script type="module">
12    import { sum, multiply } from './utils.js';
13
14    const result = `
15      <p>sum(3, 5) = ${sum(3, 5)}</p>
16      <p>multiply(10, 7) = ${multiply(10, 7)}</p>
17    `;
18
19    document.getElementById('result').innerHTML = result;
20    console.log(sum(3, 5));      // 8
21    console.log(multiply(10, 7)); // 70
22  </script>
23</body>
24</html>

• Impostando l'attributo type del tag <script> su module, si può utilizzare la sintassi ES module come import ed export all'interno di HTML.
• L'istruzione import carica l'esterno utils.js e visualizza il risultato.

Dettagli di CommonJS

CommonJS è un sistema di moduli utilizzato principalmente in Node.js. I moduli vengono esportati e importati utilizzando module.exports e require.

require e module.exports

In CommonJS, module.exports viene utilizzato per esportare i moduli. Inoltre, require viene utilizzato per utilizzare moduli da altri file.

Esempio: Esportazione di un modulo

I moduli possono essere esportati in CommonJS come segue.

1// math.js
2module.exports = {
3    add: function(a, b) {
4        return a + b;
5    },
6    subtract: function(a, b) {
7        return a - b;
8    }
9};

Esempio: Importazione di Moduli

I moduli possono essere importati in CommonJS come segue.

1// main.js
2const math = require('./math.js');
3
4console.log(math.add(4, 7));      // 11
5console.log(math.subtract(9, 2)); // 7

In Node.js, CommonJS è utilizzato come sistema di moduli predefinito, ma sono supportati anche gli ES Modules.

Importazione Dinamica

In JavaScript, i moduli possono essere importati dinamicamente utilizzando import(). Questo metodo utilizza l'elaborazione asincrona per caricare i moduli quando necessario.

Le importazioni dinamiche possono essere effettuate come segue.

1async function loadModule() {
2    const math = await import('./math.js');
3    console.log(math.add(5, 3)); // 8
4}
5
6loadModule();

L'importazione dinamica è un modo per migliorare le prestazioni dell'applicazione. Poiché puoi caricare i moduli quando necessario anziché caricare tutto all'avvio iniziale, migliora la velocità di visualizzazione della pagina.

Vantaggi dei Moduli

• Riutilizzo del codice

  • Il codice modularizzato può essere riutilizzato in altri progetti. Creando moduli con funzionalità comuni e utilizzandoli su più applicazioni, l'efficienza dello sviluppo migliora significativamente.

• Migliore manutenibilità

  • Suddividendo il codice in moduli, è più facile modificare funzionalità o parti specifiche. Gestire il codice in piccole unità rende più facile trovare e correggere bug.

• Evitare conflitti di namespace

  • Definire molte variabili e funzioni nello scope globale può causare conflitti di nomi, ma la modularizzazione lo previene e aiuta a mantenere un codice più pulito.

• Gestione delle dipendenze

  • Utilizzare i moduli permette di gestire esplicitamente le dipendenze di un'applicazione. Diventa chiaro quale modulo dipende da altri moduli, rendendo più comprensibile la struttura del codice.

Riepilogo

Il sistema di moduli di JavaScript è un mezzo potente per organizzare il codice e dividerlo in componenti riutilizzabili. Comprendendo le differenze tra ES Modules e CommonJS e scegliendo il sistema di moduli appropriato in base al progetto, puoi migliorare la leggibilità e la manutenibilità del codice. Inoltre, utilizzando importazioni dinamiche, puoi ottimizzare le prestazioni dell'applicazione.

Sfruttiamo il sistema di moduli per costruire applicazioni JavaScript più scalabili ed efficienti.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video