JavaScript
Tecniche di modularizzazione

Universal Module Definition (UMD)

Il pattern UMD (Universal Module Definition) viene utilizzato quando il nostro modulo deve essere importato da diversi caricatori di moduli (ad es. AMD, CommonJS).

Il modello stesso consiste di due parti:

1. Un IIFE (espressione funzione immediatamente richiamata) che controlla il caricatore di moduli che viene implementato dall'utente. Questo richiederà due argomenti; root (un this riferimento alla portata globale) e factory (la funzione in cui dichiariamo la nostra modulo).

2. Una funzione anonima che crea il nostro modulo. Questo è passato come secondo argomento alla parte IIFE del pattern. Questa funzione è passata qualsiasi numero di argomenti per specificare le dipendenze del modulo.

Nell'esempio seguente controlliamo AMD, quindi CommonJS. Se nessuno di questi caricatori è in uso, torniamo a rendere disponibili il modulo e le sue dipendenze a livello globale.

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

Espressioni di funzioni immediatamente invocate (IIFE)

Le espressioni di funzione richiamate immediatamente possono essere utilizzate per creare un ambito privato durante la produzione di un'API pubblica.

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

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

Vedi il modello del modulo per maggiori dettagli.

Definizione di modulo asincrono (AMD)

AMD è un sistema di definizione dei moduli che tenta di risolvere alcuni dei problemi comuni con altri sistemi come CommonJS e chiusure anonime.

AMD affronta questi problemi:

• Registrare la funzione factory chiamando define (), invece di eseguirlo immediatamente
• Passando le dipendenze come una matrice di nomi di moduli, che vengono poi caricati, invece di utilizzare globals
• Esegui solo la funzione di fabbrica una volta caricate ed eseguite tutte le dipendenze
• Passaggio dei moduli dipendenti come argomenti alla funzione di fabbrica

La cosa fondamentale qui è che un modulo può avere una dipendenza e non tenere tutto in attesa che si carichi, senza che lo sviluppatore debba scrivere codice complicato.

Ecco un esempio di 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;
});

I moduli possono anche saltare il nome ed essere anonimi. Quando ciò è fatto, in genere vengono caricati in base al nome del file.

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

Possono anche saltare le dipendenze:

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

Alcuni caricatori AMD supportano la definizione di moduli come oggetti semplici:

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

CommonJS - Node.js

CommonJS è un modello di modularizzazione popolare utilizzato in Node.js.

Il sistema CommonJS è centrato attorno a una funzione require() che carica altri moduli e una proprietà exports che consente ai moduli di esportare metodi accessibili pubblicamente.

Ecco un esempio di CommonJS, verrà caricato il modulo fs Lodash e 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);
};

Puoi anche esportare una funzione come l'intero modulo usando module.exports :

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

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

Ulteriori informazioni sui moduli ES6 sono disponibili nell'argomento Moduli .