JavaScript-modules

In deze tutorial leer je aan de hand van voorbeelden over modules in JavaScript.

Naarmate ons programma groter wordt, kan het veel regels code bevatten. In plaats van alles in één bestand te plaatsen, kunt u modules gebruiken om codes in afzonderlijke bestanden te scheiden op basis van hun functionaliteit. Dit maakt onze code overzichtelijk en gemakkelijker te onderhouden.

Module is een bestand dat code bevat om een ​​specifieke taak uit te voeren. Een module kan variabelen, functies, klassen enz. Bevatten. Laten we een voorbeeld bekijken,

Stel dat een bestand met de naam greet.js de volgende code bevat:

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

Om de code van greet.js in een ander bestand te gebruiken, kunt u de volgende code gebruiken:

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

Hier,

• De greetPerson()functie in greet.js wordt geëxporteerd met behulp van het exporttrefwoord

   export function greetPerson(name) (… )

• Vervolgens hebben we greetPerson()in een ander bestand geïmporteerd met behulp van het importtrefwoord. Om functies, objecten enz. Te importeren, moet u ze omwikkelen ( ).

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

Opmerking : u hebt alleen toegang tot geëxporteerde functies, objecten, enz. Vanuit de module. U moet het exporttrefwoord voor de specifieke functie, objecten, enz. Gebruiken om ze te importeren en in andere bestanden te gebruiken.

Exporteer meerdere objecten

Het is ook mogelijk om meerdere objecten uit een module te exporteren. Bijvoorbeeld,

In het bestand module.js

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

In het hoofdbestand,

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

Hier,

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

Dit importeert zowel sum()de naamvariabele als de functie uit het module.js- bestand.

Hernoemen van import en export

Als de objecten (variabelen, functies enz.) Die u wilt importeren al aanwezig zijn in uw hoofdbestand, gedraagt ​​het programma zich mogelijk niet zoals u wilt. In dit geval haalt het programma waarde uit het hoofdbestand in plaats van het geïmporteerde bestand.

Om naamconflicten te voorkomen, kunt u deze functies, objecten, enz. Tijdens het exporteren of tijdens het importeren hernoemen.

1. Hernoemen in de module (exportbestand)

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

Hier, tijdens het exporteren van de functie uit het module.js- bestand, worden nieuwe namen (hier nieuweNaam1 & nieuweNaam2) aan de functie gegeven. Daarom wordt bij het importeren van die functie de nieuwe naam gebruikt om naar die functie te verwijzen.

2. Hernoem in het importbestand

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

Hier worden tijdens het importeren van de functie de nieuwe namen (hier newName1 & newName2) gebruikt voor de functienaam. Nu gebruik je de nieuwe namen om naar deze functies te verwijzen.

Standaard export

U kunt ook een standaard export van de module uitvoeren. Bijvoorbeeld,

In het bestand greet.js :

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

Vervolgens kunt u bij het importeren gebruiken:

 import random_name from './greet.js';

Tijdens het uitvoeren van een standaard export,

• random_name wordt geïmporteerd uit greet.js. Omdat, random_nameniet in is greet.js, wordt de standaard export ( greet()in dit geval) geëxporteerd als random_name.
• U kunt de standaardexport rechtstreeks gebruiken zonder accolades te plaatsen ().

Opmerking : een bestand kan meerdere exports bevatten. U kunt echter slechts één standaardexport in een bestand hebben.

Modules gebruiken altijd de strikte modus

Standaard bevinden modules zich in de strikte modus. Bijvoorbeeld,

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

Voordeel van het gebruik van module

• De codebasis is gemakkelijker te onderhouden omdat verschillende codes met verschillende functionaliteiten in verschillende bestanden staan.
• Maakt code herbruikbaar. U kunt een module definiëren en deze meerdere keren gebruiken volgens uw behoeften.

Het gebruik van importeren / exporteren wordt in sommige browsers mogelijk niet ondersteund. Ga voor meer informatie naar Ondersteuning voor importeren / exporteren van JavaScript.