Каковы преимущества использования AMD, таких как модули requirejs или commonjs в javascript?

Question

Я прочитал много статей о решениях AMD, таких как RequireJS или загрузчики модулей, которые следуют стилю CommonJS в Javascript.

Допустим, у меня есть приложение, разделенное на эти части:

• Определение приложения, которое опирается на структуру, которую я использую
• Модель 1, основанная на определении и структуре приложения
• Модель 2, основанная на определении приложения, Модель 1 и моя структура

Я могу написать каждую часть в виде модуля RequireJS или обычного JS-модуля и разделить свой проект на количество файлов, которое мне нужно, но каково преимущество записи каждой части в виде модуля или разбиения их на несколько файлов, а затем загрузить их в правильном порядке (чтобы избежать проблем с зависимостями), возможно, объединить все файлы в один большой, чтобы уменьшить HTTP-запросы (как это сделано оптимизатором r.js)?

Answer 1

На мой взгляд, есть три довольно важные причины:

Вы можете создавать и повторно использовать модули, не загрязняя глобальное пространство имен. Чем более загрязнено ваше глобальное пространство имен, тем больше вероятность столкновения функции / переменной. Это означает, что вы определяете функцию с именем "foo", а другой разработчик определяет функцию "foo" = одна из функций перезаписывается.

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

Вы можете построить для производства. RequireJS поставляется с собственным инструментом сборки R.JS, который объединяет и расширяет ваши модули javascript в один (или несколько) пакетов. Это улучшит скорость вашей страницы, так как пользователю придется делать меньше вызовов скриптов и загружать меньше контента (так как ваш JS увеличен).

Вы можете взглянуть на этот простой демонстрационный проект: https://c9.io/peeter-tomberg/requirejs (в cloud9ide).

Чтобы собрать ваши модули в одно приложение, вам нужно только установить пакет requirejs npm и запустить команду: r.js -o build/build.properties.js

Если есть какие-либо вопросы, задавайте.

Редактировать:

При разработке все модули в отдельных файлах - это просто хороший способ структурировать и управлять вашим кодом. Это также поможет вам в отладке (например, ошибка в "Module.js line 17" вместо "scripts.js line 5373").

Для производства вы должны использовать инструмент сборки, чтобы объединить и вывести javascript в один файл. Это поможет странице быстрее загружаться, поскольку вы делаете меньше запросов. Каждый ваш запрос на загрузку чего-либо замедляет вашу страницу. Чем медленнее ваша страница, тем меньше очков дает вам Google. Чем медленнее страница, тем больше разочаровываются ваши пользователи. Чем медленнее ваша страница, тем меньше продаж вы получите.

Если вы хотите узнать больше о производительности веб-страницы, посетите http://developer.yahoo.com/performance/rules.html