Vue基于冒泡事件的无痕埋点方案
vue-md（vue的无埋点解决方案）https://github.com/IceZero-w/vue-md简介1.支持页面、按钮级埋点数据采集2.代码无侵入，与业务代码隔离原理1、页面挂载时，监听页面跳转和点击事件2、页面监听方法addViewListener：基于vue-router的beforeEach钩子，监听并采集页面路由的值3、点击事件addClickListener：基于冒泡事件的原理监听document.onclick方法，用于获取元素最近一层dom绑定的data-xxx属性，进行数据通信。启动项目npminstallnpmrunserver查看埋点效果。打开控制台查看埋点数据。如何使用main.js中直接引用VueMDimportVueMDfrom'./vue-md.js'Vue.use(VueMD);如何存储数据采集页面访问数据addViewListener()自动采集页面访问数据无需主动操作，会保存在ruoter.js上定义的路由信息??采集点击事件addClickListener()dom必须绑定一个data-md-name属性声明dom为埋点dom情况：test，点我埋点
如何向服务端发送数据pushOrigin()使用vue-router的afterEach钩子上传埋点数据。其实上传数据的时间节点是可以自定义的...haha??vue-md.js代码importrouterfrom'./router'functionisEmptyObject(obj){return!obj||!Object.keys(obj).length}constinstall=()=>{//全局只挂在一个实例上window.onload=()=>{window.$MD=newVueMD();}}/*web数据埋点*/classVueMD{constructor(){this.pageFrom={};//页面从哪里来this.pageCurrent={};//当前页面this.mdList=[];this.addListenner();}//添加全局埋点监听器addListenner(){this.addViewListener();这。addClickListener();}//监听页面路由变化addViewListener(){consthandleViewMD=()=>{constdata={type:'view',page:{from:this.pageFrom,current:this.pageCurrent,},data:null,}this.recordMD(data)}//记录路由数据router.beforeEach((to,from,next)=>{this.pageFrom=from;this.pageCurrent=to;handleViewMD();next()})//推送已有的嵌入点数据router.afterEach(()=>{this.mdList.length&&this.pushOrigin();})}//监听点击事件addClickListener(){consthandleClickMD=(dataset)=>{constdata={type:'click',page:{from:this.pageFrom,current:this.pageCurrent,},data:dataset,}this.recordMD(data)}document.onclick=(e)=>{让我=0;while(i
