如何实现动态加载Javascript 文件模块

151 阅读 0 评论 100 点赞

我是靠谱客的博主阔达季节，这篇文章主要介绍如何实现动态加载Javascript 文件模块，现在分享给大家，希望可以做个参考。

前端开发中仅在需要时的时候加载 JavaScript 模块。这样可以提供很大的性能，比如：您有一个组件，例如复杂的视频播放器，它可以使用大量 js，并且该视频仅在用户单击它时才会启动。

那么在这种情况下，用户甚至可能永远不会单击播放按钮，因此仅在需要时才加载该js模块。

因此，不要像这样使用顶级默认声明：

复制代码

1
import * from "https://cdn.skypack.dev/jquery";

只是在需要的时候加载，代码如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
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");
}

您甚至可以将它与加载指示器之类的东西一起使用：

复制代码

1
2
3
4
5
6
7
8
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方法：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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(){
  //加载成功执行
});