JavaScript-moduler

I denne vejledning lærer du om moduler i JavaScript ved hjælp af eksempler.

Efterhånden som vores program bliver større, kan det indeholde mange linjer med kode. I stedet for at lægge alt i en enkelt fil kan du bruge moduler til at adskille koder i separate filer i henhold til deres funktionalitet. Dette gør vores kode organiseret og lettere at vedligeholde.

Modul er en fil, der indeholder kode til at udføre en bestemt opgave. Et modul kan indeholde variabler, funktioner, klasser osv. Lad os se et eksempel,

Antag at en fil med navnet greet.js indeholder følgende kode:

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

For at bruge koden for greet.js i en anden fil kan du nu bruge 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()funktion i greet.js eksporteres ved hjælp af exportsøgeord

   export function greetPerson(name) (… )

• Derefter importerede vi greetPerson()i en anden fil ved hjælp af importnøgleordet. For at importere funktioner, objekter osv. Skal du pakke dem rundt ( ).

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

Bemærk : Du kan kun få adgang til eksporterede funktioner, objekter osv. Fra modulet. Du skal bruge exportnøgleordet til den bestemte funktion, objekter osv. For at importere dem og bruge dem i andre filer.

Eksporter flere objekter

Det er også muligt at eksportere flere objekter fra et modul. For eksempel,

I filmodulet.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 navnet variablen og sum()funktionen fra filen module.js .

Omdøbning af import og eksport

Hvis de objekter (variabler, funktioner osv.), Som du vil importere, allerede findes i din hovedfil, opfører programmet muligvis ikke som du vil. I dette tilfælde tager programmet værdi fra hovedfilen i stedet for den importerede fil.

For at undgå navngivning af konflikter kan du omdøbe disse funktioner, objekter osv. Under eksporten eller under importen.

1. Omdøb i modulet (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 der eksporteres funktionen fra module.js- filen, gives der nye navne (her, newName1 & newName2) til funktionen. Derfor, når du importerer denne funktion, bruges det nye navn til at henvise til denne funktion.

2. Omdøb 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 funktionen, bruges de nye navne (her, newName1 & newName2) til funktionsnavnet. Nu bruger du de nye navne til at henvise til disse funktioner.

Standardeksport

Du kan også udføre standardeksport af modulet. For eksempel,

I filen greet.js :

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

Derefter når du importerer, kan du bruge:

 import random_name from './greet.js';

Mens du udfører standardeksport,

• tilfældigt navn importeres fra greet.js. Da, random_nameikke er i greet.js, eksporteres standardeksporten ( greet()i dette tilfælde) som random_name.
• Du kan bruge standardeksporten direkte uden at lukke krøllede parenteser ().

Bemærk : En fil kan indeholde flere eksporter. Du kan dog kun have en standardeksport i en fil.

Moduler bruger altid streng tilstand

Som standard er moduler i streng tilstand. For eksempel,

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

Fordel ved at bruge modulet

• Kodebasen er lettere at vedligeholde, fordi forskellige koder med forskellige funktioner findes i forskellige filer.
• Gør kode genanvendelig. Du kan definere et modul og bruge det adskillige gange efter dine behov.

Brug af import / eksport understøttes muligvis ikke i nogle browsere. For at lære mere, besøg JavaScript import / eksport support.