Moduli JavaScript

In questo tutorial imparerai a conoscere i moduli in JavaScript con l'aiuto di esempi.

Man mano che il nostro programma diventa più grande, può contenere molte righe di codice. Invece di mettere tutto in un unico file, puoi usare i moduli per separare i codici in file separati secondo la loro funzionalità. Questo rende il nostro codice organizzato e più facile da mantenere.

Il modulo è un file che contiene il codice per eseguire un'attività specifica. Un modulo può contenere variabili, funzioni, classi ecc. Vediamo un esempio,

Supponiamo che un file denominato greet.js contenga il codice seguente:

 // exporting a function export function greetPerson(name) ( return `Hello $(name)`; )

Ora, per utilizzare il codice di greet.js in un altro file, puoi utilizzare il seguente codice:

 // importing greetPerson from greet.js file import ( greetPerson ) from './greet.js'; // using greetPerson() defined in greet.js let displayName = greetPerson('Jack'); console.log(displayName); // Hello Jack

Qui,

• La greetPerson()funzione in greet.js viene esportata utilizzando la exportparola chiave

   export function greetPerson(name) (… )

• Quindi, abbiamo importato greetPerson()in un altro file utilizzando la importparola chiave. Per importare funzioni, oggetti, ecc., È necessario avvolgerli ( ).

   import ( greet ) from '/.greet.js';

Nota : è possibile accedere solo a funzioni, oggetti e così via esportati dal modulo. È necessario utilizzare la exportparola chiave per la particolare funzione, oggetti, ecc. Per importarli e utilizzarli in altri file.

Esporta più oggetti

È anche possibile esportare più oggetti da un modulo. Per esempio,

Nel file module.js

 // exporting the variable export const name = 'JavaScript Program'; // exporting the function export function sum(x, y) ( return x + y; )

Nel file principale,

 import ( name, sum ) from './module.js'; console.log(name); let add = sum(4, 9); console.log(add); // 13

Qui,

 import ( name, sum ) from './module.js';

Questo importa sia la variabile name che la sum()funzione dal file module.js .

Ridenominazione di importazioni ed esportazioni

Se gli oggetti (variabili, funzioni ecc.) Che vuoi importare sono già presenti nel tuo file principale, il programma potrebbe non comportarsi come desideri. In questo caso, il programma prende valore dal file principale invece che dal file importato.

Per evitare conflitti di denominazione, è possibile rinominare queste funzioni, oggetti, ecc. Durante l'esportazione o durante l'importazione.

1. Rinomina nel modulo (file di esportazione)

 // renaming import inside module.js export ( function1 as newName1, function2 as newName2 ); // when you want to use the module // import in the main file import ( newName1, newName2 ) from './module.js';

Qui, durante l'esportazione della funzione dal file module.js , vengono assegnati nuovi nomi (qui, newName1 e newName2) alla funzione. Quindi, quando si importa quella funzione, il nuovo nome viene utilizzato per fare riferimento a quella funzione.

2. Rinomina nel file di importazione

 // inside module.js export ( function1, function2 ); // when you want to use the module // import in the required file with different name import ( function1 as newName1, function2 as newName2 ) from './module.js';

Qui, durante l'importazione della funzione, i nuovi nomi (qui, newName1 e newName2) vengono utilizzati per il nome della funzione. Ora usi i nuovi nomi per fare riferimento a queste funzioni.

Esportazione predefinita

È inoltre possibile eseguire l'esportazione predefinita del modulo. Per esempio,

Nel file greet.js :

 // default export export default function greet(name) ( return `Hello $(name)`; ) export const age = 23;

Quindi, durante l'importazione, puoi utilizzare:

 import random_name from './greet.js';

Durante l'esecuzione dell'esportazione predefinita,

• random_name viene importato da greet.js. Poiché random_namenon è in greet.js, l'esportazione predefinita ( greet()in questo caso) viene esportata come random_name.
• È possibile utilizzare direttamente l'esportazione predefinita senza racchiudere le parentesi graffe ().

Nota : un file può contenere più esportazioni. Tuttavia, puoi avere solo un'esportazione predefinita in un file.

I moduli utilizzano sempre la modalità rigorosa

Per impostazione predefinita, i moduli sono in modalità rigorosa. Per esempio,

 // in greet.js function greet() ( // strict by default ) export greet();

Vantaggio dell'utilizzo del modulo

• La base del codice è più facile da mantenere perché codice diverso con funzionalità diverse si trova in file diversi.
• Rende il codice riutilizzabile. È possibile definire un modulo e utilizzarlo numerose volte secondo le proprie esigenze.

L'uso dell'importazione / esportazione potrebbe non essere supportato in alcuni browser. Per saperne di più, visita il supporto di importazione / esportazione JavaScript.