Блог

Главная - Вопросы по программированию - как правильно добавлять все Js-файлы с помощью Jquery append

как правильно добавлять все Js-файлы с помощью Jquery append

#javascript #jquery #performance #optimization #render-blocking

#javascript #jquery #Производительность #оптимизация #блокировка рендеринга

Вопрос:

Я пытаюсь загрузить все файлы js, используя подход, описанный в этом видео @ 3:30 Оптимизируйте свой код: загружайте код в нужное время

Я реализовал этот подход в index.js как

 <script>
 var scripts  = '<script src="./js/jquery-3.5.1.min.js"/>' 
  '<script src="./js/jquery-ui.min.js"/>' 
  '<script src="./js/bootstrap.min.js"/>' 
  '<script src="./js/index.js"/>';
    $(window).on("load",function(){
$("body").append(scripts)
});
</script>

также пробовал, как в теге html head

  <script>
 var scripts  = '<script src="./js/jquery-3.5.1.min.js"/>' 
  '<script src="./js/jquery-ui.min.js"/>' 
  '<script src="./js/bootstrap.min.js"/>' 
  '<script src="./js/index.js"/>';
    $(window).on("load",function(){
$("body").append(scripts)
});
</script>

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

Мой вопрос

  1. Действительно ли это лучший подход для загрузки всех скриптов подобным образом и должен соблюдаться постоянно?
  2. Если да, то что мне нужно оптимизировать приведенный выше код, чтобы он загружал целые скрипты и добавлял в html?

Комментарии:

1. Вы не можете использовать $(window).on("load" , если вы еще не загрузили jquery

2. Также теги скрипта, добавленные через append() , не выполняются. Вы должны использовать $.getScript , добавить фактический объект элемента dom скрипта или использовать собственный API

3. затем я должен загрузить jquery и другие файлы в тег script? тогда нет никакой пользы от загрузки только одного внешнего локального файла.

4. Нет, просто jquery — и если вы используете CDN, то есть большая вероятность, что ваш браузер уже кэширует его и обработал — так что загрузка с CDN будет быстрее, чем поздняя загрузка с локального

5. @freedomn-m: мне не разрешено использовать CDN в моих проектах, я должен использовать Jquery, Jquery-UI, Bootstrap4.js и index.js . Я должен добавить все файлы сценариев в head, а затем index.js как добавить?

Ответ №1:

jQuery еще не загружен, поэтому вы не можете его использовать. Поэтому я предлагаю вам использовать ванильное решение javascript. (Добавить как встроенный тег сценария прямо перед закрывающим тегом тела </body> )

 const scripts = [
  "./js/jquery-3.5.1.min.js",
  "./js/jquery-ui.min.js",
  "./js/bootstrap.min.js",
  "./js/index.js",
];

window.addEventListener("DOMContentLoaded", () => {
  for(const script of scripts) {
    const scriptTag = document.createElement("script");
    scriptTag.src = script;
    document.body.appendChild(scriptTag);
  }
});

РЕДАКТИРОВАТЬ: Если вам нужно, чтобы скрипты загружались в определенном порядке. Вы можете использовать событие «load» для запуска следующего. Смотрите фрагмент ниже

 const scripts = [
  "./js/jquery-3.5.1.min.js",
  "./js/jquery-ui.min.js",
  "./js/bootstrap.min.js",
  "./js/index.js",
];

window.addEventListener("DOMContentLoaded", () => loadScript(scripts, 0));

function loadScript(scripts, index) {
  if (!scripts[index]) return;

  const scriptTag = document.createElement("script");
  scriptTag.src = scripts[index];
  scriptTag.addEventListener("load", () => loadScript(scripts, index   1));
  document.body.appendChild(scriptTag);
}

Комментарии:

1. Я должен добавить <script src=»./js/index.js»></script> in html then only it will load all script right ?

2. Нет — вы не помещаете этот скрипт в index.js — вы помещаете его непосредственно на страницу отдельно или загружаете его с <script src тегом , отдельным от файлов, которые вы включаете

3. @amarghodke Нет, вы должны добавить это внутри встроенного тега скрипта непосредственно перед закрывающим тегом </body>

4. После случайного обновления я получаю ошибку, так как неперехваченный ReferenceError: $ не определен в index.js указание на document.ready и еще одна ошибка как Uncaught TypeError: для JavaScript Bootstrap требуется jQuery. jQuery должен быть включен перед Bootstrap JavaScript. в качестве альтернативы возникает ошибка и не работает.

5. @amarghodke Вероятно, это потому, что некоторые скрипты завершаются раньше, чем jQuery. Чтобы решить эту проблему, вы можете использовать load обратный вызов. Смотрите новый фрагмент