动态引入js脚本

实际项目中可能需要在运行时引入某些 JS 脚本。封装了一个 Promise 范式的加载函数。

封装

const scriptLibs = {}

export const loadJs = src => {
  if (!scriptLibs[src]) {
    scriptLibs[src] = new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = src
      script.addEventListener('load', resolve)
      script.addEventListener('error', reject)
      document.getElementsByTagName('head')[0].appendChild(script)
    })
  }
  return scriptLibs[src]
}

使用

举个🌰子

import { loadJs } from '@/utils/load'

export default {
  created() {
    this.installPlug()
  },
  methods: {
    installPlug() {
      loadJs('js url').then(() => {
        alert('已经引入')
      }).catch(() => {
        alert('加载失败')
      })
    }
  }
}