描述

支持批量加载远程 css 和 js 文件，返回 promise，如果 html 已经出现相同的 script，将不会重新加载，除非 src 地址不一致。

1.示例

1.1 加载单个 js

加载远程jquery.js 打印 $

<template>
  <div v-loading="loading">
    <el-button @click="onClick">加载远程jquery.js</el-button>
    <el-button @click="onPrint">打印 $</el-button>
  </div>
</template>

<script>
import { loadJsOrCssMulSync } from 'sf-utils2'
const jquery = 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    async onClick() {
      this.loading = true
      await loadJsOrCssMulSync([jquery])
      this.$message.success('加载成功')
      this.loading = false
    },

    onPrint() {
      console.log(window.$)
    }
  }
}
</script>

显示代码 复制代码 复制代码

1.2 同时加载 js 和 css

加载远程的element-ui 打印 ELEMENT

<template>
  <div v-loading="loading">
    <el-button @click="onClick">加载远程的element-ui</el-button>
    <el-button @click="onPrint">打印 ELEMENT</el-button>
  </div>
</template>

<script>
import { loadJsOrCssMulSync } from 'sf-utils2'
const elementUICss = 'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
const elementUIJs = 'https://unpkg.com/element-ui/lib/index.js'
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    async onClick() {
      this.loading = true
      await loadJsOrCssMulSync([elementUICss, elementUIJs])
      this.$message.success('加载element-ui成功')
      this.loading = false
    },

    onPrint() {
      console.log(window.ELEMENT)
    }
  }
}
</script>

显示代码 复制代码 复制代码

1.3 同时加载多个 js

点击加载多个js文件

<template>
  <div v-loading="loading">
    <el-button type="primary" @click="onClick">点击加载多个js文件</el-button>
  </div>
</template>

<script>
import { loadJsOrCssMulSync } from 'sf-utils2'
const cdn = [
  'https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.core.js',
  'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js',
  'https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.js'
]
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    async onClick() {
      this.loading = true
      await loadJsOrCssMulSync(cdn)
      this.$message.success('点击加载多个js文件成功')
      this.loading = false
    }
  }
}
</script>

显示代码 复制代码 复制代码

2.入参说明

参数	说明	类型	是否必填	默认值
urlList	js 或者 css 链接地址	Array<String>	是

3.源码

源码，点开查看 👈

/**
 * 支持批量加载css 和 jsm 例子：loadRemoteScriptOrCss(['https://unpkg.com/element-ui/lib/theme-chalk/index.css', 'https://unpkg.com/element-ui/lib/index.js'])
 * @param {Array} urlList 类型 Array | String
 * @returns {Promise<void>}
 */
async function loadJsOrCssMulSync(urlList = []) {
  const getTypeFromUrl = url => {
    // eslint-disable-next-line no-useless-escape
    const _type = /\.[^\.]+$/.exec(url)[0]
    if (_type === '.js') {
      return 'text/javascript'
    }
    if (_type === '.css') {
      return 'text/css'
    }
  }

  const formatFileList = arg => {
    let args0
    if (typeof arg === 'string') {
      args0 = [arg]
    } else if (Array.isArray(arg)) {
      args0 = arg
    } else {
      throw { error: 'The dynamicFile parameter must be a string or an array' }
    }
    let args1
    args1 = args0.map(i => {
      let url
      let type
      if (typeof i === 'string') {
        url = i
        type = getTypeFromUrl(url)
      } else if (Array.isArray(i)) {
        ;[url] = i
        type = i[1] && i[1].type ? i[1].type : getTypeFromUrl(url)
      } else {
        throw { error: 'The dynamicFile parameter must be a string or an array' }
      }
      return { url, type }
    })
    return args1
  }

  const createElement = ({ type, url }) => {
    switch (type) {
      case 'text/javascript': {
        const element = document?.createElement('script')
        element.setAttribute('type', 'text/javascript')
        element.src = url
        return element
      }
      case 'text/css': {
        const element = document?.createElement('link')
        element.href = url
        element.setAttribute('rel', 'stylesheet')
        element.setAttribute('media', 'all')
        element.setAttribute('type', 'text/css')
        return element
      }
      default:
        break
    }
  }

  /* eslint-disable no-param-reassign */
  const loadElement = element =>
    new Promise(resolve => {
      const head = document?.getElementsByTagName('head')[0]
      head.appendChild(element)
      if (element.readyState) {
        element.onreadystatechange = () => {
          if (element.readyState === 'loaded' || element.readyState === 'complete') {
            element.onreadystatechange = null
            resolve()
          }
        }
      } else {
        element.onload = resolve
      }
    })

  try {
    const list = formatFileList(urlList)
    const elementList = list.map(createElement)
    await Promise.all(
      elementList.map(i => {
        return loadElement(i)
      })
    )
  } catch (error) {
    console.log(error)
  }
}