JavaScript-moduler

I den här handledningen lär du dig om moduler i JavaScript med hjälp av exempel.

När vårt program blir större kan det innehålla många kodrader. Istället för att lägga allt i en enda fil kan du använda moduler för att separera koder i separata filer enligt deras funktionalitet. Detta gör vår kod organiserad och lättare att underhålla.

Modulen är en fil som innehåller kod för att utföra en specifik uppgift. En modul kan innehålla variabler, funktioner, klasser etc. Låt oss se ett exempel,

Antag att en fil med namnet greet.js innehåller följande kod:

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

För att använda koden för greet.js i en annan fil kan du nu använda följande kod:

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

Här,

• Den greetPerson()funktion i greet.js exporteras med hjälp av exportsökord

   export function greetPerson(name) (… )

• Sedan importerade vi greetPerson()i en annan fil med hjälp av importnyckelordet. För att importera funktioner, objekt etc. måste du slå dem runt ( ).

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

Obs! Du kan bara komma åt exporterade funktioner, objekt etc. från modulen. Du måste använda exportnyckelordet för den specifika funktionen, objekt etc. för att importera dem och använda dem i andra filer.

Exportera flera objekt

Det är också möjligt att exportera flera objekt från en modul. Till exempel,

I filmodulen.js

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

I huvudfilen,

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

Här,

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

Detta importerar både namnvariabeln och sum()funktionen från filen module.js .

Byta namn på import och export

Om objekten (variabler, funktioner osv.) Som du vill importera redan finns i din huvudfil kan det hända att programmet inte fungerar som du vill. I det här fallet tar programmet värde från huvudfilen istället för den importerade filen.

För att undvika namngivningskonflikter kan du byta namn på dessa funktioner, objekt etc. under exporten eller under importen.

1. Byt namn i modulen (exportfil)

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

Här, medan du exporterar funktionen från module.js- filen, ges nya namn (här, newName1 & newName2) till funktionen. Därför används det nya namnet när du importerar den funktionen för att referera till den funktionen.

2. Byt namn 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';

Här, medan du importerar funktionen, används de nya namnen (här, newName1 & newName2) för funktionsnamnet. Nu använder du de nya namnen för att referera till dessa funktioner.

Standardexport

Du kan också utföra standardexport av modulen. Till exempel,

I filen greet.js :

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

När du importerar kan du sedan använda:

 import random_name from './greet.js';

När du utför standardexport,

• slumpmässigt namn importeras från greet.js. Eftersom, random_nameinte är i greet.js, exporteras standardexporten ( greet()i detta fall) som random_name.
• Du kan använda standardexporten direkt utan att bifoga lockiga parenteser ().

Obs! En fil kan innehålla flera exporter. Du kan dock bara ha en standardexport i en fil.

Moduler använder alltid strikt läge

Som standard är modulerna i strikt läge. Till exempel,

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

Fördelen med att använda modulen

• Kodbasen är lättare att underhålla eftersom olika koder med olika funktioner finns i olika filer.
• Gör kod återanvändbar. Du kan definiera en modul och använda den flera gånger enligt dina behov.

Användning av import / export kanske inte stöds i vissa webbläsare. För mer information, besök JavaScript import / export support.