Modules in JavaScript

Dit artikel legt modules in JavaScript uit.

YouTube Video

Modules in JavaScript

Modules in JavaScript zijn een manier om code te organiseren en op te splitsen in herbruikbare componenten. Door modules te gebruiken, worden de leesbaarheid en onderhoudbaarheid van de code verbeterd, en kan dezelfde functionaliteit in andere projecten worden hergebruikt. Hier leggen we verschillende module-systemen uit, van het concept van modules tot specifieke gebruiksvoorbeelden.

Het concept van JavaScript-modules

JavaScript had oorspronkelijk geen modulair systeem. Echter, naarmate applicaties groter werden, werd modularisatie belangrijk om code op te splitsen in kleinere eenheden voor hergebruik. Een module is een stuk code met een specifieke functie die onafhankelijk van andere codes kan worden beheerd, zodat het kan worden opgesplitst in meerdere bestanden.

Hoofdtypen modules

Er zijn verschillende modulesystemen in JavaScript. De meest voorkomende zijn ES Modules (ESM) en CommonJS.

• ES Modules is een modulsysteem geïntroduceerd in ECMAScript 2015 (ES6), waarmee modules worden gedefinieerd met behulp van de sleutelwoorden import en export. Dit systeem wordt veel gebruikt, zowel aan de client-side (browsers) als aan de server-side (Node.js).

• CommonJS is een modulaire systeem dat voornamelijk wordt gebruikt in Node.js. Modules worden gedefinieerd met behulp van require en module.exports om bestanden te importeren en te exporteren.

Details van ES Modules (ESM)

ES Modules is het standaard modulesysteem in JavaScript, waardoor functionaliteiten eenvoudig tussen modules kunnen worden uitgewisseld. In browsers en Node.js wordt dit systeem gebruikt om modules te definiëren en te importeren.

export en import

export is een sleutelwoord om functionaliteiten van een module naar buiten toe beschikbaar te maken. import wordt gebruikt om functionaliteiten die in andere modules zijn gedefinieerd, op te nemen.

Voorbeeld: Module-export

Modules kunnen in ES Modules als volgt worden geëxporteerd.

1// math.mjs
2export function add(a, b) {
3    return a + b;
4}
5export function subtract(a, b) {
6    return a - b;
7}

In deze math.mjs module worden de functies add en subtract geëxporteerd. Deze functies kunnen worden geïmporteerd vanuit andere modules.

Hier is .mjs een bestandsuitbreiding die expliciet een JavaScript-bestand in ES Modules-formaat aanduidt. In Node.js bepaalt de bestandsuitbreiding of het CommonJS of ES Modules is. Echter, als type: "module" in package.json is opgegeven, worden bestanden met de extensie .js standaard als ES Modules behandeld.

Voorbeeld: Module Import

Modules kunnen in ES Modules als volgt worden geïmporteerd.

1// main.mjs
2import { add, subtract } from './math.mjs';
3
4console.log(add(3, 5)); // 8
5console.log(subtract(10, 7)); // 3

Op deze manier kun je met behulp van import eenvoudig functies gebruiken die in andere bestanden zijn gedefinieerd.

Standaardexport en Benoemde Export

Er zijn twee exportmethodes voor modules. De ene is benoemde export en de andere is standaardexport.

• Benoemde exports worden gebruikt bij het exporteren van meerdere functies of variabelen uit een module. Je kunt meerdere exports uitvoeren en bij het importeren ontvang je ze met opgegeven namen.

1// utils.mjs
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

1// main.mjs
2import { sum, multiply } from './utils.mjs';
3
4console.log(sum(4, 6));       // 10
5console.log(multiply(3, 5));  // 15

• Standaardexport wordt gebruikt wanneer een enkele functie of klasse uit een module wordt geëxporteerd. Tijdens het importeren kan het met elke naam worden ontvangen.

1// greet.mjs
2export default function greet() {
3    return "Hello, World!";
4}

1// main.mjs
2import greet from './greet.mjs';
3
4console.log(greet()); // "Hello, World!"

Er is slechts één standaardexport mogelijk, maar benoemde exports kunnen meerdere elementen tegelijk exporteren.

Voorbeeld van gebruik aan de clientzijde (browser).

Voorbeeld: Module-export

Modules kunnen in ES Modules als volgt worden geëxporteerd.

1// utils.js
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

In deze utils.js module worden de functies sum en multiply geëxporteerd.

Voorbeeld: Module Import

Modules kunnen aan de clientzijde als volgt worden geïmporteerd.

 1<!DOCTYPE html>
 2<html lang="ja">
 3<head>
 4  <meta charset="UTF-8">
 5  <title>ES Modules Sample in HTML</title>
 6</head>
 7<body>
 8  <h1>ES Modules Sample</h1>
 9  <div id="result"></div>
10
11  <script type="module">
12    import { sum, multiply } from './utils.js';
13
14    const result = `
15      <p>sum(3, 5) = ${sum(3, 5)}</p>
16      <p>multiply(10, 7) = ${multiply(10, 7)}</p>
17    `;
18
19    document.getElementById('result').innerHTML = result;
20    console.log(sum(3, 5));      // 8
21    console.log(multiply(10, 7)); // 70
22  </script>
23</body>
24</html>

• Door het type attribuut van de <script> tag in te stellen op module, kan ES module-syntaxis zoals import en export binnen HTML worden gebruikt.
• De import instructie laadt het externe utils.js en toont het resultaat.

Details van CommonJS

CommonJS is een modulesysteem dat voornamelijk in Node.js wordt gebruikt. Modules worden geëxporteerd en geïmporteerd met module.exports en require.

require en module.exports

In CommonJS wordt module.exports gebruikt om modules te exporteren. Ook wordt require gebruikt om modules uit andere bestanden te gebruiken.

Voorbeeld: Module-export

Modules kunnen in CommonJS als volgt worden geëxporteerd.

1// math.js
2module.exports = {
3    add: function(a, b) {
4        return a + b;
5    },
6    subtract: function(a, b) {
7        return a - b;
8    }
9};

Voorbeeld: Module Import

Modules kunnen in CommonJS als volgt worden geïmporteerd.

1// main.js
2const math = require('./math.js');
3
4console.log(math.add(4, 7));      // 11
5console.log(math.subtract(9, 2)); // 7

In Node.js wordt CommonJS als het standaardmodulesysteem gebruikt, maar ES-modules worden ook ondersteund.

Dynamische Import

In JavaScript kunnen modules dynamisch worden geïmporteerd met behulp van import(). Deze methode maakt gebruik van asynchrone verwerking om modules te laden wanneer dat nodig is.

Dynamische importen kunnen als volgt worden gedaan.

1async function loadModule() {
2    const math = await import('./math.js');
3    console.log(math.add(5, 3)); // 8
4}
5
6loadModule();

Dynamische import is een manier om de prestaties van een applicatie te verbeteren. Aangezien je modules naar behoefte kunt laden in plaats van alles bij de eerste laadbeurt te laden, verbetert dit de snelheid van het weergeven van pagina's.

Voordelen van Modules

• Code Herbruikbaarheid

  • Gestructureerde code kan opnieuw worden gebruikt in andere projecten. Door modules met gemeenschappelijke functionaliteiten te maken en ze in meerdere toepassingen te gebruiken, wordt de ontwikkelings efficiëntie aanzienlijk verbeterd.

• Verbeterd Onderhoudsgemak

  • Door code op te splitsen in modules wordt het makkelijker om specifieke onderdelen of functies aan te passen. Het beheren van code in kleine eenheden maakt het gemakkelijker om bugs te vinden en op te lossen.

• Voorkomen van Namespace-Botsingen

  • Het definiëren van veel variabelen en functies in de globale scope kan leiden tot naamconflicten, maar modularisatie voorkomt dit en zorgt voor een schonere codebase.

• Afhankelijkheidsbeheer

  • Het gebruik van modules maakt het mogelijk om de afhankelijkheden van een applicatie expliciet te beheren. Het wordt duidelijk welke module afhankelijk is van andere modules, waardoor de code structuur makkelijker te begrijpen is.

Samenvatting

Het modulesysteem van JavaScript is een krachtig middel om code te organiseren en op te splitsen in herbruikbare componenten. Door de verschillen tussen ES-modules en CommonJS te begrijpen en het juiste modulesysteem te kiezen op basis van het project, kun je de leesbaarheid en onderhoudbaarheid van de code verbeteren. Bovendien kun je door gebruik te maken van dynamische imports de prestaties van toepassingen optimaliseren.

Laten we het modulesysteem benutten om meer schaalbare en efficiënte JavaScript-toepassingen te bouwen.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video