JavaScript
Techniques de modularisation

Définition du module universel (UMD)

Le modèle UMD (Universal Module Definition) est utilisé lorsque notre module doit être importé par un certain nombre de chargeurs de modules différents (par exemple, AMD, CommonJS).

Le modèle lui-même comprend deux parties:

1. Une IIFE (expression de fonction appelée immédiatement) qui recherche le chargeur de module qui est en cours d'implémentation par l'utilisateur. Cela prendra deux arguments; root (une this référence à la portée mondiale) et l' factory (la fonction où nous déclarons notre module).

2. Une fonction anonyme qui crée notre module. Ceci est transmis comme second argument à la partie IIFE du motif. Cette fonction reçoit un nombre quelconque d’arguments pour spécifier les dépendances du module.

Dans l'exemple ci-dessous, nous vérifions AMD, puis CommonJS. Si aucun de ces chargeurs n'est utilisé, nous avons recours à la mise à disposition globale du module et de ses dépendances.

(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 () {};
}));

Expressions de fonction immédiatement invoquées (IIFE)

Les expressions de fonction immédiatement appelées peuvent être utilisées pour créer une portée privée lors de la production d'une API publique.

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

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

Voir le modèle de module pour plus de détails.

Définition de module asynchrone (AMD)

AMD est un système de définition de module qui tente de résoudre certains problèmes courants avec d’autres systèmes tels que CommonJS et les fermetures anonymes.

AMD aborde ces problèmes en:

• Enregistrer la fonction factory en appelant define (), au lieu de l'exécuter immédiatement
• Passer des dépendances sous la forme d'un tableau de noms de modules, qui sont ensuite chargés au lieu d'utiliser des globales
• Exécuter uniquement la fonction usine une fois que toutes les dépendances ont été chargées et exécutées
• Passer les modules dépendants comme arguments à la fonction usine

L'essentiel ici est qu'un module puisse avoir une dépendance et ne pas tout garder en attendant qu'il se charge, sans que le développeur ait à écrire un code compliqué.

Voici un exemple d'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;
});

Les modules peuvent également ignorer le nom et être anonyme. Lorsque cela est fait, ils sont généralement chargés par nom de fichier.

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

Ils peuvent également ignorer les dépendances:

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

Certains chargeurs AMD prennent en charge la définition de modules en tant qu’objets simples:

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

CommonJS - Node.js

CommonJS est un modèle de modularisation populaire utilisé dans Node.js.

Le système CommonJS est centré autour d'une fonction require() qui charge d'autres modules et une propriété exports qui permet aux modules d'exporter des méthodes accessibles au public.

Voici un exemple de CommonJS, nous allons charger le module fs Lodash et Node.js:

// 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);
};

Vous pouvez également exporter une fonction en tant que module entier en utilisant module.exports :

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

Modules ES6

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";

Vous trouverez plus d'informations sur les modules ES6 dans la rubrique Modules .