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

　　天氣愈來愈熱，同事們也是幹得熱火朝天，咱們的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)來很是方便的完成統計。

　　好吧，週六愉快的加班過去了，看看天氣預報，週日更熱。因此...博客園見吧！