前言

最近有一个说法,如果你看见某个网站的某个功能,你就大概能猜出背后的业务逻辑是怎么样的,以及你能动手开发一个一毛一样的功能,那么你的前端技能算是进阶中高级水平了。比如咱们今天要聊的这个话题:如何用Vue开发一个实时性的时间转换指令?

接下来正文从这开始~

如上图所示(我是截取的某技术社区首页的部分页面),大家看到用红色边框勾选中的时间文字了吧。很多网站发布动态的时候,都会有一个相对本机时间转换后的相对时间。那你知道这个功能实现的背后原理是什么吗?如果有兴趣的,请备好瓜子,茶水,继续往下读。

一般在服务器的存储时间格式是Unix时间戳,比如 2018-01-17 06:00:00的时间戳是1516140000。前端在拿到数据后,将它转换为可持续的时间格式再显示出来。为了显示出实时性,在一些社交类产品中,甚至会实时转换为几秒前、几分钟前、几小时前等不同的格式,因为这样比直接转换为年、月、日、时、分、秒,显得对用户更加友好,体验更人性化。

今天,我们就来实现这样一个Vue自定义指令v-time,将表达式传入的时间戳实时转换为相对时间。为了便于演示效果,我们初始化时定义了两个时间。

首先来看html结构:

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

以及初始化一个Vue实例:

var app = new Vue({
    el:'#app',
    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 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
                var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
                return date.getFullYear() + '-' + month + '-' + 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 = '';

                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) + '小时前';
                }else if(timer/86400 <= 31){
                    tip = Math.ceil(timer/86400) + '天前';
                }else{
                    tip = this.getLastDate(timestamp);
                }
                return tip;
            }

        }

当然,如果你对JavaScript的Date类型不太了解,可以先去runoob.com上面了解下。

接着说回来,Time.getFormatTime()方法就是自定义指令v-time所需要的,参数为毫秒级时间戳,返回已经整理好的时间格式的字符串。

最后,来看我们如何用Vue自定义一个指令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表达式的值binding.value作为参数传入Time.getFormatTime()方法中得到格式化时间,在通过el.innerHTML写入指令所在元素。定时器el.__timeout__每分钟触发一次,更新时间,并且在unbind钩子里清除掉。

你可能会问,这个binding.value是什么?

当然,你可以通过console.log(binding)方法在控制台打印一下,就一目了然了。

在这里,我先补充下,自定义指令的选项是由几个钩子函数组成的,有bind、insert、update、componentUpdated、unbind。而其中的bind和unbind只调用一次。每个钩子函数都有几个参数可用,比如我们上面用到的el和binding。

el指令所绑定的元素可以用来直接操作DOM。而binding是一个对象,包含很多属性,如上图所示:

  • name:指令名
  • rawName:自定义指令
  • value:指令的绑定值
  • expression:绑定值的字符串形式
  • modifiers:一个包含修饰符的对象

总结

在编写自定义指令时,给DOM绑定一次性事件等初始动作,建议在bind钩子内完成,同时要在unbind内解除相关绑定。

后记

前端路漫漫,这是不真的事实。而我想说的是,无论前途多么遥远,我都希望你做一个志在四方的少年。


欢迎关注我的公众号:闰土大叔,我在那里等你。

用Vue开发一个实时性时间转换功能,看这篇文章就够了的更多相关文章

  1. Vue开发入门看这篇文章就够了

    摘要: 很多值得了解的细节. 原文:Vue开发看这篇文章就够了 作者:Random Fundebug经授权转载,版权归原作者所有. 介绍 Vue 中文网 Vue github Vue.js 是一套构建 ...

  2. csdn上讲一个实时计算架构比较清晰的一篇文章

    https://blog.csdn.net/ymh198816/article/details/51998085

  3. 用vue开发一个app(4,一个久等了的文章)H5直播平台登录注册(1)

    我上一篇关于vue的文章和这一篇时间隔了有点久了.最近终于写完了. 因为我一直想写个有点实绩的东西,而不是随便写一个教程一样东西.结合最近在项目中学到的经验和我的一点创意. 首先介绍下这是个什么! H ...

  4. 【如何快速的开发一个完整的iOS直播app】(原理篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的 ...

  5. 【如何快速的开发一个简单的iOS直播app】(代码篇)

    开篇([如何快速的开发一个完整的iOS直播app](原理篇)) 好久没写简书,因为好奇的我跑去学习直播了,今天就分享一下我的感慨. 目前为止直播还是比较热点的技术的,简书,git上有几篇阅读量和含金量 ...

  6. 用vue开发一个公众号商城SPA——1.前期准备和写页面

    使用vue开发公众号商城 第1篇记录项目准备.搭建,写页面遇到第问题以及总结,持续更新 公司最近接了个商城项目,包括PC端商城.微信公众号网页商城.后台管理系统.这几天在做微信公众号商城,又新接触了很 ...

  7. 用vue开发一个app(2,main.js)

    昨天跟着vue的官网搭建了vue的一个脚手架,我也是第一次用VUE一切都在摸索阶段. 今天试着看下里面脚手架里面有点什么东西 先看看main.js 导入了3个模块 一个vue,一个app,还有rout ...

  8. VUE开发一个图片轮播的组件

    完成效果图如下: vue开发的思路主要是数据绑定,代码如下: <template> <div ref="root" style="user-select ...

  9. 【如何快速的开发一个完整的iOS直播app】(美颜篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,美颜功能是很重 ...

随机推荐

  1. iOS开发小技巧--自定义带有占位文字的TextView(两种方式)

    自定义控件注意或框架注意:自己暴露在外面的属性,一定要重写setter,保证外界与内部的交互性 一.方案一:通过drawRect:方法将文字画到textView中,监听文字改变用的是通知中心(代理也可 ...

  2. 有关Rander生成随机数的问题

    首先我们说的是要生成一个随机数要求传入两个参数.一个表示生成的个数,另外一个表示生成的长度 . public void shengchengsuijishu(int lenght) { '}; Ran ...

  3. Struts2 Convention插件的使用(2)return视图以及jsp的关系

    package com.hyy.action; import com.opensymphony.xwork2.ActionSupport; public class HelloWorld extend ...

  4. 前端开发构建工具gulp的安装使用

    曾几何时还在使用grunt作为前端的构建工具,直到有一天同事向我推荐了gulp,在这里博主将不讨论gulp与grunt各自优势的比较,只为大家介绍gulp如何安装和使用. Gulp 是用 nodejs ...

  5. MongoDB性能优化指南

    一.索引 MongoDB 提供了多样性的索引支持,索引信息被保存在system.indexes 中,且默认总是为_id创建索引,它的索引使用基本和MySQL 等关系型数据库一样.其实可以这样说说,索引 ...

  6. Linux增加swap分区大小

    1. 查看当前分区情况 free -m 2. 增加 swap 大小, 2G 左右 dd if=/dev/zero of=/var/swap bs=1024 count=2048000 3. 设置交换文 ...

  7. Html标签中Alt和Title都是提示性语言标签

    在Html标签中Alt和Title都是提示性语言标签,在我们浏览一些网页时,鼠标停留在一张图片或文字链接上时,在鼠标的右下角出现一个提示信息框,对目标进行一定的注释说明,这就是它们的作用.    其中 ...

  8. 遇到报ClassNotFoundException: Didn&#39;t find class &quot;...Activity&quot; on path: DexPathList

    有一个工程,本来运行是正常的,我想把它移植到另一台PC上,结果报: java.lang.RuntimeException: Unable to instantiate activity Compone ...

  9. win10 + python3.6 + VSCode + tensorflow-gpu + keras + cuda8 + cuDN6N环境配置

    写在前面的话: 再弄这个之前,我对python也好,tensorflow也好几乎是0认知的,所以配置这个环境的时候,走了不少弯路,整整耗费了一个星期的时间才搭配完整这个环境,简直了...然而最气的是, ...

  10. C语言中-&gt;是什么意思啊?比如说 p=p-&gt;next 到底表达了什么意思,请说清楚点,还有-&gt;这个符号是一个整体吗,什么意思??

    ->是一个整体,它是用于指向结构体.C++中的class等含有子数据的指针用来取子数据.换种说法,如果我们在C语言中定义了一个结构体,然后申明一个指针指向这个结构体,那么我们要用指针取出结构体中 ...