Vue를 사용하여 시간 변환 지침을 개발하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

Vue를 사용하여 시간 변환 지침을 개발하는 방법은 무엇입니까?

亚连

풀어 주다： 2018-06-11 16:15:52

원래의

2168명이 탐색했습니다.

표현식에 전달된 타임스탬프를 실시간으로 상대 시간으로 변환하는 Vue 사용자 정의 명령어 v-time을 구현해 보겠습니다. 아래에서는 Vue를 이용한 실시간 시간 변환 방법을 가져왔습니다. 필요하신 친구들은 참고하시면 됩니다

머리말

최근 웹사이트의 특정 기능을 보면 그 뒤에 숨어 있는 비즈니스 로직이 무엇인지 추측할 수 있고, 동일한 기능을 개발할 수 있다면 프론트 엔드 기술은 중급에서 고급 수준으로 간주됩니다. 예를 들어, 오늘 이야기할 주제는 Vue를 사용하여 실시간 변환 명령을 개발하는 방법입니다.

텍스트는 여기서부터 시작됩니다~

위 그림과 같이(기술 커뮤니티 홈페이지의 일부를 가로채서) 빨간색 테두리로 체크된 시간 텍스트를 볼 수 있습니다. 많은 웹사이트에서 업데이트를 게시할 때 현지 시간을 기준으로 변환된 상대 시간이 있습니다. 그렇다면 이 기능을 구현하는 원리를 알고 계시나요? 관심 있으신 분들은 멜론씨앗과 차를 준비하시고 계속해서 읽어보시기 바랍니다.

일반적으로 서버에 저장되는 시간 형식은 Unix 타임스탬프입니다. 예를 들어 2018-01-17 06:00:00의 타임스탬프는 1516140000입니다. 프런트 엔드는 데이터를 가져온 후 이를 지속 가능한 시간 형식으로 변환한 다음 표시합니다. 실시간으로 표시하기 위해 일부 소셜 제품에서는 실시간으로 몇 초 전, 몇 분 전, 몇 시간 전 등의 다양한 형식으로 변환되기도 합니다. 이는 연, 월, 전으로 직접 변환하는 것보다 낫기 때문입니다. 일, 시간, 분 등. 몇 초 안에 더 사용자 친화적으로 나타나고 경험은 더 인간적입니다.

오늘은 표현식에 전달된 타임스탬프를 실시간으로 상대 시간으로 변환하는 Vue 사용자 정의 명령 v-time을 구현해 보겠습니다. 시연 효과를 촉진하기 위해 초기화 과정에서 2번을 정의했습니다.

먼저 HTML 구조를 살펴보겠습니다:

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

로그인 후 복사

그리고 Vue 인스턴스를 초기화합니다:

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

로그인 후 복사

timeNow는 현재 시간이고 timeBefore는 하드 코딩된 시간입니다: 1991-09-30.

먼저 시간 변환의 논리를 분석해 보겠습니다.

1분 전에는 "방금 지금"이 표시되었습니다.
1분에서 1시간 사이에는 "xx분 전"이 표시됩니다.
1시간에서 1일 사이에는 "xx시간 전"이 표시됩니다.
1일부터 1개월(31일) 사이에는 "xx일 전"이 표시됩니다.
이 1개월보다 크면 "xx년 xx월 xx일"로 표시됩니다.

이렇게 나열하면 논리가 한눈에 명확해집니다. 판단을 더 쉽게 하기 위해 여기서는 크기 판단에 타임스탬프를 일률적으로 사용합니다. v-time 명령을 작성하기 전에 일련의 시간 관련 함수를 작성해야 합니다. Time 객체를 선언하고 그 안에 모두 캡슐화합니다.

 var Time = {
      //获取当前时间戳
      getUnix:function(){
        var date = new Date();
        return date.getTime();
      },
      //获取今天0点0分0秒的时间戳
      getTodayUnix:function(){
        var date = new Date();
        date.setHours(0);
        date.setMinutes(0);
        date.setSeconds(0);
        date.setMilliseconds(0);
        return date.getTime();
      },
      //获取今年1月1日0点0分0秒的时间戳
      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();
      },
      //获取标准年月日
      getLastDate:function(time){
        var date = new Date(time);
        var month = date.getMonth() + 1 < 10 ? &#39;0&#39; + (date.getMonth() + 1) : date.getMonth() + 1;
        var day = date.getDate() < 10 ? &#39;0&#39; + date.getDate() : date.getDate();
        return date.getFullYear() + &#39;-&#39; + month + &#39;-&#39; + day;
      },
      //转换时间
      getFormatTime:function(timestamp){
        var now = this.getUnix(); // 当前时间戳
        var today = this.getTodayUnix(); // 今天0点的时间戳
        var year = this.getYearUnix(); // 今年0点的时间戳
        var timer = (now - timestamp) / 1000; // 转换为秒级时间戳
        var tip = &#39;&#39;;

        if(timer <= 0){
          tip = &#39;刚刚&#39;;
        }else if(Math.floor(timer/60) <= 0){
          tip = &#39;刚刚&#39;;
        }else if(timer < 3600){
          tip = Math.floor(timer/60) + &#39;分钟前&#39;;
        }else if(timer >= 3600 && (timestamp - today >= 0)){
          tip = Math.floor(timer/3600) + &#39;小时前&#39;;
        }else if(timer/86400 <= 31){
          tip = Math.ceil(timer/86400) + &#39;天前&#39;;
        }else{
          tip = this.getLastDate(timestamp);
        }
        return tip;
      }
    }

로그인 후 복사

물론 JavaScript의 Date 유형에 대해 잘 모른다면 먼저 runoob.com으로 이동하여 자세히 알아볼 수 있습니다.

다음으로 Time.getFormatTime() 메서드는 사용자 정의 명령어 v-time에 필요합니다. 매개변수는 밀리초 수준 타임스탬프이며 정리된 시간 형식으로 문자열을 반환합니다.

마지막으로 Vue를 사용하여 명령어 v-time을 사용자 정의하는 방법을 살펴보겠습니다.

Vue.directive(&#39;time&#39;,{
  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__;
  }
})

로그인 후 복사

바인드 후크에서 명령어 v-time 표현식 바인딩.value의 값을 매개변수로 Time.getFormatTime() 메서드에 전달합니다. to get 포맷 시 el.innerHTML을 통해 명령어를 작성한 요소를 사용합니다. 타이머 el.__timeout__은 1분마다 트리거되고 시간을 업데이트하며 바인드 해제 후크에서 지워집니다.

이 바인딩 값이 무엇인지 물어볼 수도 있습니다.

물론 console.log(바인딩) 메소드를 통해 콘솔에 출력할 수도 있는데, 한눈에 알 수 있을 겁니다.

여기서 먼저 사용자 지정 지침에 대한 옵션이 바인딩, 삽입, 업데이트, 구성 요소 업데이트 및 바인딩 해제를 포함한 여러 후크 기능으로 구성되어 있다는 점을 추가하겠습니다. 바인딩 및 바인딩 해제는 한 번만 호출됩니다. 각 후크 함수에는 위에서 사용한 el 및 바인딩과 같은 사용 가능한 여러 매개변수가 있습니다.

el 지시문에 바인딩된 요소를 사용하여 DOM을 직접 조작할 수 있습니다. Binding은 위 그림과 같이 많은 속성을 포함하는 개체입니다.