Over modules in JavaScript

In het item JavaScript hergebruiken, wordt uitgelegd hoe je een bestand met JavaScript-code gebruikt in meerdere .HTML-bestanden en het zelfs in meerdere websites kunt gebruiken. In de meest gebruikte (eenvoudigste) vorm is de code:

Een JavaScript-bestand kan alleen worden aangeroepen vanuit een HTML-bestand. Een JavaScript-bestand kan geen andere JavaScript-bestanden aanroepen. Globale variabelen zijn geldig binnen het hele document.

De mogelijkheden van modules zijn veel uitgebreider dan hier beschreven staat. Dit verhaal is slechts een beknopte beschrijving.

Een module is JavaScript-code, gericht op het uitvoeren van bepaalde taken, zoals het openen van bestanden, het maken van een account, het uitvoeren van menu-opdrachten, enzovoort.

JavaScript modules voor gebruik in websites zijn gestandaardiseerd in ECMA-262 (ES6, 2015), de specificatie wordt ook aangeduid met ESM. ESM is bedoeld voor gebruik aan de cliënt-side.
Voor JavaScript aan de server-side is er node.js. Dit gebruikt een ander dialect, dat is vastgelegd in de specificatie CommonJS. Deze specificaties zijn niet zonder meer uitwisselbaar. Het is wel mogelijk om EMS te gebruiken in de nieuwste versies van Nodejs. Andersom kan –voor zover mij bekend– niet. Zie bij de bronnen, aan het eind van dit artikel, voor meer informatie.

Een module is een JavaScript-bestand met daarin variabelen, objecten en functies waarvan de eigenschappen en het gedrag iets anders zijn dan bij "gewoon" JavaScript. Het kan vanuit verschillende documenten en sites binnen een domein worden ingevoegd in een document.

1. Strict mode: Alle functies, objecten en variabelen moeten worden gedeclareerd. Bij niet-modulair JavaScript hoeft dat niet en dat kan tot lastig te vinden fouten leiden. Niet-strikte code wordt ook wel 'sloppy mode' genoemd. (sloppy betekent zoveel als slonzig of slordig).
   De mogelijke problemen in sloppy mode zijn overigens gemakkelijk te vermijden door zorgvuldig te coderen en alle variabelen en objecten te declareren.
2. Geldigheid van variabelen: Variabelen die zijn gedeclareerd in een module zijn niet globaal; ze zijn beperkt tot die module.
3. Import en Export: Functies, objecten, en waarden kunnen uit een module worden geëxporteerd uit een module en in andere modules worden geïmporteerd.
4. Uitgestelde uitvoering: Modules worden pas uitgevoerd nadat het HTML-document helemaal is geladen.
5. Eenmalige uitvoering: Modules worden maar éénmaal uitgevoerd, zelfs als ze meer dan eenmaal worden geïmporteerd.
6. Beter beheer van afhankelijkheden: Modules geven duidelijk aan welke afhankelijkheden (dependencies) er zijn en beheren die op een efficiënte manier.

Je neemt modulair JavaScript op in je website met deze code:

Door type="module" op te geven wordt het JavaScript automatisch in strict mode geïnterpreteerd.
Om een variabele, function of object beschikbaar te maken voor gebruik in andere modules, moet je die exporteren. Dat doe je door het keyword export er voor te zetten. Daarmee wordt het public code. Die kun je invoegen in andere module met het keyword import.

Een paar voorbeelden van het gebruik van JavaScript modules, in vergelijking met "gewoon" Javascript, vind je HIER.

Syntax
export function abcd() { … } // Geen ; na een geëxporteerde function
export let a = 5;
 
Exporteren na declaratie:
function abcd() { … } // Geen ; na een te exporteren function
let a = 5;
export {abcd, a};  
export {abcd} as defg
Voor de gebruiker is de function abcd() beschikbaar als defg()
 
Een special geval is: export default function abcd() { … }
Speciaal voor zaken die heel vaak moeten worden geïmporteerd. Er kan slechts één default per .js-bestand zijn. Bij het importeren van een default mogen de accolades worden weggelaten. Bij exporteren na de declaratie moet export as default worden gebruikt.
 
import {abcd} from 'JavaScript bestand'
Om aan te geven wat moet worden geïmporteerd, moet het absolute of relatieve pad naar het JavaScript-bestand worden gegeven, gerekend vanuit het importerende bestand. Als het .js-bestand in dezelfde map staat: './JavaScript.js'.
 
import {zegHallo as Hallo, zegDag as Dag} from './zeg.js';
De functions zegHallo en zegDag worden geïmporteerd vanuit zeg.js. In het importerende bestand zijn ze beschikbaar onder de namen Hallo en Dag.
Als er heel veel moet worden geïmporteerd gebruik je import * as aaa from 'js-file.js'. Alle beschikbare functions, variabelen, enz., uit js-file.js worden in het object aaa geplaatst.
 
Het is mogelijk om uit een module geëxporteerde functions, variabelen, e.d. te importeren in "gewoon" JavaScript, maar dat is lastig.
 
Importeren en exporteren (lees: modules gebruiken) kan alleen met http:// en https://. Er is bij de ontwikkeling en het gebruiken van modules dus altijd een webserver nodig. Gewoon het .html-bestand aanklikken om de browser te starten heeft tot gevolg dat de modules niet werken zoals bedoeld!

Bronnen:

• MDN Web Documents over import
• MDN Web Documents over export
• Neeraj Dana: Understanding type="module" in JavaScript: A Comprehensive Guide.
• W3 Schools: Over de syntax-verschillen tussen ESM en node.js
• Can I mix in javascript modules with regular javascript

Opmerking:
 
Modulair programmeren lijkt een trend te zijn. Software wordt steeds vaker in elkaar geknutseld met behulp van standaard-blokken, zoals bij Scratch, maar dan groter en uitgebreider.
De modulaire aanpak is prima voor complexe applicaties, maar echt nodig is het niet. Het werkt vooral goed als er veel zich herhalende code is, zoals bij de balken-programma's volgens Roark. Als er weinig zich herhalende code is, zoals bij het programma Fem2D, voegt de modulaire aanpak weinig toe. Beide pakketten heb ik zelf geschreven.

Modulair programmeren vraagt een andere manier van denken dan de traditionele, functionele aanpak. Om van de ene methode op de andere over te stappen is lastig. Voor het onderhoud van bestaande scripts is het niet handig. Voor nieuwe projecten zou je het kunnen overwegen.