当前位置: 首页 > article >正文

动态加载js文件的方法封装

总结一下,动态加载js文件的方法封装。

以后总结这个方法拿来可以直接使用

/**
 * 加载js文件的方法封装
 */ 
class LoadScrpt {
  /**
   * 加载单个JS
   */
  static singleLoad(src) {
    return new Promise(function (resolve, reject) {
      let shouldAppend = false;
      let el = document.querySelector('script[src="' + src + '"]');
      if (!el) {
        el = document.createElement('script');
        el.type = 'text/javascript';
        el.async = true;
        el.src = src;
        shouldAppend = true;
      }else if (el.hasAttribute('data-loaded')) {
        resolve(el);
        return;
      }

      el.addEventListener('error', reject);
      el.addEventListener('abort', reject);
      el.addEventListener('load', function loadScriptHandler() {
        el.setAttribute('data-loaded', true);
        resolve(el);
      });

      if (shouldAppend) {
        document.head.appendChild(el);
      }
    });
  }

  /**
   * 加载js数组
   */
  static load(list) {
    let that = this;
    return new Promise(resolve => {
      function doLoad(url) {
        that.singleLoad(url).then(() => {
          if (list.length > 0) {
            doLoad(list.shift())
          } else {
            resolve()
          }
        })
      }

      if (list.length > 0) {
        doLoad(list.shift())
      } else {
        resolve()
      }
    })
  }

};

export default LoadScrpt;

http://www.kler.cn/a/133575.html

相关文章:

  • 【C#设计模式(4)——构建者模式(Builder Pattern)】
  • MySQL高级(二):一条更新语句是如何执行的
  • CSS回顾-长度单位汇总详解
  • Docker compose部署portainer
  • Flink1.19编译并Standalone模式本地运行
  • 【安全通信】告别信息泄露:搭建你的开源视频聊天系统briefing
  • 系统安全-常见的几种sql注入攻击的方式
  • 【IDEA 使用easyAPI、easyYapi、Apifox helper等插件时,导出接口文档缺少代码字段注释的相关内容、校验规则的解决方法】
  • 1、cvpr2024
  • 2023.11.19 hadoop之MapReduce
  • [ 一刷完结撒花!! ] Day50 力扣单调栈 : 503.下一个更大元素II |42. 接雨水 | 84.柱状图中最大的矩形
  • Fork项目新分支如何同步
  • upgrade k8s (by quqi99)
  • SEnet注意力机制(逐行代码注释讲解)
  • Golang中的闭包详解
  • 浅谈滑动窗口
  • Java Swing抽奖程序
  • 一句话总结敏捷实践中不同方法
  • Django 简单入门(一)
  • C++虚函数(定义,作用,原理,案例)
  • 实时人眼追踪、内置3D引擎,联想ThinkVision裸眼3D显示器创新四大应用场景
  • 【机器学习】 逻辑回归算法:原理、精确率、召回率、实例应用(癌症病例预测)
  • 【蓝桥杯选拔赛真题21】C++行李运费 第十二届蓝桥杯青少年创意编程大赛C++编程选拔赛真题解析
  • SpringSecurity+jwt使用
  • Python将已标注的两张图片进行上下拼接并修改、合并其对应的Labelme标注文件
  • 【Axure高保真原型】附件卡片