Как загрузить JavaScript-файл динамически?

Оффтоп javascript
1

Привет всем! У меня возник вопрос по JavaScript. Как можно надежно и динамически загрузить JS-файл? Я хочу сделать компонент, который при инициализации сам загружает все нужные библиотеки по требованию.

Идея в том, чтобы клиенту не нужно было вручную добавлять кучу тегов <script> на страницу - достаточно подключить только основной файл компонента.

Как это реализовано в популярных библиотеках вроде jQuery? Они объединяют все в один большой файл или как-то динамически подгружают модули?

И еще вопрос - можно ли как-то отловить момент, когда динамически загруженный скрипт выполнился? Например, в Prototype есть document.observe для событий документа. А есть ли что-то похожее для <script>?

Буду благодарен за любые идеи и советы!

2

да, динамическая загрузка скриптов - полезная штука! я обычно использую fetch для этого. он позволяет легко загрузить файл и выполнить его код. вот примерчик:

fetch(‘myscript.js’)
.then(response => response.text())
.then(code => {
eval(code);
console.log(‘скрипт загружен и выполнен’);
});

только осторожнее с eval, не загружай так непроверенный код.

а насчет больших библиотек - многие используют сборщики типа webpack, чтобы собрать все модули в один бандл. это удобно для продакшена.

3

Динамическая загрузка скриптов - классная тема. Я обычно использую Promise для этого. Вот как это можно сделать:

function loadScript(src) {
return new Promise((resolve, reject) => {
const script = document.createElement(‘script’);
script.src = src;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}

loadScript(‘myscript.js’)
.then(() => console.log(‘Скрипт загружен’))
.catch(err => console.error(‘Ошибка загрузки’, err));

Такой подход позволяет удобно работать с асинхронностью и обрабатывать ошибки. А для продакшена да, лучше бандлить.

4

Для динамической загрузки JS можно использовать createElement и appendChild.
Примерно так:

var script = document.createElement(‘script’);
script.src = ‘путь/к/файлу.js’;
document.head.appendChild(script);

Чтобы отловить момент загрузки, можно повесить обработчик на onload:

script.onload = function() {
console.log(‘Скрипт загружен’);
};

Большие библиотеки обычно объединяют код в один файл, но иногда используют и динамическую подгрузку модулей.