利用构造函数实现一个支持异步数据上报的实例(单例)

岁月如歌_

已于 2023-02-01 14:23:27 修改

阅读量167

点赞数

文章标签： javascript 前端 html

于 2023-02-01 14:22:00 首次发布

本文链接：https://blog.csdn.net/namechenfl/article/details/128833312

版权

<!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></body>
  <script>
    let isInit;

    // 埋点分析 方法 ,
    class Analysis {
      static messageQueue = [];
      static isInit;
      static analysis;
      constructor(id) {
        this.id = id;
      }
      // 初始化实例
      static init() {
        console.log(this.isInit, '是否初始化');
        if (!this.isInit) {
          // 实例化
          this.isInit = true;
          // 获取id
          setTimeout(() => {
            //发起网络请求
            this.analysis = new Analysis(Math.random());
            // 数据采集队列
            this.messageQueue.forEach((item) => {
              this.send(item);
            });
            //清空数据队列
            this.messageQueue = [];
          }, 1000);
        }
      }
      // 数据采集,
      static tracker(currentParams) {
        // console.log(currentParams, '数据采集');
        // 实例未初始化完成,放入队列
        if (!this.analysis) return this.messageQueue.push(currentParams || {});
        this.send(currentParams);
      }
      // 数据上报
      static async send(currentParams) {
        console.log(currentParams, this.analysis.id, "数据上报");
      // 发起网络请求
      }
    }
    Analysis.init();
    Analysis.init();
    Analysis.tracker({ id: 123 });
    Analysis.tracker({ id: 2344 });
    setTimeout(() => {
      Analysis.tracker({ id: 2222 });
    }, 1500);
  </script>
</html>