使用 Jquery 追加所有 Js 文件的正确方法是什么

what is the right way to append all Js files using Jquery append

我正在尝试使用此视频@3:30 中解释的方法加载所有 js 文件Optimize your code: load code at the right time

我已经在 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?

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);
  }
});

编辑:如果您需要按特定顺序加载脚本。您可以使用“加载”事件来启动下一个。请参阅下面的代码段

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);
}