Философия AMD, RequireJs и модульная разработка веб-приложений на JavaScript

Разделяй и влавствуй - подход на все времена. Концепция модульного программирования не нова, и хорошо себя зарекомендовала. В мире разработки web-приложений на JavaScript существует подход Asynchronous Module Definition или AMD, который

specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded [1]

т.е. по сути определяет API, следуя которому можно реализовать асинхронную загрузку самих модулей и их зависимостей. Следуя этому подходу, непроизвольно создаешь более элегантные решения, но это всего лишь бонусный побочный эффект. Главное - уменьшается хаос js-кода, сложность разработки и поддержки приложения. Каждый модуль явно указывает свои зависимости и получает только их, работая изолированно, что означает минимум мусора глобальной области видимости.
Всё, что нужно, чтобы начать использовать AMD подход в проекте, - это загрузчик, который знает, что такое AMD-модуль, и умеет подгружать зависимости.  Итак,

Require.js

Ключевым объектом в Require.js, как и в AMD-философии в целом, является модуль. Опеределяется модуль с помощью функции define: 

define("<module_name>",
        ["dependency1", "dependency2],
        function(dependency1, dependency2) {            
       }
    );

Метод, который идёт последний аргументом в списке,  - это фабрика, которая создает и возвращает сам модуль. Фабрика выполняется только после загрузки всех зависимостей, указанных во втором аргументе. Модули, указанные как зависимости, ищутся в той же папке, где находится и сам Require.Js (подробнее на теме загрузки модулей я останавлюсь ниже).  Ппервый аргумент - это имя модуля. Всё вроде просто. Значит, надо создать свой модуль в AMD-стиле! Выходя за рамки учебных простых примеров, создадим что-то более близкое к задачам из реальной жизни. Например, мне нужен объект, который умеет строить календарь на указанный месяц и год и отмечать в нём даты.

//zeitproject.calendar.js
define(
    'calendar',
    ['jquery'],
    function( $ ){      
        function Calendar()
        {
            var self = this;
            self.builCalendar = function(month, year)
            {
               var body = "";
               //неинтересные детали
               return body;
            }
            self.markDays = function(days_array, css_class, calendar)
            {               
               //неинтересные детали
            }           
        };
        return new Calendar();
    }
);

Из зависимостей - только jquery (ну куда без него!). Знак $ в параметрах функции-фабрики - конечно же, ссылка на jquery. Фабрика возвращает экземпляр класса Calendar, объявленного в внутри самой фабрики, что ограничивает область видимости класса. А куда и кому она возвращает объект? Туда, откуда кем-то была вызвана. А кем и когда она была вызвана? А вызвана она могла быть, когда модуль попал в чей-то список зависимостей, и Require.Js пытается подгрузить модуль. Продолжая пример, Calendar.js является одной из зависимостей в app.js:

//app.js
require(["jquery", "calendar", "tooltip"], function($, calendar, tooltip) {  
    //init vars
    //...//
              
    calendar.builCalendar(month, year, $('.calendar'));
    calendar.markDays(days[i][0], days[i][1], $('.calendar'));
    tooltip.init();
});

app.js - это точка входа в наше приложение. В нём конфигурируется Require.Js и инициализируется логика приложения. Это тот единственнй javascript-файл, который подгружается через Require.Js в index.html. Путь к нему указывается в атрибуте data-main:

<script data-main="/js/app" src="/js/require-jquery.js"></script>
Для краткости расширение .js можно не указывать.
Конечно, тут есть маленькая хитрость - в примере подгружается Require.Js сразу в связке с jquery, поэтому не нужно отдельно подгружать jquery.

Ручная настройка

Require.Js - гибкая легконастраиваемая штука. Например, нужно настроить загрузку AMD-модулей для такой структуры каталогов:

Для этого в app.js перед вызовом require() нужно сконфигурировать Require.Js.
require.config({
    baseUrl: "/js",
    paths: {
        "calendar" : "zeitproject.calendar",
        "jquery"   : "require-jquery",
        "formatter": "/utils/formatter",
        "tooltip"  : "/controls/zeitproject.tooltip",
        "tiptip"   : "/controls/jquery.tiptip.min"    }
  });

Всё довольно интуитивно: baseUrl - корневая папка, относительно которой указываются все последующие пути. Дальше указывается имя AMD-модуля (имя мы указывали в методе define() первым аргументом во время определения модуля). А что, если нужно подгрузить не AMD-модуль, который добавляет в глобальное пространство имён переменные? По сути, таким модулем может быть любой jquery-плагин. Или, даже, фреймворк: тот же Backbone.js является AMD-несовместимым. Не переписывать же его под AMD-сигнатуру?! Для этого в конфиге есть специальный раздел shim (наверно, имелось в виду "shame, не AMD-модуль!"):

require.config({
    baseUrl: "/js",
    paths: {
/*...*/
        "tiptip"  : "/controls/jquery.tiptip.min",
        "tooltip" : "/controls/zeitproject.tooltip"
    },
    shim: {
        'tiptip' : {
            deps: ['jquery'],
            exports: 'tiptip'
        }
    }
  });

В shim-секции определяется, какие зависимости есть у не AMD-модуля и псевдоним, под которым его можно указывать в списке зависимостей AMD-модулей.

//zeitproject.tooltip.js
define("tooltip", ["jquery", "tiptip"], function($){
    function Tooltip()
    {
/*..*/
}); 

Вот и всё. Модули изолированы друг от друга, и знают лишь о существовании тех, без которых не могут работать. Это позволяет держать под контролем зависимости и облегчает жизнь. Надеюсь, вы прониклись Require.js и AMD-подходом к разработке веб-приложений.

Ссылки

http://requirejs.org официальный сайт require.js, отличная документация и примеры
AMD - описание API