JavaScript
Técnicas de modularización

Definición de Módulo Universal (UMD)

El patrón UMD (definición de módulo universal) se utiliza cuando nuestro módulo necesita ser importado por varios cargadores de módulos diferentes (por ejemplo, AMD, CommonJS).

El patrón en sí consta de dos partes:

1. Un IIFE (Expresión de función inmediatamente invocada) que verifica el cargador de módulos que está implementando el usuario. Esto tomará dos argumentos; root (a this referencia al alcance global) y factory (la función donde declaramos nuestro módulo).

2. Una función anónima que crea nuestro módulo. Esto se pasa como el segundo argumento a la parte IIFE del patrón. A esta función se le pasa cualquier número de argumentos para especificar las dependencias del módulo.

En el siguiente ejemplo, verificamos si hay AMD, luego CommonJS. Si ninguno de esos cargadores está en uso, recurrimos a hacer que el módulo y sus dependencias estén disponibles a nivel mundial.

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

Expresiones de función inmediatamente invocadas (IIFE)

Las expresiones de función invocadas de inmediato se pueden usar para crear un ámbito privado mientras se produce una API pública.

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

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

Vea el patrón del módulo para más detalles.

Definición de módulo asíncrono (AMD)

AMD es un sistema de definición de módulos que intenta solucionar algunos de los problemas comunes con otros sistemas como CommonJS y cierres anónimos.

AMD aborda estos problemas por:

• Registro de la función de fábrica llamando a define (), en lugar de ejecutarla inmediatamente
• Pasar dependencias como una matriz de nombres de módulos, que luego se cargan, en lugar de usar globales
• Solo ejecutando la función de fábrica una vez que todas las dependencias hayan sido cargadas y ejecutadas
• Pasando los módulos dependientes como argumentos a la función de fábrica.

La clave aquí es que un módulo puede tener una dependencia y no retener todo mientras se espera que se cargue, sin que el desarrollador tenga que escribir código complicado.

Aquí hay un ejemplo de 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;
});

Los módulos también pueden omitir el nombre y ser anónimos. Cuando se hace eso, por lo general se cargan por nombre de archivo.

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

También pueden saltar dependencias:

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

Algunos cargadores de AMD admiten la definición de módulos como objetos simples:

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

CommonJS - Node.js

CommonJS es un patrón de modularización popular que se utiliza en Node.js.

El sistema CommonJS se centra en una función require() que carga otros módulos y una propiedad de exports que permite a los módulos exportar métodos de acceso público.

Aquí hay un ejemplo de CommonJS, cargaremos el módulo fs Lodash y 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);
};

También puede exportar una función como el módulo completo usando module.exports :

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

Módulos 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";

Puede encontrar más información sobre los módulos ES6 en el tema Módulos .