Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Что такое RequireJS и что с этим делать?

Для начала давайте разберемся с основами. Думаю, что всем известен классический способ подгрузки JS файлов с использование <script> тегов. Этим способом мы пользуемся уже очень давно и скорее всего будем продолжать. Однако, при этом есть ряд минусов, на которые вы наверняка уже обратили внимание:

Таким образом для эффективной работы явно нужен другой подход – более динамичный, подходящий для сложных, разветвленных проектов с большим числом зависимостей. Такое решение как раз и предоставляет библиотека RequireJS. RequireJS использует асинхронную модель подгрузки зависимостей – AMD.

requirejs

AMD вкратце можно описать следующей формулой, которая объявляет ваш модуль:

Что же происходит, когда мы объявляем свой модуль, который зависит от сторонних библиотек:

Код выше дает команду RequireJS подгрузить две дополнительные библиотеки (если они еще не были до этого загружены). Никакой магии подгрузка осуществляется стандартными технологиями браузера:

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

Или функция:

Можно также использовать модуль для хранения и передачи набора констант. В этом случае можно не объявлять функцию, а просто передать объект с данными:

Впрочем модуль может вообще ничего не возвращать, это не является обязательным условием.

define vs require

Прежде чем я продолжу стоит остановиться и поговорить об отличии двух основных функций в инструментарии RequireJS, это define и require. Вполне возможно, что для глубокого понимания, вам стоит прочитать документацию, однако у меня есть краткое объяснение, которое вполне охватывает всю суть.

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

Конфигурация RequireJS

Мы поговорили о базовом использовании RequireJS, теперь давайте посмотрим как правильно настроить эту библиотеку.

Предположим, что наше приложение имеет следующую структуру папок:

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

Для часто используемых модулей стоит прописать пути в конфигурации и использовать короткое имя вместо описания всего пути:

Shim

Следующий важный момент – это подгрузка библиотек, которые не написаны в методологии AMD, например backbone и underscore. В этом случае у RequireJS есть инструмент для работы именно с такими библиотеками – shim (клин, или что-то в этом духе ^_^)

Запуск приложения

При всем количестве новых терминов – модули, зависимости, особенности конфигурации; остается непонятным самое важное – как же запускать приложение? Один из вариантов поступить следующим образом – добавить файл конфигурации в тег <script> вместе с require.js

А уже в самом config.js определить основной файл вашего приложения – main.js:

Ссылки по теме:
Asynchronous module definition
RequireJS

Поделиться:
comments powered by Disqus