AMD

AMD (Asynchronous Module Definition) был ответом тем, кто считал, что система модулей CommonJS не готова к использованию в браузере из-за своей синхронной природы.

AMD определяет стандарт для модульного JavaScript, позволяющий модулям загружать свои зависимости асинхронно, устраняя проблемы, связанные с синхронной загрузкой.

Спецификация

Модули определяются с помощью функции define.

define

Функция define используется для определения модулей в AMD. Это просто функция с таким сигнатуром

define(id?: String, dependencies?: String[], factory: Function|Object);

id

Указывает имя модуля. Оно необязательно.

dependencies

Этот аргумент указывает, от каких модулей зависит определяемый модуль. Это массив, содержащий идентификаторы модулей. Он необязателен, но если его опустить, по умолчанию используется [“require”, “exports”, “module”].

factory

Последний аргумент определяет сам модуль. Это может быть функция (которая должна быть вызвана один раз) или объект. Если фабрика — функция, возвращаемое значение будет экспортируемым значением модуля.

Примеры

Давайте рассмотрим несколько примеров:

Именованный модуль

Определяет модуль с именем myModule , который требует jQuery.

define('myModule', ['jquery'], function($) {
    // $ is the export of the jquery module.
    $('body').text('hello world');
});
// and use it
require(['myModule'], function(myModule) {});

Примечание: В webpack именованный модуль доступен только локально. В Require.js именованный модуль доступен глобально.

Анонимный модуль

Определяет модуль без указания его идентификатора.

define(['jquery'], function($) {
    $('body').text('hello world');
});

Несколько зависимостей

Определяет модуль с несколькими зависимостями. Обратите внимание, что каждое экспортируемое значение зависимости будет передано в функцию фабрики.

define(['jquery', './math.js'], function($, math) {
    // $ and math are the exports of the jquery module.
    $('body').text('hello world');
});

Экспортируемое значение

Определяет модуль, который экспортирует себя.

define(['jquery'], function($) {

    var HelloWorldize = function(selector){
        $(selector).text('hello world');
    };

    return HelloWorldize;
});

Использование require для загрузки зависимостей

define(function(require) {
    var $ = require('jquery');
    $('body').text('hello world');
});