异步创建加载script

最新推荐文章于 2024-02-26 00:15:00 发布

蔬菜调料包

最新推荐文章于 2024-02-26 00:15:00 发布

阅读量163

点赞数

分类专栏：前端 JavaScript 文章标签： JavaScript js

本文链接：https://blog.csdn.net/a1255215696/article/details/102932865

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

如题项目引入echarts不需要全局引用，使用异步加载js，减小打包体积

/**
 * @param {*} url 需要引用的script标签的地址

 * @param {*} callback 创建完成script元素回调

 * @returns

 */

function createScript(url, callback) {

  const scriptEl = document.createElement('script');

  scriptEl.charset = 'utf-8'

  scriptEl.src = url;

  // document.body.appendChild(scriptEl);

  // 添加到head

  const head = document.head || document.getElementsByTagName('head')[0];

  head.appendChild(scriptEl);

  const promise = new Promise((resolve, reject) => {

    // 不支持ie8及以下

    scriptEl.addEventListener(

      'load',

      e => {

        if (!callback) {

          resolve(e);

        } else {

          callback()

          resolve(e);

        }

      },

      false

    );

    scriptEl.addEventListener(

      'error',

      e => {

        removeScript(scriptEl)

        reject(e);

      },

      false

    );

  });

  return promise;

}

/**

 * 移除script标签

 * @param scriptEl script dom

 */

function removeScript(scriptEl) {

  document.body.removeChild(scriptEl);

}

export default createScript;