那些年，加班搞过的需求...

　　天气愈来愈热，同事们也是干得热火朝天，咱们的wap版也已经上线，要迎来正式推广了。在这个激动人心的时刻，干点什么好呢？固然是加！需！！求！！！

　　为了更好的根据用户反馈来改进咱们的的产品，咱们要统计一些数据，例如来源url，在页面中停留的时长，用户点击了哪一个标签等等。其中有一个需求是在用户浏览的过程当中发送心跳包，post请求的参数中包含centerTag，即屏幕中心位置的Tag标签。关于这个参数花了我很多时间，虽然我已经给页面上重要的标签都加了id（点击以后怎么获取后文详说），可是在用户没有点击屏幕的状况下我怎么判断是哪一个幸运的div出如今了屏幕中央呢？后来决定迂回一下，经过scrollTop知道页面滚出屏幕的距离再经过window.screen.height获取手机屏幕的高度，取滚动高度加上屏幕高度的40%~60%做为当前屏幕中央的纵坐标。后期须要的时候在浏览器中调整手机屏幕的大小，就能够复现当时的情景了，算是没有辜负组织的重托...

　　接下来讲一说点击某个div的时候如何获取它的id。以前作的项目都是用的原生js或者jq，这里的this就是当前的dom对象了，因此能够很轻松的经过getAttribute("id")或者attr('id')获取id。但是在vue中，this是vue对象啊，这可如何是好？后来尝试点击的时候传event过来,获得了这个：

 

划重点了！注意最下面的path，展开后是这样的：

看起来是冒泡的路径，在此展开就是...

小伙子藏得可真深啊！这里有className有id，甚至还有宽高和位置真是棒die。ok这个问题也解决了，能够准备迎接下一个问题了。

　　除了打开页面和浏览页面，跳转和关闭时天然也须要统计。由于咱们是电商网站，因此很重视SEO，所以采用了vue推荐的SSR中的nuxt.js。那么问题来了，在nuxt中使用watch监听路由、甚至使用中间件middleware都没法获取来源url和目标url，也就是route中的from和to。而这有时很是关键的参数，咱们要经过这个判断从哪里来，到哪里去（我是睡？我在哪？我在干什么？），还有此次跳转是站内跳转仍是站外跳转。后来经过beforeRouteEnter这个钩子解决了问题，代码以下：

 1 beforeRouteEnter (to, from, next) {
 2     // 统计代码-页面跳转
 3     let jumpParams = {
 4       token: 'token', // token,
 5       url: '',
 6       targetUrl: '', // 目标URL（带参数）
 7       jumpType: 'in', // 跳转类型，分为站内跳转与站外跳转
 8       fromTag: 'fromTag', // fromTag站内跳转来源标签
 9       pageType: 'b_wap_index', // pageType内容类型
10       contentID: 'b_wap_index', // contentID对应分类页或产品页ID
11       // elapsedTime: 0
12     };
13     jumpParams.url = from.path;
14     jumpParams.targetUrl = to.path;
15     // let time = new Date().getTime() - this.beginTime;
16     // jumpParams.elapsedTime = time.toString();
17     countJump(jumpParams);
18 
19     next();
20   },

要注意的是这个next()必定不能少，能够认为是一个启动的标志。此时beforeRouteEnter 守卫 不能 访问 this，由于守卫在导航确认前被调用,所以即将登场的新组件还没被建立。注意 beforeRouteEnter 是支持给 next 传递回调的惟一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来讲，this 已经可用了，因此不支持传递回调，由于没有必要了。

　　最后，在页面关闭时还须要最后一次统计数据，这里没有什么幺蛾子，只是beforeDestroy这个钩子不多用到，算是查漏补缺了吧！贴下代码：

beforeDestroy: function() {
    this.closeParams.token = this.openParams.token;
    this.closeParams.url = this.openParams.url;
    this.closeParams.referUrl = this.openParams.referUrl;
    let time = new Date().getTime() - this.beginTime;
    this.closeParams.elapsedTime = time.toString();
    countClose(this.closeParams);
  }

　　补充一下：最终我把统计代码经过prototype扩展到vue中，写成形如

　　Vue.prototype.countClose = function (params, _this){

　　　　``` ```

　　}

的样子，在须要统计的页面直接经过this.countClose(params, this)来很是方便的完成统计。

　　好吧，周六愉快的加班过去了，看看天气预报，周日更热。因此...博客园见吧！