【js】js加载问题

你创建的script对象上提供了加载的钩子函数:onload/onreadystatechange(浏览器的兼容性处理),当你把script标签插入到DOM中时，浏览器另开一个线程去异步加载你需要的js资源，在加载的不同阶段：this.readyState对应不同的值，这个时候根据需要设置你的回调函数。这样就完成了对于一段js代码异步获取的监控。
注：当script标签插入到html中时才会异步加载和执行。

加载js文件方法：

export const loadScript = (url) => new Promise((resolve, reject) => {
  const scripts = document.getElementsByTagName('script');
  // 通过抛出异常结束函数
  try {
    scripts.forEach((item) => {
      if (item.getAttribute('src') === url) {
        return resolve();
      }
    });
  } catch (e) {
    console.log(e);
    return reject();
  }
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;
  document.body.appendChild(script);
  if (script.readyState) { // IE
    script.onreadystatechange = () => {
      if (script.readyState === 'complete' || script.readyState === 'loaded') {
        script.onreadystatechange = null;
        resolve();
      }
    };
  } else { // 非IE
    script.onload = () => {
      resolve();
    };
  }
});

使用：

if (app.name.startsWith('boc')) {
          // 按需引入js文件
          const promiseBoc = [
            loadScript(`/${APP_NAME}/boyond/echarts.388830ea2eb1e88627de.js`),
            loadScript(`/${APP_NAME}/boyond/moment.97d1b1dba67ab2c1a892.js`),
            loadScript(`/${APP_NAME}/boyond/vue.5a6b7fdcffadb2088523.js`),
            loadScript(`/${APP_NAME}/boyond/core.73cd6dc6f82e269e7239.js`),
          ];
          await Promise.all(promiseBoc).then(() => {
            console.log('promisesBoc加载完成');
          }).catch((err) => {
            console.log(err);
          });
        } else {
          const promiseJdt = [
            loadScript(`/${APP_NAME}/dll/iview_core.bundle.c2ad6cd.js`),
            loadScript(`/${APP_NAME}/dll/echarts_core.bundle.c2ad6cd.js`),
          ];
          await Promise.all(promiseJdt).then(() => {
            console.log('promisesJdt加载完成');
          }).catch((err) => {
            console.log(err);
          });
        }