JavaScript-moduler

I denne veiledningen vil du lære om moduler i JavaScript ved hjelp av eksempler.

Etter hvert som programmet vårt blir større, kan det inneholde mange kodelinjer. I stedet for å legge alt i en enkelt fil, kan du bruke moduler til å skille koder i separate filer i henhold til deres funksjonalitet. Dette gjør koden vår organisert og lettere å vedlikeholde.

Modulen er en fil som inneholder kode for å utføre en bestemt oppgave. En modul kan inneholde variabler, funksjoner, klasser osv. La oss se et eksempel,

Anta at en fil som heter greet.js inneholder følgende kode:

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

Nå, for å bruke koden til greet.js i en annen fil, kan du bruke følgende kode:

 // 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

Her,

  • Den greetPerson()funksjon i greet.js eksporteres bruke exportsøkeord 
     export function greetPerson(name) (… )
  • Deretter importerte vi greetPerson()i en annen fil ved hjelp av importnøkkelordet. For å importere funksjoner, objekter osv., Må du pakke dem rundt ( ). 
     import ( greet ) from '/.greet.js';

Merk : Du kan bare få tilgang til eksporterte funksjoner, objekter, etc. fra modulen. Du må bruke exportnøkkelordet for den spesielle funksjonen, objekter osv. For å importere dem og bruke dem i andre filer.

Eksporter flere objekter

Det er også mulig å eksportere flere objekter fra en modul. For eksempel,

I filen module.js

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

I hovedfilen,

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

Her,

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

Dette importerer både navnesvariabelen og sum()funksjonen fra module.js- filen.

Endre navn på import og eksport

Hvis objektene (variablene, funksjonene osv.) Som du vil importere allerede er tilstede i hovedfilen din, kan det hende at programmet ikke oppfører seg slik du vil. I dette tilfellet tar programmet verdi fra hovedfilen i stedet for den importerte filen.

For å unngå navngivning av konflikter, kan du gi nytt navn til disse funksjonene, objektene osv. Under eksporten eller under importen.

1. Gi nytt navn i modulen (eksportfil)

 // 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';

Her, mens funksjonen eksporteres fra module.js- filen, blir nye navn (her, newName1 og newName2) gitt til funksjonen. Derfor, når du importerer denne funksjonen, brukes det nye navnet til å referere til den funksjonen.

2. Gi nytt navn i importfilen

 // 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';

Her, mens du importerer funksjonen, brukes de nye navnene (her, newName1 & newName2) til funksjonsnavnet. Nå bruker du de nye navnene til å referere til disse funksjonene.

Standard eksport

Du kan også utføre standardeksport av modulen. For eksempel,

I filen greet.js :

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

Så når du importerer, kan du bruke:

 import random_name from './greet.js';

Mens du utfører standardeksport,

  • random_name importeres fra greet.js. Siden, random_nameikke er i greet.js, eksporteres standardeksporten ( greet()i dette tilfellet) som random_name.
  • Du kan bruke standard eksport direkte uten å legge ved krøllete parenteser ().

Merk : En fil kan inneholde flere eksportvarer. Du kan imidlertid bare ha en standardeksport i en fil.

Moduler Bruk alltid streng modus

Som standard er modulene i streng modus. For eksempel,

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

Fordel med å bruke modul

  • Kodebasen er lettere å vedlikeholde fordi forskjellige koder med forskjellige funksjoner er i forskjellige filer.
  • Gjør koden gjenbrukbar. Du kan definere en modul og bruke den flere ganger etter dine behov.

Bruk av import / eksport støttes kanskje ikke i noen nettlesere. Hvis du vil vite mer, kan du gå til støtte for import / eksport av JavaScript.

Interessante artikler...