Концепция AMD. Понятие модуля

Общие положения

Начиная с версии 7.0, клиентская часть приложения bpm'online имеет модульную структуру, то есть реализована в виде набора блоков функциональности, каждый из которых реализован в отдельном модуле. В процессе работы приложения загрузка модулей и их зависимостей выполняется в соответствии с подходом Asynchronous Module Definition (AMD).

По сути, подход AMD декларирует механизм определения и асинхронной загрузки модулей и их зависимостей, который позволяет в процессе работы с системой подгружать только те данные, которые необходимы для работы в текущий момент. Концепцию AMD поддерживают различные JavaScript-фреймворки. В bpm'online для работы с модулями используется загрузчик RequireJS.

Понятие модуля

Понятие модуль можно сформулировать как фрагмент кода, инкапсулированный в обособленный блок, который может быть загружен и выполнен самостоятельно.

Создание модулей в специфике JavaScript декларируется паттерном программирования "Модуль". Классическим приемом реализации этого паттерна является использование анонимных функций, возвращающих определенное значение (объект, функцию и т.д.), которое ассоциируется с модулем. При этом значение модуля экспортируется в глобальный объект. Например:

// Немедленно вызываемое функциональное выражение (IIFE). Aнонимная функция,
// которая инициализирует свойство myGlobalModule глобального объекта функцией,
// возвращающей значение модуля. Таким образом, фактически происходит загрузка модуля, 
// к которому в дальнейшем можно обращаться через глобальное свойство myGlobalModule.
(function () {
    // Обращение к некоторому модулю, от которого зависит текущий модуль.
    // Этот модуль уже (на момент обращения к нему) 
    // должен быть загружен в глобальную переменную SomeModuleDependency.
    // Контекcт this в данном случае — глобальный объект.
    var moduleDependency = this.SomeModuleDependency;
    // Объявление в свойстве глобального объекта функции, возвращающей значение модуля.
    this.myGlobalModule = function () { return someModuleValue; };
}());

Интерпретатор, обнаруживая в коде такое функциональное выражение, сразу вычисляет его. В результате выполнения в свойство myGlobalModule глобального объекта будет помещена функция, которая будет возвращать само значение модуля.

Основные недостатки такого подхода заключаются в сложности декларирования и использования модулей-зависимостей для таких модулей:

1. В момент выполнения анонимной функции все зависимости модуля должны быть уже загружены ранее.
2. Загрузка модулей-зависимостей выполняется через HTML-элемент <script><script/> в заголовке страницы, и обращение к ним в дальнейшем осуществляется через имена глобальных переменных. При этом разработчик должен четко представлять и реализовывать порядок загрузки всех модулей-зависимостей.
3. Как следствие предыдущего пункта — модули загружаются до начала рендеринга страницы, поэтому в модулях нельзя обращаться к элементам управления страницы для реализации какой-либо пользовательской логики.

Таким образом, это, по сути, означает отсутствие возможностей динамической загрузки модулей, применения какой-либо дополнительной логики при загрузке модулей и т.д. В крупных проектах, каким является bpm'online, возникает дополнительная проблема в виде сложности управления большим количеством модулей со многими зависимостями, которые могут перекрывать друг друга.

Загрузчик RequireJS

Загрузчик RequireJS предоставляет механизм объявления и загрузки модулей, базирующийся на концепции AMD, и позволяющий избежать перечисленных выше недостатков. Основные принципы работы механизма загрузчика RequireJS:

1. Объявление модуля выполняется в специальной функции define(), которая регистририрует функцию-фабрику для инстанцирования модуля, но при этом не загружает его немедленно в момент вызова.
2. Зависимости модуля передаются как массив строковых значений, а не через свойства глобального объекта.
3. Загрузчик выполняет загрузку всех модулей-зависимостей, переданных в качестве аргументов в define(). Модули загружаются асинхронно, при этом фактически порядок их загрузки определяется загрузчиком произвольно.
4. После того как загрузчиком будут загружены все указанные зависимости модуля, будет вызвана функция-фабрика, которая вернет значение модуля. При этом в функцию-фабрику в качестве агрументов будут переданы загруженные модули-зависимости.

Объявление модуля. Функция define()

Для того чтобы загрузчик мог работать с асинхронным модулем, этот модуль должен быть объявлен в исходном коде с помощью функции define() следующим образом.

define(
        ModuleName,
        [dependencies],
        function (dependencies) {
        }
);

Параметры функции define() приведены в таблице 1.

Табл. 1. — Параметры функции define()

Пример использования функции define() для объявления модуля SumModule, реализующего функциональность суммирования двух чисел.

// Модуль с именем SumModule не имеет зависимостей.
// Поэтому в качестве второго аргумента передается пустой массив, а 
// анонимной функции-фабрике не передаются никакие параметры.
define("SumModule", [], function () {
    // Тело анонимной функции содержит в себе внутреннюю реализацию функциональности модуля.
    var calculate = function (a, b) { return a + b; };
    // Возвращаемое функцией значение — объект, которым является модуль для системы.
    return {
        // Описание объекта. В данном случае модуль представляет собой объект со свойством summ.
        // Значение этого свойства — функция с двумя аргументами, которая возвращает сумму этих аргументов. 
        summ: calculate
    };
});

Функция-фабрика возвращает в качестве значения модуля объект, которым модуль будет являться для системы.