JavaScript Modules

Modulen (Modules)

JavaScript modules laten je toe om code te verdelen in aparte bestanden.

Dit maakt het onderhoud van de codebibliotheek gemakkelijker.

Modulen worden gebruikt met import verklaringen die worden geïmporteerd uit externe bestanden.

Modulen zijn afhankelijk van de <script> tag van type="module".

Voorbeeld

<script type="module">
import message from "./message.js";
</script>

Probeer het zelf

export

metfunctiesofvariabelenmodulen kunnen opgeslagen worden in elk extern bestand.

Er zijn twee soorten export:Genaamd exporterenenStandaard exporteren.

Genaamd exporteren (Named Exports)

Laten we een bestand genaamd person.js maken en daarin de inhoud invullen die we willen exporteren.

Je kunt op twee manieren een genaamd exporteren maken. Dit is enerzijds individueel inline aanmaken, anderzijds aan het einde van het bestand eenmalig aanmaken.

Aan de hand van inline individueel aanmaken:

person.js

export const name = "Bill";
export const age = 19;

Maak aan het einde van het bestand eenmalig aan:

person.js

const name = "Bill";
const age = 19;
export {name, age};

Standaard exporteren (Default Exports)

Laten we een ander bestand aanmaken genaamd message.js en laten we het gebruiken om de standaard export te demonstreren.

Er kan maar één standaard export in een bestand zijn.

Voorbeeld

message.js

const message = () => {
const name = "Bill";
const age = 19;
return name + ' is ' + age + ' jaar oud.';
};
export default message;

Importeren

U kunt modules op twee manieren importeren naar een bestand, afhankelijk van of het een genaamde of een standaard export is.

Naamgegeven export is opgebouwd met haken. Standaard export niet.

Importeren van de genaamde export

Importeren van de genaamde export uit bestand person.js:

import { name, age } from "./person.js";

Probeer het zelf

Importeren van de standaard export

Importeren van de standaard export uit bestand message.js:

import message from "./message.js";

Probeer het zelf

Let op

Modulen zijn alleen geschikt voor HTTP(s) protocol.

Webpagina's die via het file:// protocol worden geopend, kunnen geen import/export gebruiken.