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


Ejemplo

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