QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

查看: 2553|回复: 0

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

[复制链接]

等级头衔

积分成就    金币 : 2861
   泡泡 : 1516
   精华 : 6
   在线时间 : 1321 小时
   最后登录 : 2025-7-5

丰功伟绩

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

联系方式
发表于 2021-11-10 10:22:05 | 显示全部楼层 |阅读模式
       前端开发中仅在需要时的时候加载 JavaScript 模块。这样可以提供很大的性能,比如:您有一个组件,例如复杂的视频播放器,它可以使用大量 js,并且该视频仅在用户单击它时才会启动。那么在这种情况下,用户甚至可能永远不会单击播放按钮,因此仅在需要时才加载该js模块。1 W+ s) {- }  J: N$ V2 q8 x
1.jpg : m+ J6 p" L% m9 T8 j8 H
       因此,不要像这样使用顶级默认声明:) P* }! Q" i2 j- m# u2 u
import * from "https://cdn.skypack.dev/jquery";
      只是在需要的时候加载,代码如下:! Z8 W. G, H3 {+ a
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");
}
      您甚至可以将它与加载指示器之类的东西一起使用:
8 \) E  B" d% u2 ?- R' l6 w
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方法:4 `# f4 [5 d3 i
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, 2025-7-6 01:15

Powered by paopaomj X3.5 © 2016-2025 sitemap

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