Создать функцию для синхронной загрузки файлов JavaScript
В этой статье ТехноФуннель мы поговорим о получении динамической загрузки скриптов. Есть несколько способов загрузить скрипты в наш код. Эта статья посвящена динамической загрузке скриптов и обеспечению синхронной загрузки списка скриптов.
Динамическая загрузка JavaScript
В приведенном ниже коде мы увидим, как скрипт может загружаться динамически. Нам часто требуется, чтобы скрипты загружались динамически. Возможны ситуации, когда скрипт требуется только в определенных условиях. В таких случаях нам нужно загрузить скрипт, когда условие будет выполнено.
В приведенном выше коде мы создаем тег сценария с помощью JavaScript и добавляем тег сценария в тело. Когда сценарий добавляется внутрь тела, он затем выполняется, и объекты и функции становятся доступными для дальнейшего использования.
Затем нам нужно добавить в наш код функциональные возможности для следующей поддержки:
- Управление списком скриптов, которые мы хотим загрузить
- Загружаем скрипт синхронно с сохранением порядка
- Ожидание загрузки предыдущего скрипта.
Зачем нужна синхронная загрузка?
В некоторых случаях загружаемый JavaScript зависит от другого файла JavaScript. Если зависимый JavaScript не загружен, текущий файл JavaScript сломается. Пример «jQuery Ui» зависит от «jQuery», поэтому для использования и загрузки «jQuery Ui» нам необходимо убедиться, что «jQuery» уже загружен в браузере. По этой причине важна синхронная загрузка JavaScript.
Давайте посмотрим, как скрипты могут загружаться динамически синхронно.
Чтобы использовать эту функцию, нам нужно вызвать ее следующим образом:
Объяснение приведенного выше кода:
Вот краткое объяснение приведенного выше кода для последовательной загрузки:
- Мы создали IIFE с именем «sequenceFileLoader» и предоставили функцию «loadScript» из IIFE, которая затем будет доступна для использования извне, например, «sequenceFileLoader.loadScript».
- Мы принимаем список файлов JavaScript в виде массива, который хотим загрузить. Указанный скрипт будет в той же последовательности, в которой он требуется для загрузки. Для каждого скрипта мы выполняем код для его динамической загрузки.
- После того, как мы добавили скрипт в тело HTML. Мы добавили событие «onload», чтобы после загрузки файла он мог рекурсивно вызывать ту же функцию для загрузки следующего скрипта. Таким образом гарантируется, что следующий сценарий будет загружен только после события «onload» текущего сценария.
Таким образом мы можем последовательно загружать скрипт динамически.
Больше контента на plainenglish.io
