js封装的导入加载组件

公司需求，需要导入加载组件，展示当前已经加载多少，加载进度由后端提供，前端只需要提供一个初始化init()方法跟set()修改进度方法，


直接贴代码

function initFn(initCss, domTree, id) {
  // 创建style标签
  const style = document.createElement("style");
  // 将 keyframes样式写入style内
  style.innerHTML = initCss;
  // 将style样式存放到head标签
  document.getElementsByTagName("head")[0].appendChild(style);
  // 创建最外层盒子 #main
  let outBox = document.createElement("div");
  outBox.setAttribute("id", id);
  document.body.appendChild(outBox);
  let main = document.getElementById(id);
  main.innerHTML = domTree;
  // console.log(">>>33", document.styleSheets);
}
//销毁loading
function removeFn(id) {
  let timer = setTimeout(() => {
    document.body.removeChild(document.getElementById(id));
    clearTimeout(timer);
  }, 500);
}
export default {
  /**
   * name:初始化进度条 js创建DOM（旋转球loading）
   * params:{loadData:number(false),loadText:string(false)}
   * return：viod
   * loadData:初始化进度（不传默认0）  loadText:加载显示文字（不传默认loading）
   */
  initBall: (loadData = 0, loadText = "loadText") => {
    const INITCSS = `
    * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
    #loadingBall {
      position: fixed;
      top:0;
      left:0;
      right:0;
      bottom:0;
      width: 100vw;
      height: 100vh;
      z-index:99;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: rgba(0,0,0,0.1);
    }
    .face {
      width: 64px;
      display: flex;
      justify-content: space-between;
    }
    .left,
    .right {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      position: relative;
    }
    .left {
      background: #B20A0A;
      animation: left 0.8s linear infinite alternate;
    }
    .right {
      background: #2F7CAF;
      animation: right 0.8s linear infinite alternate;
    }
    #loadingText {
      margin-top: 40px;
      text-align: center;
      font-size: 18px;
      font-weight: 400;
      color: #999999;
    }
    #loadingText > span {
      margin-right: 10px;
    }
    @keyframes left {
      0% {
        transform: translateX(0%) scale(0.8);
      }
      50% {
        transform: translateX(32px) scale(1.1);
      }
      100% {
        transform: translateX(52px) scale(0.8);
      }
    }
    @keyframes right {
      0% {
        transform: translateX(0%) scale(0.8);
      }
      50% {
        transform: translateX(-32px) scale(1.2);
      }
      100% {
        transform: translateX(-52px) scale(0.8);
      }
    }
     `;
    const DOMTREE = `
     <div class="face">
     <div class="left"></div>
     <div class="right"></div>
   </div>
   <div id="loadingText"><span>${loadData}%</span>${loadText}...</div>
     `;
    initFn(INITCSS, DOMTREE, "loadingBall");
  },
  /**
   * name:初始化进度条 js创建DOM（线条loading）
   * params:{loadData:number(false),loadText:string(false)}
   * return：viod
   * loadData:初始化进度（不传默认0）  loadText:加载显示文字（不传默认loading）
   */
  initLine: (loadData = 0, loadText = "loadText") => {
    //样式表
    const INITCSS = `
    * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  #loadingLine {
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width: 100vw;
    height: 100vh;
    z-index:99;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.1);
  }
  #progress {
    height: 16px;
    width: 500px;
    border-radius: 50px;
    background-color: #eaf2f7;
  }

  #progress #progressLoad {
opacity:1;

    width: 0;
    height: 16px;
    border-radius: 50px;
    background: #2989d8; 
    background: linear-gradient(
      45deg,
      #679fc4 44%,
      #6092b3 45%,
      #6092b3 55%,
      #679fc4 56%
    );
    background-size: 30px 16px;
    color: #fff;

    animation: load 5s linear infinite;
  }
    #loadingText {
      margin-top: 40px;
      font-size: 18px;
      font-weight: 400;
      color: #999999;
    }
    #loadingText > span {
      margin-right: 10px;
    }
    @keyframes load {
      0% {
        background-position: 0 0;
      }
      100% {
        background-position: -100px 0;
      }
    }`;
    const DOMTREE = `
    <div id="progress">
      <div id="progressLoad"></div>
    </div>
    <div id="loadingText"><span>${loadData}%</span>${loadText}...</div>
  `;
    initFn(INITCSS, DOMTREE, "loadingLine");
  },

  /**
   * name:修改已加载进度（线条loading）
   * params:{num:number} num:当前百分比进度数字
   * return：viod
   */
  setLine: (num) => {
    let progressLoad = document.getElementById("progressLoad");
    let loadingText = document.getElementById("loadingText");
    if (num - 0 <= 100) {
      progressLoad.style.width = `${num}%`;
      loadingText.firstChild.innerText = `${num}%`;
    }
    if (num - 0 === 100) {
      removeFn("loadingLine");
      //手动清除游离子节点 防止内存泄露
      progressLoad=null;
      loadingText=null;
    }
  },

  /**
   * name:修改已加载进度（旋转球loading）
   * params:{num:number} num:当前百分比进度数字
   * return：viod
   */
  setBall: (num) => {
    let loadingText = document.getElementById("loadingText");
    if (num - 0 <= 100) {
      loadingText.firstChild.innerText = `${num}%`;
    }
    if (num - 0 === 100) {
      removeFn("loadingBall");
       //手动清除游离子节点 防止内存泄露
       loadingText=null;
    }
  },
};

附上使用方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body style="background-color:rgb(255, 255, 255)">
  </body>
  <script type="module">
    // fn={initBall,initLine,setBall,setLine}
    import fn from "./loading.js";
    //模拟数据————————————————
    let loadingData = 0;
    let timer = null;
    //————————————————————————

    //初始化旋转球加载
    // fn.initBall(0, "loading");
    //初始化进度条加载
    fn.initLine(0, "loading");

    //模拟轮询
    function startUpload(delay = 100) {
      timer = setInterval(() => {
        loadingData += 10;
        //修改进度
        // fn.setBall(loadingData);
        fn.setLine(loadingData);

        if (loadingData >= 100) {
          clearInterval(timer);
        }
      }, delay);
    }

    //执行轮询
    startUpload(300);
  </script>
</html>