ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70%Забронировать скидку

Использование jQuery $.getScript() для загрузки нескольких JS-файлов

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию
В конце подарим скидку до 55% на обучение
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Для последовательной загрузки нескольких JS файлов рекомендуется использовать вложенные вызовы посредством метода jQuery $.getScript(), это делается так:

JS
Скопировать код
$.getScript("first.js", function() {
  $.getScript("second.js", function() {
    $.getScript("third.js", console.log.bind(console, "Все скрипты загружены. Пора на перерыв за чашечкой кофе! ☕"));
  });
});

Такой метод гарантирует соблюдение последовательности: каждый следующий скрипт начинает загрузку только после успешной загрузки предыдущего.

Пройдите тест и узнайте подходит ли вам сфера IT
Пройти тест

Освойте управление несколькими JS файлами!

Используйте промисы с $.getScript()

Для загрузки множества скриптов целесообразно использовать промисы в jQuery. Создавайте цепочки промисов, чтобы контролировать порядок выполнения скриптов, особенно если они зависимы друг от друга.

JS
Скопировать код
$.getScript("first.js").then(function() {
  // first.js загружен, приступаем к загрузке second.js
  return $.getScript("second.js");
}).then(function() {
  // second.js загружен, теперь загружаем third.js
  return $.getScript("third.js");
}).done(function() {
  console.log("Все скрипты успешно загружены последовательно, словно домино! \ud83d\ude38");
}).fail(function(jqXHR, settings, exception) {
  console.error("Загрузка скрипта не удалась: " + exception + ". Наступил апокалипсис!");
});

Объединяем скрипты с помощью $.when()

Когда требуется дождаться одновременного завершения загрузки всех скриптов, используйте функцию $.when() от jQuery. Этот метод полезен в том случае, если все скрипты независимы и порядок их загрузки несущественен.

JS
Скопировать код
$.when(
  $.getScript("first.js"),
  $.getScript("second.js"),
  $.getScript("third.js")
).done(function() {
  console.log("Все скрипты загружены одновременно. Скорость света потянуло на блок! 🚀");
}).fail(function() {
  console.error("Произошла ошибка: не все скрипты загрузились.");
});

Обработка ошибок — тихий герой

Добавьте обработчик .fail(), чтобы адекватно реагировать на ошибки загрузки, вместо того чтобы просто игнорировать их.

JS
Скопировать код
$.getScript("first.js").then(function() {
  return $.getScript("second.js");
}).then(function() {
  return $.getScript("third.js");
}).done(function() {
  console.log("Все скрипты загружены. Заслуженный перерыв за чашечкой кофе!");
}).fail(function() {
  console.error("Ошибка загрузки скриптов. Время для дополнительной порции кофе...");
});

Менеджер скриптов — ваш верный помощник

Создайте функцию для повторного использования, которая будет загружать массив URL скриптов, при необходимости позволяя указывать путь до них. Это избавит вас от необходимости вводить однотипный код каждый раз.

JS
Скопировать код
function loadScripts(scriptNames, path = "") {
  var promises = scriptNames.map(script => $.getScript(path + script));
  return $.when(...promises);
}

loadScripts(["first.js", "second.js", "third.js"], "/path/to/my-scripts/").done(function() {
  console.log("Менеджер скриптов сообщает: все скрипты успешно загружены!");
});

Визуализация

Визуализируйте последовательное подключение JavaScript-файлов с помощью $.getScript(), представляя себе это как поезд, подхватывающий вагоны на промежуточных станциях:

Markdown
Скопировать код
🚂💨 [📦1️⃣] -> [📦2️⃣] -> [📦3️⃣] ...

Пример последовательной загрузки через $.getScript():

JS
Скопировать код
$.getScript('script1.js', function() {
  // script1.js загружен, приступим к загрузке script2.js!
  $.getScript('script2.js', function() {
    // script2.js на борту, отправляемся за script3.js!
    $.getScript('script3.js', function() {
      // Все скрипты на месте, задача выполнена!
    });
  });
});

Как и поезд, каждый вызов $.getScript() ожидает завершения предыдущего, чтобы продолжить движение по маршруту.

Улучшение пути

Следите за прогрессом: не оставайтесь в неведении

Отслеживание прогресса загрузки особенно важно, когда речь идёт о большом числе скриптов. Простой счётчик поможет контролировать процесс и держать вас в курсе происходящего:

JS
Скопировать код
function loadScripts(scripts, progressCallback) {
  var loaded = 0;
  scripts.forEach(function(script) {
    $.getScript(script).then(function() {
      progressCallback(++loaded / scripts.length);
    });
  });
}

loadScripts(["script1.js", "script2.js", "script3.js"], function(progress) {
  console.log(`Прогресс загрузки: ${(progress * 100).toFixed(2)}%. ${progress === 1 ? 'Загрузка выполнена 🏁' : 'Продолжает идти ⌛'}`);
});

Смешиваем последовательную и параллельную загрузку

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

JS
Скопировать код
$.getScript("main.js", function() {
  $.when($.getScript("utils.js"), $.getScript("template.js")).done(function() {
    $.getScript("app.js", function() {
      console.log("Все нужные скрипты загружены. Готовы к старту!");
    });
  });
});

Кросс-доменные запросы на скрипты

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

JS
Скопировать код
$.ajaxSetup({
  crossDomain: true
});

$.getScript("//another-domain.com/script.js", function() {
  console.log("Кросс-доменный скрипт успешно загружен. Мы работаем на международном уровне.");
});

Полезные материалы

  1. jQuery.getScript() | Документация jQuery API – официальное описание метода jQuery для динамического подключения скриптов.
  2. Как подключить JavaScript-файл внутри другого JavaScript-файла? – Stack Overflow – обсуждение различных техник асинхронной загрузки скриптов с примерами.
  3. Введение в асинхронный JavaScript – Учебный сайт MDN – подробное изучение концепций асинхронного JavaScript.
  4. Оптимизация загрузки сторонних скриптов – Статьи на web.dev – рекомендации по ускорению загрузки скриптов.
  5. Промисы в JavaScript: введение – Статьи на web.dev – всё, что нужно знать о промисах в JavaScript для оптимизации процесса загрузки.
  6. Атрибут async для тега script в HTML – описание работы атрибута async для асинхронной загрузки скриптов.