使用Vue开发一个实时性时间转换指令


Posted in Javascript onJanuary 17, 2018

前言

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

接下来正文从这开始~

使用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上面了解下。

使用Vue开发一个实时性时间转换指令

接着说回来,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)方法在控制台打印一下,就一目了然了。

使用Vue开发一个实时性时间转换指令

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

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

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

总结

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

以上所述是小编给大家介绍的使用Vue开发一个实时性时间转换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
JS Array对象入门分析
Oct 30 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
angularjs 页面自适应高度的方法
Jan 17 #Javascript
VueJs监听window.resize方法示例
Jan 17 #Javascript
详解AngularJS之$window窗口对象
Jan 17 #Javascript
React-native桥接Android原生开发详解
Jan 17 #Javascript
vue自定义指令directive实例详解
Jan 17 #Javascript
移动web开发之touch事件实例详解
Jan 17 #Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 #Javascript
You might like
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
javascript实现简易计算器
2017/02/01 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
解析Vue2.0双向绑定实现原理
2017/02/23 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
做一个有道德的人活动实施方案
2014/08/23 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
Go语言中break label与goto label的区别
2021/04/28 Golang
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python