auto-point 0.0.7 → 0.0.9

package/AP/auto_point.js

@@ -0,0 +1,248 @@
+class auto_point {
+  // 初始化状态
+  #INIT_STATE = true
+  // 服务端地址
+  #SERVER = void (0)
+  get server() {
+    return this.#SERVER
+  }
+  set server(url) {
+    this.#SERVER = url
+  }
+  // 事件列表
+  #EVENTS = ['click']
+  // 发送数据间隔 单位毫秒 默认10秒
+  #SEND_TIME = 10_000
+  // sing挂载事件元素标记
+  #POINT_SING = "auto_point"
+  // 埋点队列
+  #POINT_LIST = new Array()
+  get point_list() {
+    return this.#POINT_LIST
+  }
+  set point_list(data){
+    this.#POINT_LIST = data
+  }
+  // 埋点系统时间
+  #POINT_SYS_INIT_TIME = void(0)
+  get point_sys_init_time(){
+    return this.#POINT_SYS_INIT_TIME
+  }
+  // 上次发送时间
+  #POINT_LAST_SEND_TIME = void(0)
+  get point_last_send_time(){
+    return this.#POINT_LAST_SEND_TIME
+  }
+  // 中间件列表
+  #MIDDLEWARE = new Array()
+
+  #ERROR(msg) {
+    console.error(msg)
+  }
+  #isFunction(obj, message) {
+    if (typeof obj === 'function') {
+      return true
+    } else {
+      message && this.#ERROR(message)
+      return false
+    }
+  }
+  #NotArrowFunction(obj,message){
+    if (typeof obj === 'function' && obj.prototype) {
+      return true
+    } else {
+      message && this.#ERROR(message)
+      return false
+    }
+  }
+  #isArray(array, message) {
+    if (Array.isArray(array)) {
+      return true
+    } else {
+      message && this.#ERROR(message)
+      return false
+    }
+  }
+  #isObject(obj, message) {
+    if (Object.prototype.toString.call(obj) === '[object Object]') {
+      return true
+    } else {
+      message && this.#ERROR(message)
+      return false
+    }
+  }
+  #params_hash_server(server) {
+    if (server) {
+      return true
+    } else {
+      throw "The server in params cannot be empty"
+    }
+  }
+
+  constructor() { }
+
+  #init(params) {
+    if (this.#INIT_STATE && this.#isObject(params, "Init only accepts object type data") && this.#params_hash_server(params.server)) {
+      this.#SERVER = params.server
+      this.#SEND_TIME = params.send_time || this.#SEND_TIME
+      this.#POINT_SING = params.point_sing || this.#POINT_SING
+      if (params.events && this.#isArray(params.events, "events must be an Array")) {
+        this.#EVENTS = params.events
+      }
+      this.#POINT_SYS_INIT_TIME = new Date().getTime()
+      this.#mount_dom_event()
+      this.#timer_send()
+      // 初始化成功埋点
+      let type = "init"
+      let value = "success"
+      let describe = "Webpage initialization succeeded"
+      this.#add_point(this.#create_active_point_data(type, value, describe))
+      this.#INIT_STATE = false
+    }
+  }
+
+  #create_point_data_common_params(){
+    let point_item = new Object()
+    point_item.location = JSON.parse(JSON.stringify(window.location))
+    point_item.point_sys_init_time = this.#POINT_SYS_INIT_TIME
+    point_item.point_last_send_time = this.#POINT_LAST_SEND_TIME
+    return point_item
+  }
+
+
+  /**
+   * @description 构造埋点数据
+   * @param {Element} element 接收一个DOM元素节点对象
+   * @returns {object} 返回一个埋点数据对象point_item
+   */
+  #create_event_point_data(element) {
+    let point_item = this.#create_point_data_common_params()
+    point_item.point_type = "event"
+    point_item.point_sing = this.#POINT_SING
+    point_item.elment = element.target
+    point_item.event_type = element.type
+    point_item.point_attr = element.target.getAttribute(this.#POINT_SING)
+    point_item.point_value = element.target.getAttribute(this.#POINT_SING)
+    return point_item
+  }
+
+  /**
+   * 
+   * @param {string} activeType 埋点动作类型
+   * @param {string} activeAttr 埋点动作描述
+   * @param {string} activeValue 埋点动作记录值
+   * @returns 
+   */
+  #create_active_point_data(activeType, activeAttr, activeValue){
+    let point_item = this.#create_point_data_common_params()
+    point_item.point_type = "active"
+    point_item.point_sing = activeType
+    point_item.point_attr = activeAttr
+    point_item.point_value = activeValue
+    return point_item
+  }
+
+  // 挂载全局监听
+  #mount_dom_event() {
+    if (window && document && document.body) {
+      let body = document.body
+      // 挂载各个类型事件监听
+      this.#EVENTS.map((item) => {
+        body.addEventListener(item, (e) => {
+          if (e.target.getAttribute(this.#POINT_SING)) {
+            this.#add_point(this.#create_event_point_data(e))
+          }
+        })
+      })
+      // 挂载hash监听
+      window.addEventListener("hashchange",()=>{
+        let type = "hashchange"
+        let value = window.location.hash
+        let describe = "Webpage hash value is changed to: " + window.location.hash
+        this.#add_point(this.#create_active_point_data(type, value, describe))
+      })
+      // 挂载页面离开事件监听
+      window.addEventListener('visibilitychange', () => {
+        if (navigator && navigator.sendBeacon && document.visibilityState === 'hidden') {
+          let type = "pagehide"
+          let value = "hidden"
+          let describe = "Webpage hidden point"
+          this.#add_point(this.#create_active_point_data(type, value, describe))
+          this.#send()
+        }
+      })
+    } else {
+      throw "<body></body> not found in DOM"
+    }
+  }
+
+  // 添加埋点记录
+  #add_point(params) {
+    if (this.#isObject(params, "Point data must be an object")) {
+      params.time = new Date().getTime()
+      this.#POINT_LIST.push(params)
+    }
+  }
+
+  // 发送埋点数据
+  #send() {
+    if (this.#POINT_LIST.length) {
+      this.#MIDDLEWARE.map((item) => {
+        if (this.#isFunction(item)) {
+          item.apply(this)
+        }
+      })
+      navigator.sendBeacon(this.#SERVER, JSON.stringify(this.#POINT_LIST));
+      // 发送后清空埋点列表数据
+      this.#POINT_LIST = new Array()
+    } else {
+      console.log("无新埋点数据")
+    }
+  }
+
+  // 定时发送
+  #timer_send() {
+    setInterval(() => {
+      this.#send()
+    }, this.#SEND_TIME)
+  }
+
+  /**
+   * @brief 埋点记录初始化
+   * @description server (必填) - 服务端地址
+   * @description send_time - 发送数据间隔 单位毫秒 默认10_000毫秒
+   * @description point_sing - 默认"auto_point"，添加元素点击事件的埋点标记，被标记的元素点击时触发埋点事件
+   * @param {object} params 
+   * @param {string} params.server
+   * @param {Array.<string>} [params.events]
+   * @param {number} [params.send_time]
+   * @param {string} [params.point_sing]
+   */
+  init(params) {
+    this.#init(params)
+    return this
+  }
+
+  // 手动发送数据
+  send() {
+    this.#send()
+  }
+
+  /**
+   * @description 挂载中间件
+   * @param {function(this):void} func 不允许传入箭头函数
+   * @return this 
+   */
+  middleware(func) {
+    if (this.#NotArrowFunction(func, "Middleware requires a non-arrow function parameter")) {
+      this.#MIDDLEWARE.push(func)
+    }
+    return this
+  }
+
+  // 手动添加埋点记录
+  add_point(params) {
+    this.#add_point(params)
+  }
+
+}

package/README.md

@@ -6,10 +6,7 @@
 **如何使用**
 
 **Step 1**： 引入AP,可以通过  
-npm i -S auto-point  
-或
-<script src="https://www.gfb-js.com/GFB/gfb.js"></script>
-
+npm i -S auto-point
 
 **Step 2**： 引入对应框架的AP中间件(可选)，中间件主要处理数据发送格式，开发人员可以手动实现中间间以实现自定义格式数据。
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auto-point",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "Automatic burying point",
   "main": "index.js",
   "files": [