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

Question

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

我在 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 头标签中

 <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？

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

编辑：如果您需要以特定顺序加载脚本。您可以使用“加载”事件来启动下一个。见下面的sn-p

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