refactor(Module split):

src/lib/comment.js

-import 'whatwg-fetch';
-import utils from './utils';
-
-const common = {
-    /**
-     * fetch请求封装
-     * @param {*} action 请求线上地址
-     * @param {*} params 请求入参
-     * @param {*} method 请求方式，默认get
-     * @param {*} options 其他参数
-     * options为对象格式,值：
-     * isLoading(是否激活请求加载动画)
-     * isJson(是否设置post请求头contentType为application/json)
-     * content 自定义请求参数
-    */
-    fetch(action, params = {}, method = 'get', options = {}) {
-        const token = utils.getCookie('token');
-        const XCsrfToken = utils.getCookie('csrf_token');
-        let url = action;
-        let option = {
-            method,
-            credentials: 'same-origin',
-            headers: {
-              Accept: 'application/json',
-              'Content-Type': 'application/json',
-              'token': token,
-              'X-Csrf-Token': XCsrfToken
-            }
-        };
-        if (options && options.content) {
-            option = Object.assign({}, option, options.content);
-        }
-        if (method === 'post') {
-            if (options && options.isJson) {
-                option.body = JSON.stringify(params);
-            } else {
-                option = Object.assign({}, option, {
-                    headers: {
-                        Accept: 'application/json,text/plain,*/*',
-                        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
-                        'token': token,
-                        'X-Csrf-Token': XCsrfToken
-                    }
-                });
-                option.body = utils.serialize(params);
-            }
-        }
-        if (method === 'get') {
-            url = Object.keys(params).length ? url + '?' + utils.serialize(params) : url;
-        }
-        return fetch(url, option)
-        .then(response => {
-            if (response.status >= 200 && response.status < 300) {
-                return response;
-            } else {
-                let error = new Error(response.statusText);
-                error.response = response;
-                throw error;
-            }
-        });
-   }
-}
-
-export default common;
\ No newline at end of file

src/lib/common.js

+import "whatwg-fetch";
+import utils from "./utils";
+
+/**
+ * fetch请求封装
+ * @param {*} action 请求线上地址
+ * @param {*} params 请求入参
+ * @param {*} method 请求方式，默认get
+ * @param {*} options 其他参数
+ * options为对象格式,值：
+ * isLoading(是否激活请求加载动画)
+ * isJson(是否设置post请求头contentType为application/json)
+ * content 自定义请求参数
+ */
+export function fetch(action, params = {}, method = "get", options = {}) {
+  const token = utils.getCookie("token");
+  const XCsrfToken = utils.getCookie("csrf_token");
+  let url = action;
+  let option = {
+    method,
+    credentials: "same-origin",
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      token: token,
+      "X-Csrf-Token": XCsrfToken,
+    },
+  };
+  if (options && options.content) {
+    option = Object.assign({}, option, options.content);
+  }
+  if (method === "post") {
+    if (options && options.isJson) {
+      option.body = JSON.stringify(params);
+    } else {
+      option = Object.assign({}, option, {
+        headers: {
+          Accept: "application/json,text/plain,*/*",
+          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
+          token: token,
+          "X-Csrf-Token": XCsrfToken,
+        },
+      });
+      option.body = utils.serialize(params);
+    }
+  }
+  if (method === "get") {
+    url = Object.keys(params).length ? url + "?" + utils.serialize(params) : url;
+  }
+  return fetch(url, option).then(response => {
+    if (response.status >= 200 && response.status < 300) {
+      return response;
+    } else {
+      let error = new Error(response.statusText);
+      error.response = response;
+      throw error;
+    }
+  });
+}

src/lib/counter.js

+class Counter {
+  count = 0;
+
+  next() {
+    return ++this.count;
+  }
+  reset() {
+    this.count = 0;
+  }
+}
+
+export default Counter;

src/lib/monitor.js

 import * as rrweb from "rrweb";
 import TracksWorker from "./tracks.worker";
-import common from './comment';
 export default class Monitor {
   rrwebHandler = null;
   tracksWorker = new TracksWorker();
   // 记录
   constructor() {
     this.tracksWorker.onmessage = ({ data }) => {
-      console.log('local', data);
+      console.log("local", data);
       window.localStorage.setItem("rrevents", JSON.stringify(data));
       // common.fetch('https://manager.tuiatest.cn/homePage/data','get');
     };
   }
   record() {
     this.rrwebHandler && this.rrwebHandler();
-    console.log('开始录制')
+    console.log("开始录制");
     this.rrwebHandler = rrweb.record({
       emit: event => {
         this.tracksWorker.postMessage({ type: "record", payload: event });
@@ -26,13 +25,13 @@ export default class Monitor {
     if (!this.rrwebHandler) {
       throw new Error("没有正在录制的实例");
     }
-    console.log('停止录制')
+    console.log("停止录制");
     this.rrwebHandler();
   }
   // 重置
   reset(event) {
     this.rrwebHandler && this.rrwebHandler();
-    console.log('重置数据')
+    console.log("重置数据");
     this.tracksWorker.postMessage({ type: "reset", payload: event });
   }
   // 发送信息

src/lib/reporter.js

+// 数据维护,上报
+
+import { fetch } from "./common";
+import Counter from "./counter";
+class Reporter {
+  isUploading = false;
+  bus = [];
+  counter = new Counter();
+  constructor(recordKey) {
+    this.recordKey = recordKey;
+  }
+  toCDN() {
+    this.isUploading = true;
+    let index = this.bus.length;
+    let trackId = this.counter.next();
+    let recordKey = this.recordKey;
+    return fetch("cdn").then(res => {
+      this.isUploading = false;
+      if (recordKey !== this.recordKey) {
+        return;
+      }
+
+      return res;
+    });
+  }
+  toBus(data) {
+    let trackId = this.counter.next();
+    data.trackId = trackId;
+    this.bus.push(data);
+  }
+  report(data) {
+    if (this.isUploading) {
+      return;
+    }
+    return fetch("report");
+  }
+  reset(recordKey) {
+    this.bus = [];
+    this.counter.reset();
+    this.recordKey = recordKey;
+  }
+}
+
+export default Reporter;

src/lib/tracks.worker.js

-import md5 from 'md5';
-import utils from './utils';
-import _ from 'lodash';
+// 入口，格式化数据，模块管理
+import md5 from "md5";
+import utils from "./utils";
+import _ from "lodash";
+import Reporter from "./reporter";
+const reporter = new Reporter("recordKey");
 // 原始数据数组
 let events = [];
 // 包装后的数据对象
 let wrapData = [];
 // 分条视频id
-let recordKey = '';
+let recordKey = "";
 // 全量快照是否已经返回
 let isCdnReturn = false;
 onmessage = ({ data: { type, payload } }) => {
@@ -14,34 +17,46 @@ onmessage = ({ data: { type, payload } }) => {
     case "record":
       // todo : 数据本地存储
       console.log(wrapData);
-      wrapData.push(utils.dataWrapper({
-        recordKey,
-        isCdn: false
-      }, payload));
+      wrapData.push(
+        utils.dataWrapper(
+          {
+            recordKey,
+            isCdn: false,
+          },
+          payload,
+        ),
+      );
       events.push(payload);
       // todo : 全量快照上传cdn
-      if(payload.type === 2) {
-        const cdnIndex = _.findIndex(events, { 'type': 2 });
+      if (payload.type === 2) {
+        const cdnIndex = _.findIndex(events, { type: 2 });
         setTimeout(() => {
-          wrapData.splice(cdnIndex, 1, utils.dataWrapper({
-            recordKey,
-            isCdn: true
-          }, payload));
+          wrapData.splice(
+            cdnIndex,
+            1,
+            utils.dataWrapper(
+              {
+                recordKey,
+                isCdn: true,
+              },
+              payload,
+            ),
+          );
           isCdnReturn = true;
         }, 1000);
       }
       // todo : 数据压缩
-      
+
       // todo : 根据事件类型优先级触发上传策略(click)
-      if(payload.data.source === 2 && isCdnReturn) {
-        console.log('点击上上传events', wrapData);
+      if (payload.data.source === 2 && isCdnReturn) {
+        console.log("点击上上传events", wrapData);
         postMessage(wrapData);
         events = [];
         wrapData = [];
       }
       // todo : 数据超出100条上线,自动上传
       if (wrapData.length > 100 && isCdnReturn) {
-        console.log('超出线上100条上传events', wrapData)
+        console.log("超出线上100条上传events", wrapData);
         postMessage(wrapData);
         events = [];
         wrapData = [];
@@ -51,11 +66,11 @@ onmessage = ({ data: { type, payload } }) => {
       // todo : 重置参数,重新生成recordKey
       events = [];
       wrapData = [];
-      recordKey = '';
+      recordKey = "";
       isCdnReturn = false;
       const { url, email } = payload;
       recordKey = md5(url + email + Date.parse(new Date()));
-      console.log(url, '分片id', recordKey);
+      console.log(url, "分片id", recordKey);
       break;
     default:
       console.log("unknow action");