如何优雅的处理页面埋点代码

        页面埋点是一种比较做业务的时候经常处理的事情，他与业务功能关系不大，却是业务数据收集的基础，用户点击啦，页面PV，UV啦，停留时长之类等等。这些代码片段分散在你的项目的各个角落，维护起来是否不便利。

        所谓优雅的埋点我的理解它需要满足以下要求

            1. 对业务功能无影响，不能因为埋点的代码错误之类阻断业务流程的执行。

            2. 维护起来比较方便，最好能在收敛到一个js里维护所有的埋点逻辑。

            3. 业务代码不要和埋点逻辑混杂太严重。移除埋点js对业务无感知

下面大致记录一下我在一个单页应用(spa)中处理埋点的方式

1. 建一个log.js处理埋点需求,

2. 在一个类似于base的js里引入这个log.js ( 其实也可以不引入，我引入是为了方便打包在一起)，我是在tool.js里引入的

3. 在base.js里暴露一个方法比如：
   

function log(logTxt,logInfo){
    j_window.trigger("log",[logTxt,logInfo]);
}
//在其他模块只需要调用log("pageName","btnXXX");就好了

4. 在log.js中监听log事件

function  sendLog(logTxt,logInfo){

       //balabala一堆逻辑，比如ali就是黄金令箭啊spm之类的。。。
        var img = new Image();
        var t = new Date().getTime();
        img.src=url+'&t='+t;
    }
}
$(window).on("log",function(event,log,logInfo){
    sendLog(log,isSpm);
});

5. 在SPA中统计子页面的PV UV也很简单比如我用的vue+vueRouter，只需要在router的钩子里加一个方法执行一下sandUV就好了

var router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {  
    var pathName = to.name;
    log(pathName,true);
    next();
})