cbvirtua 1.0.122 → 2.0.1

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

@@ -1,217 +0,0 @@
-/*
- * @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

@@ -1,79 +0,0 @@
-/*
- * @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

@@ -1,13 +0,0 @@
-/*
- * @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

@@ -1,73 +0,0 @@
-/*
- * @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

@@ -1,122 +0,0 @@
-/*
- * @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

@@ -1,183 +0,0 @@
-/*
- * @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();
-  }
-}