cbvirtua 1.0.115 → 1.0.122

package/v-track-master/v-track-master/src/hooks/index.js

@@ -0,0 +1,217 @@
+/*
+ * @Author: 宋慧武
+ * @Date: 2019-03-06 17:49:29
+ * @Last Modified by: 宋慧武
+ * @Last Modified time: 2020-06-05 20:23:06
+ */
+import {
+  zipArray,
+  exactlySameVnode,
+  _exactMatch,
+  _partialMatch
+} from "../utils/helper";
+import * as debug from "../utils/debug";
+import { isVisible } from "../utils/dom";
+import VisMonitor from "../utils/vis-monitor";
+
+const MODIFIERS = ["async", "delay", "watch", "show", "once", "custom"]; // 修饰符
+
+/*******************************************************************************
+ * @desc 监听数据发生改变时触发埋点，需处理两种情况：
+ * ① 初始化时开始监听 v-track:xxxxx.watch="{ common_exp }"
+ * ops.immediate 表示初始化时立即开始监听
+ *
+ * ② 点击事件之后开始监听 v-track:18016.click.async="{ refreshHotSpot, exposureId }"
+ * el.contains(this.target) 避免多个“地方”同时监听同一个值出现多次上报的问题
+ *******************************************************************************/
+function _watcher(el, exp, cbk, ctt, ops = {}) {
+  el.$unwatch = ctt.$watch(
+    () => ctt[exp],
+    (nv, ov) => {
+      nv !== ov && (ops.immediate || el.contains(this.target)) && cbk();
+      this.target = null; // 释放当前操作的watcher
+    }
+  );
+}
+
+/*************************************************************************
+ * @desc 自定义指令 v-track
+ *
+ * @param {*} el 指令所绑定的元素
+ * @param {String} arg 埋点对应event ID
+ * @param {Boolean} modifiers.click true: 事件行为埋点; false: 页面级埋点
+ * @param {Boolean} modifiers.watch 异步埋点
+ * @param {Boolean} modifiers.async 点击事件异步埋点
+ * @param {Boolean} modifiers.delay 埋点是否延迟执行，默认先执行埋点再执行cbk
+ *
+ * @property {Function} tck 对应埋点方法
+ *
+ * @example v-track:18015
+ * @example v-track:18015.watch
+ * @example v-track:18015.watch.delay
+ * @example v-track:18015.click
+ * @example v-track:18015.click.async
+ * @example v-track:18015.click.delay
+ * @example v-track:18015.[自定义事件名].delay
+ * @example v-track:18015.[自定义事件名].async
+ *************************************************************************/
+export function bind(
+  el,
+  { value, arg: id, modifiers, rawName },
+  { context, componentInstance },
+  _,
+  __,
+  events
+) {
+  if (!events[id]) throw new Error("tracking event does not exist");
+
+  let queue = [];
+  let tck = events[id].bind(null, context);
+  const watcher = (exp, cbk, ops) =>
+    _watcher.call(this, el, exp, cbk, context, ops);
+  const exactMatch = (...args) => _exactMatch.call(null, modifiers, args);
+  const partialMatch = (...args) => _partialMatch.call(null, modifiers, args);
+
+  if (!Object.keys(modifiers).length) {
+    events[id](context, value);
+  }
+  // 异步埋点
+  else if (exactMatch("watch")) {
+    const exp = Object.keys(value).shift();
+
+    watcher(exp, tck, {
+      immediate: true
+    });
+  }
+  // 指定延长时间埋点
+  else if (exactMatch("delay")) {
+    el.$timer && clearTimeout(el.$timer);
+    el.$timer = setTimeout(() => {
+      events[id](context);
+    }, value);
+  } else if (exactMatch("watch", "delay")) {
+    const { delay, ...args } = value;
+    const exp = [...Object.keys(args)].pop();
+
+    tck = () => {
+      el.$timer && clearTimeout(el.$timer);
+      el.$timer = setTimeout(() => {
+        const visible = isVisible(context.$el);
+
+        visible && events[id](context);
+      }, delay);
+    };
+    watcher(exp, tck, {
+      immediate: true
+    });
+  }
+  // 区域曝光埋点
+  else if (partialMatch("show")) {
+    const [args] = zipArray(value);
+    const tck = events[id].bind(null, context, ...args);
+    const once = partialMatch("once");
+    const custom = partialMatch("custom");
+
+    if (!el.$visMonitor) {
+      setTimeout(() => {
+        const vm = new VisMonitor(
+          el,
+          custom && context.$refs[value.ref],
+          value && context.$refs[value.viewport],
+          value && value.percent
+        );
+
+        (once ? vm.$once : vm.$on).call(vm, "fullyvisible", tck);
+        el.$visMonitor = vm;
+      }, 0);
+    }
+  } else if (
+    (!componentInstance && modifiers.click) ||
+    (componentInstance && partialMatch("native"))
+  ) {
+    /**
+     * @desc DOM元素事件行为埋点(需区分是否带参数)
+     * @var {Function} fn 获取第一个参数作为回调函数
+     * @var {String} exp 获取最后一个参数并作为监听对象
+     */
+    switch (typeof value) {
+      case "object": {
+        const [args, keys] = zipArray(value);
+        const fn = args.shift();
+        const exp = [...keys].pop();
+
+        debug.checkFun(fn);
+        tck = events[id].bind(null, context, ...args);
+        queue = [tck, fn.bind(null, ...args)];
+        modifiers.delay && queue.reverse();
+        modifiers.async && watcher(exp, queue.shift());
+        break;
+      }
+      case "function":
+        queue = [tck, value];
+        modifiers.delay && queue.reverse();
+        break;
+    }
+    el.$listener = e => {
+      this.target = e.target;
+      queue.forEach(sub => sub(e));
+    };
+    el.addEventListener("click", el.$listener);
+  } else if (
+    /**
+     * @desc 组件自定义事件行为埋点(需区分是否带参数)
+     * @var {Function} fn 获取第一个参数作为回调函数
+     * @var {String} exp 获取最后一个参数并作为监听对象
+     */
+    componentInstance &&
+    componentInstance.$el === el
+  ) {
+    let args, keys, fn, exp;
+    const eventName = Object.keys(modifiers)
+      .filter(key => !MODIFIERS.includes(key))
+      .pop();
+
+    if (typeof value === "object") {
+      [args, keys] = zipArray(value);
+      fn = args.shift();
+      exp = [...keys].pop();
+      debug.checkFun(fn);
+    }
+
+    if (el[`$on_${eventName}`]) return;
+    componentInstance.$on(eventName, (...data) => {
+      this.target = el;
+      tck = events[id].bind(null, context, ...data);
+      queue = [tck, (fn || value).bind(null, ...data)];
+      modifiers.delay && queue.reverse();
+      modifiers.async && watcher(exp, queue.shift());
+      queue.forEach(sub => sub());
+      el[`$on_${eventName}`] = true; // 避免重复监听
+    });
+  } else {
+    throw new Error(`${rawName} directive is not supported`);
+  }
+}
+
+/**
+ * @desc 由于 DOM 更新采用 diff 算法更新，如果新旧节点相同，则 el 会全等，导致 bind 绑定无法更
+ * 新，出现事件绑定诡异的问题，但由于 DOM update 执行频率很高，会导致性能问题，所以这里加
+ * 了一层exactlySameVnode过滤，即只有在新旧节点发生变化时才会重新绑定，否则相反
+ *
+ * @param {*} el 同bind
+ * @param  {...any} args 同bind
+ */
+export function updated(el, ...args) {
+  if (!el.$listener) return;
+  if (!exactlySameVnode(args[1], args[2])) {
+    unbind.call(this, el);
+    bind.call(this, el, ...args);
+  }
+}
+
+export function unbind(el) {
+  el.$listener && el.removeEventListener("click", el.$listener);
+  el.$timer && clearTimeout(el.$timer);
+  el.$unwatch && el.$unwatch();
+  el.$visMonitor && el.$visMonitor.destroy();
+}

package/v-track-master/v-track-master/src/index.js

@@ -0,0 +1,79 @@
+/*
+ * @Author: 宋慧武
+ * @Date: 2019-03-06 17:49:29
+ * @Last Modified by: 宋慧武
+ * @Last Modified time: 2020-01-13 14:38:02
+ */
+import * as hooks from "./hooks";
+
+export default class VTrack {
+  constructor() {
+    this.installed = false;
+  }
+  // 保存当前点击的元素
+  static target = null;
+  // Vue.use 将执行此方法
+  static install(Vue, { trackEvents, trackEnable = {} }) {
+    trackEnable = {
+      UVPV: false,
+      TONP: false,
+      ...trackEnable
+    };
+    const TRACK_TONP = (ctx, et) => {
+      if (trackEnable.TONP) {
+        trackEvents.TONP(ctx, {
+          et,
+          dt: Date.now()
+        });
+      }
+    };
+
+    if (this.installed) return;
+    this.installed = true;
+
+    // 注册v-track全局指令
+    Vue.directive("track", {
+      bind: (...args) => hooks.bind.call(this, ...args, trackEvents),
+      componentUpdated: (...args) =>
+        hooks.updated.call(this, ...args, trackEvents),
+      unbind: (...args) => hooks.unbind.call(this, ...args)
+    });
+
+    // 注册<track-view>全局组件
+    Vue.component("TrackView", {
+      render: h =>
+        h("span", {
+          style: "display: none"
+        })
+    });
+
+    Vue.mixin({
+      data: () => ({
+        PAGE_ENTER_TIME: Date.now()
+      }),
+      created() {
+        window.onbeforeunload = () => TRACK_TONP(this, this.PAGE_ENTER_TIME);
+      },
+      // 统计UV、PV
+      beforeRouteEnter(_, __, next) {
+        next(vm => {
+          trackEnable.UVPV && trackEvents.UVPV(vm);
+        });
+      },
+      beforeRouteUpdate(_, __, next) {
+        // 确保导航升级完成
+        this.$watch("$route", () => {
+          if (trackEnable.UVPV && trackEnable.UVPV === "routeUpdate") {
+            trackEvents.UVPV(this);
+          }
+        });
+        next();
+      },
+      // 页面停留时间
+      beforeRouteLeave(_, __, next) {
+        TRACK_TONP(this, this.PAGE_ENTER_TIME);
+        next();
+      }
+    });
+  }
+}

package/v-track-master/v-track-master/src/utils/debug.js

@@ -0,0 +1,13 @@
+/*
+ * @Author: 宋慧武
+ * @Date: 2019-04-14 15:55:15
+ * @Last Modified by: 宋慧武
+ * @Last Modified time: 2019-04-20 18:06:31
+ */
+import { isFun } from "./helper";
+
+export const checkFun = fn => {
+  if (!isFun(fn)) {
+    throw new Error("The first parameter should be Function.");
+  }
+};

package/v-track-master/v-track-master/src/utils/dom.js

@@ -0,0 +1,73 @@
+/*
+ * @Author: 宋慧武
+ * @Date: 2019-04-08 11:13:34
+ * @Last Modified by: 宋慧武
+ * @Last Modified time: 2020-06-04 17:08:44
+ */
+
+/**
+ * @desc 是否为元素几点
+ *
+ * @param {DOMElement} ele 一个 DOM 元素
+ * @return {Boolean}
+ */
+export const isElement = ele => ele && ele.nodeType === 1;
+
+/**
+ * @desc 获取 DOM CSS 属性的值
+ *
+ * @param {DOMElement} ele A DOM 元素
+ * @returns {String}
+ */
+export function getStylePropValue(ele, prop) {
+  return window.getComputedStyle(ele).getPropertyValue(prop);
+}
+
+/**
+ * @desc 元素是否在可视区域可见
+ *
+ * @param {Object} rect 元素大小及相对可视区域的位置信息
+ * @returns {Boolean} true => 可见 false => 不可见
+ */
+export function isInViewport(rect, viewport) {
+  if (!rect || (rect.width <= 0 || rect.height <= 0)) {
+    return false;
+  }
+
+  return (
+    rect.bottom > 0 &&
+    rect.right > 0 &&
+    rect.top < window.innerHeight &&
+    rect.left < window.innerWidth &&
+    !(
+      rect.left > viewport.right ||
+      rect.top > viewport.bottom ||
+      rect.right < viewport.left ||
+      rect.bottom < viewport.top
+    )
+  );
+}
+
+/**
+ * @desc 元素是否隐藏
+ *
+ * @param {DOMElement} ele A DOM 元素
+ * @returns {Boolean} true => 未隐藏可见  false => 隐藏不可见
+ */
+export function isVisible(ele) {
+  if (ele === window.document) {
+    return true;
+  }
+  if (!ele || !ele.parentNode) {
+    return false;
+  }
+
+  const parent = ele.parentNode;
+  const visibility = getStylePropValue(ele, "visibility");
+  const display = getStylePropValue(ele, "display");
+
+  if (visibility === "hidden" || display === "none") {
+    return false;
+  }
+  return parent ? isVisible(parent) : true;
+}

package/v-track-master/v-track-master/src/utils/helper.js

@@ -0,0 +1,122 @@
+/*
+ * @Author: 宋慧武
+ * @Date: 2019-04-08 11:13:34
+ * @Last Modified by: 宋慧武
+ * @Last Modified time: 2019-08-05 15:31:00
+ */
+
+/**
+ * @desc 判断给定变量是否为一个函数
+ *
+ * @param {*} v
+ * @return {Boolean}
+ */
+export const isFun = v => typeof v === "function" || false;
+
+/**
+ * @desc 判断给定变量是否是未定义
+ *
+ * @param {*} v
+ */
+export const isUndef = v => v === undefined || v === null;
+
+/**
+ * @desc 判断给定变量是否是定义
+ *
+ * @param {*} v
+ */
+export const isDef = v => v !== undefined && v !== null;
+
+/**
+ * @desc 获取对象的键值
+ *
+ * @param {Object} value
+ * @returns {Array} [keys, values]
+ */
+export function zipArray(value = {}) {
+  return [Object.values(value), Object.keys(value)];
+}
+
+/**
+ * @desc 防抖函数，至少间隔200毫秒执行一次
+ *
+ * @param {Function} fn callback
+ * @param {Number} [ms=200] 默认200毫秒
+ * @returns {Function}
+ */
+export function debounce(fn, ms = 200) {
+  let timeoutId;
+  return function(...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn.apply(this, args), ms);
+  };
+}
+
+/**
+ * @desc 判断给定变量是否完全匹配目标数组
+ *
+ * @param {String[]} mdfs 目标数组
+ * @param {String} vals
+ * @returns {Boolean}
+ */
+export function _exactMatch(mdfs, vals) {
+  const keys = Object.keys(mdfs);
+
+  return keys.length === vals.length && vals.every(v => keys.includes(v));
+}
+
+/**
+ * @desc 判断给定变量是否匹配目标数组的一部分
+ *
+ * @param {String[]} mdfs 目标字符串数组
+ * @param {String} vals
+ * @returns {Boolean}
+ */
+export function _partialMatch(mdfs, vals) {
+  const keys = Object.keys(mdfs);
+
+  return vals.some(v => keys.includes(v));
+}
+
+/**
+ * @desc 判断两个节点是否为同一个vnode节点
+ *
+ * @param {VNode} a 虚拟节点
+ * @param {VNode} b 虚拟节点
+ */
+export function sameVnode(a, b) {
+  return (
+    a.key === b.key &&
+    a.tag === b.tag &&
+    a.isComment === b.isComment &&
+    isDef(a.data) === isDef(b.data)
+  );
+}
+
+/**
+ * @desc 判断两个vnode节点是否全等
+ *
+ * @param {VNode} a 虚拟节点
+ * @param {VNode} b 虚拟节点
+ */
+export function exactlySameVnode(vnode, oldVnode) {
+  if (!sameVnode(vnode, oldVnode)) return false;
+
+  const oldCh = oldVnode.children;
+  const ch = vnode.children;
+
+  // vnode为非文本节点，且新旧节点的子节点都存在但不相同
+  if (isUndef(vnode.text) && isDef(oldCh) && isDef(ch)) {
+    if (oldCh.length !== ch.length) return false;
+    for (let i = 0; i < ch.length; i++) {
+      const c = ch[i];
+
+      if (isDef(c) && isDef(oldCh[i])) {
+        return exactlySameVnode(c, oldCh[i]);
+      }
+    }
+  }
+  // vnode为文本节点，新旧节点内容不相同
+  else if (vnode.text !== oldVnode.text) return false;
+  return true;
+}

package/v-track-master/v-track-master/src/utils/vis-monitor.js

@@ -0,0 +1,183 @@
+/*
+ * @Author: 宋慧武
+ * @Date: 2019-04-08 11:13:34
+ * @Last Modified by: 宋慧武
+ * @Last Modified time: 2020-06-07 10:47:44
+ */
+import { isElement, isVisible, isInViewport } from "./dom";
+import { isFun, debounce } from "./helper";
+
+/**
+ * @class
+ * @name VisMonitor
+ *
+ * @desc 目标元素控制器
+ */
+export default class VisMonitor {
+  constructor(ele, ref, refwin = window, percent = 1) {
+    if (!isElement(ele)) {
+      throw new Error("not an element node");
+    }
+    if (percent > 1 && percent <= 0) {
+      throw new Error("'percent' must be a number between 0 and 1");
+    }
+    this.ele = ele;
+    this.ref = ref;
+    this.refWin = refwin;
+    this.started = false;
+    this.percent = percent;
+    this.prevPerc = null; // 保存前一次曝光百分比
+    this.listeners = {};
+    this.removeScrollLisener = null;
+    this.init();
+  }
+
+  init() {
+    if (!this.started) {
+      const listener = debounce(this.visibilitychange.bind(this));
+
+      listener();
+      this.removeScrollLisener = (listener => {
+        if (this.ref) {
+          return this.ref.$on("scroll", listener);
+        } else {
+          this.refWin.addEventListener("scroll", listener, true);
+          return () =>
+            this.refWin.removeEventListener("scroll", listener, true);
+        }
+      })(listener);
+      this.started = true;
+    }
+  }
+
+  viewport() {
+    const win = this.refWin;
+    const rect = isElement(win) ? win.getBoundingClientRect() : win;
+
+    return {
+      top: isElement(win) ? rect.top : 0,
+      right: rect.right || rect.innerWidth,
+      bottom: rect.bottom || rect.innerHeight,
+      left: rect.left || 0,
+      height: win.innerHeight || win.offsetHeight,
+      width: win.innerWidth || win.offsetWidth
+    };
+  }
+
+  /**
+   * 监听自定义事件
+   */
+  $on(evt, cbk) {
+    const queue = this.listeners[evt] || (this.listeners[evt] = []);
+
+    queue.push(cbk);
+    return this;
+  }
+
+  /**
+   * 移除监听自定义事件
+   */
+  $off(evt, cbk) {
+    if (!cbk) return;
+
+    let queue = this.listeners[evt];
+    let v;
+    let i = queue.length;
+
+    while (i--) {
+      v = queue[i];
+      if (v === cbk || v.cbk === cbk) {
+        queue.splice(i, 1);
+        break;
+      }
+    }
+    return this;
+  }
+
+  /**
+   * 监听自定义事件，但只触发一次
+   */
+  $once(evt, cbk) {
+    const on = (...args) => {
+      this.$off(evt, on);
+      cbk.apply(this, args);
+    };
+
+    on.cbk = cbk;
+    this.$on(evt, on);
+    return this;
+  }
+
+  /**
+   * 触发当前实例的监听回调
+   */
+  $emit(evt, ...args) {
+    const queue = this.listeners[evt] || [];
+
+    queue.forEach(sub => sub.apply(this, args));
+    return this;
+  }
+
+  /**
+   * 计算元素可见比例，如果比例为100%，则触发 fullyvisible 事件
+   */
+  visibilitychange() {
+    const rect = this.ele.getBoundingClientRect();
+    const view = this.viewport();
+
+    if (!isInViewport(rect, view) || !isVisible(this.ele)) {
+      this.prevPerc = 0;
+      return 0;
+    }
+
+    let vh = 0;
+    let vw = 0;
+    let perc = 0;
+
+    if (view.top < 0) {
+      view.top = 0;
+    }
+
+    if (view.bottom > window.innerHeight) {
+      view.bottom = window.innerHeight;
+    }
+
+    if (view.left < 0) {
+      view.left = 0;
+    }
+
+    if (view.right > window.innerWidth) {
+      view.right = window.innerWidth;
+    }
+
+    if (rect.top >= view.top && rect.bottom > view.bottom) {
+      vh = view.bottom - rect.top;
+    } else if (rect.top < view.top && rect.bottom <= view.bottom) {
+      vh = rect.bottom - view.top;
+    } else {
+      vh = rect.height;
+    }
+
+    if (rect.left >= view.left && rect.right > view.right) {
+      vw = view.right - rect.left;
+    } else if (rect.left < view.left && rect.right <= view.right) {
+      vw = rect.right - view.left;
+    } else {
+      vw = rect.width;
+    }
+
+    perc = (vh * vw) / (rect.height * rect.width);
+
+    if (this.prevPerc < this.percent && perc >= this.percent) {
+      this.$emit("fullyvisible");
+      this.prevPerc = perc;
+    }
+  }
+
+  /**
+   * 销毁当前实例的事件
+   */
+  destroy() {
+    isFun(this.removeScrollLisener) && this.removeScrollLisener();
+  }
+}