QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

手机号码,快捷登录

手机号码,快捷登录

查看: 2231|回复: 0

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

[复制链接]

等级头衔

积分成就    金币 : 2851
   泡泡 : 1516
   精华 : 6
   在线时间 : 1301 小时
   最后登录 : 2024-12-4

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老活跃会员

联系方式
发表于 2021-11-10 10:22:05 | 显示全部楼层 |阅读模式
       前端开发中仅在需要时的时候加载 JavaScript 模块。这样可以提供很大的性能,比如:您有一个组件,例如复杂的视频播放器,它可以使用大量 js,并且该视频仅在用户单击它时才会启动。那么在这种情况下,用户甚至可能永远不会单击播放按钮,因此仅在需要时才加载该js模块。
) c! i, k; C% k8 Y 1.jpg 6 i$ r* r: i, V$ U1 j9 `
       因此,不要像这样使用顶级默认声明:
) \* b9 j3 v( a; S
import * from "https://cdn.skypack.dev/jquery";
      只是在需要的时候加载,代码如下:6 C& A% |  p+ s% F# X% j( z) v9 R& s
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");
}
      您甚至可以将它与加载指示器之类的东西一起使用:
- h/ ^4 n1 E, O
button.addEventListener("click", e => {
    import('https://cdn.skypack.dev/jquery')
    .then(module => {
        window.$ = module.default;
    })
    .then(makeBgOrangeWithJquery)
    .catch(err => { alert(err) });
});
      当然,如果您的所有页面都依赖于像 jQuery 或 react 这样的库,那么动态导入该库就没有太大意义。目前es6中的import,export浏览器已经支持。在老版本浏览器中是不支持import的,但是我们可以自己来实现import方法:- }5 ?% A) K3 U/ q' x( @0 V
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(){
  //加载成功执行
});
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2024-12-4 04:39

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表