如何通过自执行函数动态加载jQuery，有没有相关实现优化建议？

• document.querySelector("head") 返回的是单个DOM元素，不是集合，后面加[0]会直接返回undefined，后续操作直接报错
• 逻辑完全倒置：if分支判断head.classList.contains("En-Script") == true，也就是已经存在该类的时候才执行添加类、加载脚本的逻辑，反而不存在类的else分支打印「类已添加」的日志，完全不符合预期
• appendChild传入的是字符串"script"，不是你提前创建的script DOM对象，脚本根本不会被插入到页面中
• 动态加载脚本是异步行为，代码直接在后续调用$(document).ready()，此时jQuery还未加载完成，一定会抛出$ is not defined的错误
• 冗余DOM查询：已经拿到了head对象，不需要再单独查询.En-Script对应的元素，直接操作head即可
• 没有脚本加载成功/失败的回调处理，无法感知jQuery是否真的加载完成

(function() {
  // 直接获取head元素
  const head = document.querySelector("head");
  // 先判断是否已经加载过jQuery，避免重复加载
  if (window.jQuery) {
    console.log("jQuery已存在，无需重复加载");
    initAfterJQueryLoad();
    return;
  }
  // 修正逻辑：不存在En-Script类的时候才执行加载逻辑，避免重复加载脚本
  if (!head.classList.contains("En-Script")) {
    head.classList.add("En-Script");
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "./jquery-3.6.0.min.js";
    // 加载成功回调
    script.onload = function() {
      console.log("jQuery加载成功");
      initAfterJQueryLoad();
    };
    // 加载失败回调
    script.onerror = function() {
      console.error("jQuery加载失败，请检查路径是否正确");
    };
    head.appendChild(script);
  } else {
    console.log("已触发过jQuery加载逻辑，无需重复执行");
  }

  // 所有需要依赖jQuery的逻辑都放到这个函数里执行
  function initAfterJQueryLoad() {
    $(document).ready(function() {
      console.log("jquery added successfully");
      // 这里写其他依赖jQuery的业务逻辑
    });
  }
})();

• 增加了jQuery存在性校验，避免重复加载已有的jQuery
• 修正了类判断的逻辑，只有未添加过标记类的时候才执行加载逻辑，避免重复插入脚本
• 新增onload、onerror回调监听脚本加载状态，所有依赖jQuery的逻辑都在加载完成后执行，避免找不到$的报错
• 移除了冗余的DOM查询，直接操作已获取的head元素
• 修正了appendChild的传参错误，传入创建的script对象而非字符串

内容的提问来源于stack exchange，提问作者Ahad