[HTML/CSS/JS] 如何实现动态加载Javascript 文件模块

复制代码
import * from "https://cdn.skypack.dev/jquery";

复制代码
const button = document.getElementById("btn");
button.addEventListener("click", e => {
  import('https://cdn.skypack.dev/jquery')
    .then(module => window.$ = module.default)
    .then(makeBgOrangeWithJquery)
    .catch(err => { alert(err) });
});

const makeBgOrangeWithJquery = ()=> {
  $("body").css("background-color", "orangered");
}

复制代码
button.addEventListener("click", e => {
    import('https://cdn.skypack.dev/jquery')
    .then(module => {
        window.$ = module.default;
    })
    .then(makeBgOrangeWithJquery)
    .catch(err => { alert(err) });
});

复制代码

function loadJS(url, success) {
  var domScript = document.createElement('script');
  domScript.src = url;
  success = success || function () {};
  domScript.onload = domScript.onreadystatechange = function () {
    if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
      success();
      this.onload = this.onreadystatechange = null;
      this.parentNode.removeChild(this);
    }
  }
  document.getElementsByTagName('head')[0].appendChild(domScript);
}
loadJS('https://cdn.skypack.dev/jquery',function(){
  //加载成功执行
});