Как я могу загрузить несколько скриптов после загрузки страницы?

Question

Я использую следующий код внутри своего HTML для загрузки файла JS после загрузки страницы. (DOMContentLoaded)

<script>
document.addEventListener('DOMContentLoaded', function() {
  var script = document.createElement('script');
  script.src = 'https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js';
  document.getElementsByTagName('body')[0].appendChild(script);
});
</script>

Но мне нужно загрузить несколько скриптов, и я не знаю, как реализовать это для нескольких скриптов.

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/4.0.0/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

Мы будем очень признательны за вашу помощь. Спасибо.

Answer 1

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

Если вы хотите сделать это без загрузчика модулей, то у вас есть правильная идея. Чтобы код было легче читать / короче, вы можете создать массив URL-адресов и перебирать их, добавляя для каждого новый элемент скрипта.

    const jsFiles = [
        'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js',
        'https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.12.4.min.js',
        'https://ajax.aspnetcdn.com/ajax/bootstrap/4.0.0/bootstrap.min.js',
        'https://cdn.jsdelivr.net/npm/sweetalert2@8'
    ]
    jsFiles.forEach((item) => {
        const scriptEle = document.createElement('script');
        scriptEle.src = item;
        document.head.appendChild(scriptEle);
    })