Модульное программирование используется для разбиения больших приложений на более мелкие блоки управляемого кода. Модульное кодирование облегчает обслуживание и увеличивает возможность повторного использования. Однако управление зависимостями между модулями является основной проблемой, с которой сталкиваются разработчики на протяжении всего процесса разработки приложений. RequireJS — одна из самых популярных платформ для управления зависимостями между модулями. В этом руководстве рассматривается необходимость модульного кода и показывается, как может помочь RequireJS.
Загрузка файлов JavaScript
Большие приложения часто требуют нескольких файлов JavaScript. Как правило, они загружаются один за другим с помощью тегов <script> Кроме того, каждый файл может потенциально зависеть от других файлов. Наиболее распространенным примером являются плагины jQuery, которые зависят от базовой библиотеки jQuery. Поэтому jQuery должен быть загружен перед любым из его плагинов. Давайте рассмотрим простой пример загрузки файлов JavaScript в реальных приложениях. Предположим, у нас есть следующие три файла JavaScript.
purchase.js
function purchaseProduct(){
console.log("Function : purchaseProduct");
var credits = getCredits();
if(credits > 0){
reserveProduct();
return true;
}
return false;
}
products.js
function reserveProduct(){
console.log("Function : reserveProduct");
return true;
}
credits.js
function getCredits(){
console.log("Function : getCredits");
var credits = "100";
return credits;
}
В этом примере мы пытаемся приобрести продукт. Во-первых, он проверяет, достаточно ли кредитов для покупки продукта. Затем, после подтверждения кредита, он резервирует продукт. Другой скрипт, main.jspurchaseProduct()
var result = purchaseProduct();
Что может пойти не так?
В этом примере purchase.jscredits.jsproducts.js Поэтому эти файлы необходимо загрузить перед вызовом purchaseProduct() Итак, что произойдет, если мы включим наши файлы JavaScript в следующем порядке?
<script src="products.js"></script>
<script src="purchase.js"></script>
<script src="main.js"></script>
<script src="credits.js"></script>
Здесь инициализация выполняется до credits.js Это приведет к ошибке, показанной ниже. И этот пример требует только три файла JavaScript. В гораздо большем проекте все может легко выйти из-под контроля. Вот где RequireJS входит в картину.
Введение в RequireJS
RequireJS — это хорошо известный модуль JavaScript и загрузчик файлов, который поддерживается в последних версиях популярных браузеров. В RequireJS мы разделяем код на модули, каждый из которых выполняет одну ответственность. Кроме того, зависимости должны быть настроены при загрузке файлов. Давайте начнем с загрузки RequireJS . После загрузки скопируйте файл в папку вашего проекта. Давайте предположим, что структура каталогов нашего проекта теперь напоминает следующее изображение.
Все файлы JavaScript, включая файл RequireJS, находятся внутри папки scripts Файл main.js Давайте посмотрим, как скрипты включены в HTML-файл.
<script data-main="scripts/main" src="scripts/require.js"></script>
Это единственный код, необходимый для включения файлов с использованием RequireJS. Вам может быть интересно, что случилось с другими файлами и как они включены. Атрибут data-main В данном случае это main.js RequireJS использует main.js В этом случае все файлы находятся в одной папке. Используя логику, вы можете переместить файлы в любую папку, которую вы предпочитаете. Теперь давайте посмотрим на main.js
require(["purchase"],function(purchase){ purchase.purchaseProduct(); });объявление оrequire()
В RequireJS весь код заключен в функции define()purchase.js Первый параметр этих функций определяет зависимости. В предыдущем примере инициализация зависит от purchaseProduct().js Обратите внимание, что расширение файла было опущено. Это потому, что RequireJS рассматривает только файлы require()
Второй параметр require(["a","b","c"],function(a,b,c){ В этом сценарии у нас есть только одна зависимость. Несколько зависимостей могут быть загружены с использованием следующего синтаксиса.
});
main.js
Создание приложений с помощью RequireJS
В этом разделе мы собираемся преобразовать простой пример JavaScript, рассмотренный в предыдущем разделе, в RequireJS. Мы уже рассмотрели purchase.js
define(["credits","products"], function(credits,products) {
console.log("Function : purchaseProduct");
return {
purchaseProduct: function() {
var credit = credits.getCredits();
if(credit > 0){
products.reserveProduct();
return true;
}
return false;
}
}
});
return
Во-первых, мы заявляем, что функциональность покупки зависит от кредитов и продуктов. Внутри оператора getCredits() Здесь мы вызвали функции reserveProduct()product.js credits.jsproducts.js
define(function(products) {
return {
reserveProduct: function() {
console.log("Function : reserveProduct");
return true;
}
}
});
credits.js
define(function() {
console.log("Function : getCredits");
return {
getCredits: function() {
var credits = "100";
return credits;
}
}
});
define()
Оба этих файла настроены как независимые модули, то есть они не зависят ни от чего. Важная вещь, на которую следует обратить внимание, — это использование require()require() Выбор между define()require()
Использование define()require()
Ранее я упоминал, что мы можем использовать и define()require() Понимание различий между этими двумя функциями важно для управления зависимостями. Функция define()purchaseProduct() В нашем примере нам нужно немедленно запустить функцию require() Итак, main.jsdefine() Однако другие файлы являются модулями многократного использования и поэтому используют credits.js
Почему RequireJS важен
В простом примере JavaScript была сгенерирована ошибка из-за неправильного порядка загрузки файла. Теперь удалите файл credits.js в примере RequireJS и посмотрите, как он работает. На следующем изображении показаны результаты работы инструмента проверки браузера.
Разница здесь в том, что в примере RequireJS не было выполнено ни одного кода. Мы можем подтвердить это, так как на консоли ничего не напечатано. В простом примере JavaScript у нас был вывод на консоль перед генерацией ошибки. RequireJS ждет, пока все зависимые модули будут загружены, прежде чем выполнять функциональность. Если какие-либо модули отсутствуют, он не выполняет никакого кода. Это помогает нам поддерживать согласованность наших данных.
Управление порядком зависимых файлов
RequireJS использует асинхронную загрузку модулей (AMD) для загрузки файлов. Каждый зависимый модуль начнет загрузку через асинхронные запросы в указанном порядке. Несмотря на то, что порядок файлов учитывается, мы не можем гарантировать, что первый файл будет загружен раньше второго из-за асинхронного характера. Итак, RequireJS позволяет нам использовать конфигурацию shim для определения последовательности файлов, которые должны быть загружены в правильном порядке. Давайте посмотрим, как мы можем создать параметры конфигурации в RequireJS.
shim
RequireJS позволяет нам предоставлять параметры конфигурации с помощью функции requirejs.config({ Он принимает параметр с именем
shim: {
'source1': ['dependency1','dependency2'],
'source2': ['source1']
}
});config() Вы можете найти полное руководство по настройке в документации по API RequireJS .
shim
При нормальных обстоятельствах эти четыре файла начнут загружаться в указанном порядке. Здесь define(["dependency1","dependency2","source1","source2"], function() {
);source2 Итак, как только source1source1 Однако, source2dependency1 Используя конфигурацию dependency2source1 Следовательно, ошибки не будут генерироваться.
Вывод
Я надеюсь, что это руководство поможет вам начать работу с RequireJS. Хотя это кажется простым, он действительно эффективен в управлении зависимостями в крупномасштабных приложениях JavaScript. Одного этого учебного пособия недостаточно, чтобы охватить все аспекты RequireJ, поэтому я надеюсь, что вы изучите все расширенные конфигурации и методы, используя официальный веб-сайт.
И если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, например, просто JavaScript .
Комментарии к этой статье закрыты. У вас есть вопрос о JavaScript? Почему бы не спросить об этом на наших форумах ?