使用Vue開發(fā)一個(gè)實(shí)時(shí)性時(shí)間轉(zhuǎn)換指令

前言

最近有一個(gè)說法，如果你看見某個(gè)網(wǎng)站的某個(gè)功能，你就大概能猜出背后的業(yè)務(wù)邏輯是怎么樣的，以及你能動(dòng)手開發(fā)一個(gè)一毛一樣的功能，那么你的前端技能算是進(jìn)階中高級(jí)水平了。比如咱們今天要聊的這個(gè)話題：如何用Vue開發(fā)一個(gè)實(shí)時(shí)性的時(shí)間轉(zhuǎn)換指令？

接下來正文從這開始~

 如上圖所示（我是截取的某技術(shù)社區(qū)首頁的部分頁面），大家看到用紅色邊框勾選中的時(shí)間文字了吧。很多網(wǎng)站發(fā)布動(dòng)態(tài)的時(shí)候，都會(huì)有一個(gè)相對(duì)本機(jī)時(shí)間轉(zhuǎn)換后的相對(duì)時(shí)間。那你知道這個(gè)功能實(shí)現(xiàn)的背后原理是什么嗎？如果有興趣的，請(qǐng)備好瓜子，茶水，繼續(xù)往下讀。

一般在服務(wù)器的存儲(chǔ)時(shí)間格式是Unix時(shí)間戳，比如 2018-01-17 06:00:00的時(shí)間戳是1516140000。前端在拿到數(shù)據(jù)后，將它轉(zhuǎn)換為可持續(xù)的時(shí)間格式再顯示出來。為了顯示出實(shí)時(shí)性，在一些社交類產(chǎn)品中，甚至?xí)?shí)時(shí)轉(zhuǎn)換為幾秒前、幾分鐘前、幾小時(shí)前等不同的格式，因?yàn)檫@樣比直接轉(zhuǎn)換為年、月、日、時(shí)、分、秒，顯得對(duì)用戶更加友好，體驗(yàn)更人性化。

今天，我們就來實(shí)現(xiàn)這樣一個(gè)Vue自定義指令v-time，將表達(dá)式傳入的時(shí)間戳實(shí)時(shí)轉(zhuǎn)換為相對(duì)時(shí)間。為了便于演示效果，我們初始化時(shí)定義了兩個(gè)時(shí)間。

首先來看html結(jié)構(gòu)：

<div id="app" v-cloak>
  <div v-time="timeNow"></div>
  <div v-time="timeBefore"></div>
</div>

以及初始化一個(gè)Vue實(shí)例：

var app = new Vue({
  el:'#app',
  data:{
    timeNow:(new Date()).getTime(),
    timeBefore:686219755822
  }
})

timeNow是目前的時(shí)間，timeBefore是一個(gè)寫死的時(shí)間：1991-09-30。

先來分析一下時(shí)間轉(zhuǎn)換的邏輯：

• 1分鐘以前，顯示“剛剛”。
• 1分鐘~1小時(shí)之間，顯示“xx分鐘前”。
• 1小時(shí)~1天之間，顯示“xx小時(shí)前”。
• 1天~1個(gè)月（31天）之間，顯示“xx天前”。
• 大于1個(gè)月，顯示“xx年xx月xx日”。

這樣羅列出來，邏輯就一目了然了。為了使判斷更簡單，我們這里統(tǒng)一使用時(shí)間戳進(jìn)行大小判斷。在寫指令v-time之前，需要先寫一系列與時(shí)間相關(guān)的函數(shù) ，我們聲明一個(gè)對(duì)象Time，把它們都封裝到里面。

 var Time = {
      //獲取當(dāng)前時(shí)間戳
      getUnix:function(){
        var date = new Date();
        return date.getTime();
      },
      //獲取今天0點(diǎn)0分0秒的時(shí)間戳
      getTodayUnix:function(){
        var date = new Date();
        date.setHours(0);
        date.setMinutes(0);
        date.setSeconds(0);
        date.setMilliseconds(0);
        return date.getTime();
      },
      //獲取今年1月1日0點(diǎn)0分0秒的時(shí)間戳
      getYearUnix:function(){
        var date = new Date();
        date.setMonth(0);
        date.setDate(1);
        date.setHours(0);
        date.setMinutes(0);
        date.setSeconds(0);
        date.setMilliseconds(0);
        return date.getTime();
      },
      //獲取標(biāo)準(zhǔn)年月日
      getLastDate:function(time){
        var date = new Date(time);
        var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
        var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        return date.getFullYear() + '-' + month + '-' + day;
      },
      //轉(zhuǎn)換時(shí)間
      getFormatTime:function(timestamp){
        var now = this.getUnix(); // 當(dāng)前時(shí)間戳
        var today = this.getTodayUnix(); // 今天0點(diǎn)的時(shí)間戳
        var year = this.getYearUnix(); // 今年0點(diǎn)的時(shí)間戳
        var timer = (now - timestamp) / 1000; // 轉(zhuǎn)換為秒級(jí)時(shí)間戳
        var tip = '';

        if(timer <= 0){
          tip = '剛剛';
        }else if(Math.floor(timer/60) <= 0){
          tip = '剛剛';
        }else if(timer < 3600){
          tip = Math.floor(timer/60) + '分鐘前';
        }else if(timer >= 3600 && (timestamp - today >= 0)){
          tip = Math.floor(timer/3600) + '小時(shí)前';
        }else if(timer/86400 <= 31){
          tip = Math.ceil(timer/86400) + '天前';
        }else{
          tip = this.getLastDate(timestamp);
        }
        return tip;
      }
    }

當(dāng)然，如果你對(duì)JavaScript的Date類型不太了解，可以先去runoob.com上面了解下。

接著說回來，Time.getFormatTime()方法就是自定義指令v-time所需要的，參數(shù)為毫秒級(jí)時(shí)間戳，返回已經(jīng)整理好的時(shí)間格式的字符串。

最后，來看我們?nèi)绾斡肰ue自定義一個(gè)指令v-time：

Vue.directive('time',{
  bind:function(el, binding){
    el.innerHTML = Time.getFormatTime(binding.value);
    el.__timeout__ = setInterval(function(){
      el.innerHTML = Time.getFormatTime(binding.value);
    }, 60000)
  },
  unbind:function(el){
    clearInterval(el.__timeout__);
    delete el.__timeout__;
  }
})

在bind鉤子里，將指令v-time表達(dá)式的值binding.value作為參數(shù)傳入Time.getFormatTime()方法中得到格式化時(shí)間，在通過el.innerHTML寫入指令所在元素。定時(shí)器el.__timeout__每分鐘觸發(fā)一次，更新時(shí)間，并且在unbind鉤子里清除掉。

你可能會(huì)問，這個(gè)binding.value是什么？

當(dāng)然，你可以通過console.log(binding)方法在控制臺(tái)打印一下，就一目了然了。

在這里，我先補(bǔ)充下，自定義指令的選項(xiàng)是由幾個(gè)鉤子函數(shù)組成的，有bind、insert、update、componentUpdated、unbind。而其中的bind和unbind只調(diào)用一次。每個(gè)鉤子函數(shù)都有幾個(gè)參數(shù)可用，比如我們上面用到的el和binding。

el指令所綁定的元素可以用來直接操作DOM。而binding是一個(gè)對(duì)象，包含很多屬性，如上圖所示：

• name：指令名
• rawName：自定義指令
• value：指令的綁定值
• expression：綁定值的字符串形式
• modifiers：一個(gè)包含修飾符的對(duì)象

總結(jié)

在編寫自定義指令時(shí)，給DOM綁定一次性事件等初始動(dòng)作，建議在bind鉤子內(nèi)完成，同時(shí)要在unbind內(nèi)解除相關(guān)綁定。

以上所述是小編給大家介紹的使用Vue開發(fā)一個(gè)實(shí)時(shí)性時(shí)間轉(zhuǎn)換功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！