js 动态加载js资源

使用原生js加载

最下面是使用 js 原生写的动态加载js文件的功能。

js 复制代码

/**
 * 动态加载 js 资源
 * @param {Array} jsArr 要加载的js地址
 * @returns 
 */
export function loadJs(jsArr) {
  let headDom = document.querySelector('head')
  let promiseArr = []
  jsArr.forEach(jsSrc => {
    promiseArr.push(new Promise((resolve, reject) => {
      let scriptDom = document.createElement('script')
      scriptDom.src = jsSrc
      scriptDom.onload = () => {
        headDom.removeChild(scriptDom)
        resolve()
      }
      scriptDom.onerror = () => {
        headDom.removeChild(scriptDom)
        reject()
      }
      headDom.appendChild(scriptDom)
    }))
  })

  return Promise.all(promiseArr)
}

使用工具LAB加载

下面介绍一个 js 资源的动态加载的工具「LAB」，官方 github：https://github.com/getify/LABjs。

和直接使用 js 创建 script 标签引入 js 资源的方式不同的是，LAB 支持**「并行加载+顺序执行」**，它能像加载 html 时使用 script 标签加载 js 一样，同时下载多个 js 文件，但最后按顺序依次执行。

比如：

html 复制代码

<script src="jquery.js"></script>
<script src="plugin_1.js"></script>
<script>
  console.log('一半');
</script>
<script src="plugin_2.js"></script>
<script>
  console.log('最终');
</script>

效果等同于以下代码：

html 复制代码

<script src="LAB.min.js"></script>
<script>
  $LAB.script('jquery.js')
    .wait(() => {
      console.log('一半');
    }).script('plugin_1.js', 'plugin_2.js')
    .wait(() => {
      console.log('最终');
    })
</script>

LAB 最常用的主要是 .script() 方法和 .wait() 方法：

script 方法：加载传入路径的 js 资源，并行加载完后，自动顺序执行。
wait 方法：传入一个回调方法，当这个 wait 之前的 js 资源执行后，会执行传入的回调方法，然后再执行后续的 js 资源，当然，也可以在这个回调方法中，经过判断再重新使用 LAB 引入资源。

所以，在需要加载多个 js 资源时，使用 LAB 能更可控的引入。

更新时间：2023/03/04 19:29:12

本页目录