JavaScript
Modularisatie technieken

Universal Module Definition (UMD)

Het UMD-patroon (Universal Module Definition) wordt gebruikt wanneer onze module moet worden geïmporteerd door een aantal verschillende module-laders (bijvoorbeeld AMD, CommonJS).

Het patroon zelf bestaat uit twee delen:

1. Een IIFE (onmiddellijk opgeroepen functie-expressie) die controleert op de modulelader die door de gebruiker wordt geïmplementeerd. Hiervoor zijn twee argumenten nodig; root (a this verwijzing naar het globale bereik) en factory (de functie waarbij we verklaren onze module).

2. Een anonieme functie die onze module maakt. Dit wordt als het tweede argument doorgegeven aan het IIFE-gedeelte van het patroon. Aan deze functie wordt een willekeurig aantal argumenten doorgegeven om de afhankelijkheden van de module op te geven.

In het onderstaande voorbeeld controleren we op AMD en vervolgens op CommonJS. Als geen van deze laders in gebruik is, vallen we terug op het wereldwijd beschikbaar maken van de module en zijn afhankelijkheden.

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'b'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('b'));
    } else {
        // Browser globals
        factory((root.commonJsStrict = {}), root.b);
    }
}(this, function (exports, b) {
    //use b in some fashion.

    // attach properties to the exports object to define
    // the exported module properties.
    exports.action = function () {};
}));

Onmiddellijk ingeroepen functie-uitdrukkingen (IIFE)

Direct opgeroepen functie-expressies kunnen worden gebruikt om een privébereik te maken terwijl een openbare API wordt geproduceerd.

var Module = (function() {
  var privateData = 1;

  return {
    getPrivateData: function() {
      return privateData;
    }
  };
})();
Module.getPrivateData(); // 1
Module.privateData; // undefined

Zie het modulepatroon voor meer informatie.

Asynchronous Module Definition (AMD)

AMD is een moduledefinitiesysteem dat probeert een aantal veelvoorkomende problemen met andere systemen zoals CommonJS en anonieme sluitingen aan te pakken.

AMD lost deze problemen op door:

• De fabrieksfunctie registreren door defin () aan te roepen in plaats van deze onmiddellijk uit te voeren
• Afhankelijkheden doorgeven als een reeks modulenamen, die vervolgens worden geladen, in plaats van globals te gebruiken
• De fabrieksfunctie alleen uitvoeren als alle afhankelijkheden zijn geladen en uitgevoerd
• De afhankelijke modules als argumenten doorgeven aan de fabrieksfunctie

Het belangrijkste hier is dat een module een afhankelijkheid kan hebben en niet alles omhoog kan houden terwijl hij wacht op het laden, zonder dat de ontwikkelaar ingewikkelde code hoeft te schrijven.

Hier is een voorbeeld van AMD:

// Define a module "myModule" with two dependencies, jQuery and Lodash
define("myModule", ["jquery", "lodash"], function($, _) {
    // This publicly accessible object is our module
    // Here we use an object, but it can be of any type
    var myModule = {};

    var privateVar = "Nothing outside of this module can see me";

    var privateFn = function(param) {
        return "Here's what you said: " + param;
    };

    myModule.version = 1;

    myModule.moduleMethod = function() {
        // We can still access global variables from here, but it's better
        // if we use the passed ones
        return privateFn(windowTitle);
    };

    return myModule;
});

Modules kunnen ook de naam overslaan en anoniem zijn. Wanneer dat is gebeurd, worden ze meestal op bestandsnaam geladen.

define(["jquery", "lodash"], function($, _) { /* factory */ });

Ze kunnen ook afhankelijkheden overslaan:

define(function() { /* factory */ });

Sommige AMD-laders ondersteunen het definiëren van modules als gewone objecten:

define("myModule", { version: 1, value: "sample string" });

CommonJS - Node.js

CommonJS is een populair modularisatiepatroon dat wordt gebruikt in Node.js.

Het CommonJS-systeem is gecentreerd rond een functie need require() die andere modules laadt en een exports waarmee modules openbaar toegankelijke methoden kunnen exporteren.

Hier is een voorbeeld van CommonJS, we zullen de fs module van Lodash en Node.js laden:

// Load fs and lodash, we can use them anywhere inside the module
var fs = require("fs"),
    _ = require("lodash");

var myPrivateFn = function(param) {
    return "Here's what you said: " + param;
};

// Here we export a public `myMethod` that other modules can use
exports.myMethod = function(param) {
    return myPrivateFn(param);
};

U kunt ook een functie als de gehele module module.exports met module.exports :

module.exports = function() {
    return "Hello!";
};

ES6-modules

export function greet(name) {
    console.log("Hello %s!", name);
}

var myMethod = function(param) {
    return "Here's what you said: " + param;
};

export {myMethod}

export class MyClass {
    test() {}
}

import greet from "mymodule.js";

greet("Bob");

import * as myModule from "mymodule.js";

myModule.greet("Alice");

import { greet as A, myMethod as B } from "mymodule.js";

Meer informatie over ES6-modules vindt u in het onderwerp Modules .