3. Modules

Het module pattern in JavaScript is een veelgebruikte ontwerpstrategie om code op te splitsen in afzonderlijke, herbruikbare en onderhoudbare eenheden. Het helpt ontwikkelaars om de scope van variabelen te beperken en zo het risico op naamconflicten te verkleinen, terwijl het een manier biedt om zowel publieke als private functies en variabelen te definiëren. Het module pattern kan worden beschouwd als een vroege vorm van encapsulatie in JavaScript, vergelijkbaar met wat je zou vinden in objectgeoriënteerde programmeertalen.

Basisprincipes van het module pattern

1. Encapsulatie en scope-afscherming: In JavaScript worden variabelen en functies normaal gesproken globaal gedeclareerd, wat naamconflicten kan veroorzaken. Het module pattern maakt gebruik van function scopes (via Immediately Invoked Function Expressions (IIFE)) om variabelen en functies te isoleren van de globale scope.

2. Openbare en privéleden: Het module pattern maakt onderscheid tussen openbare en privéfuncties en -variabelen. Dit biedt controle over wat toegankelijk is buiten de module en wat intern blijft.

   • Privéleden zijn variabelen en functies die binnen de IIFE zijn gedefinieerd en niet toegankelijk zijn van buitenaf.
   • Publieke leden worden teruggegeven als een object dat de openbaar toegankelijke functies en variabelen bevat.

Voorbeeld van het module pattern

const myModule = (function () {
  // Privé variabelen en functies
  let privateVar = "Ik ben privé";
 
  function privateFunction() {
    console.log(privateVar);
  }
 
  // Openbare variabelen en functies
  return {
    publicVar: "Ik ben openbaar",
 
    publicFunction: function () {
      console.log(this.publicVar);
      privateFunction(); // Toegang tot privé functies vanuit een publieke functie
    }
  };
})();
 
// Toegang tot openbare leden
console.log(myModule.publicVar); // Output: "Ik ben openbaar"
myModule.publicFunction(); // Output: "Ik ben openbaar" gevolgd door "Ik ben privé"
 
// Geen toegang tot privéleden
console.log(myModule.privateVar); // undefined
myModule.privateFunction(); // TypeError: myModule.privateFunction is not a function

Voordelen van het module pattern

1. Scope-beperking: Door de function scope te gebruiken, blijft de globale namespace schoon en wordt het risico op naamconflicten verminderd.
2. Encapsulatie: Het pattern maakt het mogelijk om gegevens en functionaliteit af te schermen die niet buiten de module toegankelijk hoeven te zijn.
3. Herbruikbaarheid: Modules kunnen worden hergebruikt in andere delen van de applicatie zonder dat de codebase verstrikt raakt in globale variabelen.
4. Onderhoudbaarheid: Door de scheiding van privé en publieke leden wordt de code overzichtelijker en gemakkelijker te onderhouden.

Moderne modules met ES6 (ECMAScript 2015)

In ES6 introduceerde JavaScript een ingebouwd modulensysteem met import en export, dat het module pattern in veel gevallen vervangt. Met ES6-modules kun je code tussen bestanden importeren en exporteren zonder de noodzaak van IIFE’s.

Voorbeeld van een ES6-module:

module.js

export const publicVar = "Ik ben openbaar";
export function publicFunction() {
  console.log(publicVar);
}

main.js

import { publicVar, publicFunction } from './module.js';
 
console.log(publicVar); // Output: "Ik ben openbaar"
publicFunction(); // Output: "Ik ben openbaar"

Conclusie

Het module pattern biedt een flexibele manier om de scope van variabelen te beperken en data te encapsuleren, wat vooral nuttig was vóór de komst van ES6-modules. Tegenwoordig worden ES6-modules meer gebruikt vanwege hun eenvoud en native ondersteuning, maar het module pattern blijft relevant, vooral voor oudere codebases of wanneer een volledig functionele scope vereist is.

Oefeningen

Naar deeltaken