提升系列:3.获取格式化时间-3

277 阅读4分钟

我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!

提升系列

提升系列,我主要是想写一些平时工作上面,自己会用到的一些好的技巧或者方法。当然,这些技巧和方法是针对我自己的。

除此之外,还可能会写一些解决难点的方法。比如,遇到了某个难点,要通过什么方法来解决它?

正如它的名字一样--提升,通过学习一些好的技巧、方法,或者解决一些难题、难点,来提升我们的能力。

出这个提升系列,一方面,是提升自己的开发能力;另一方面,也希望这个提升系列,可以帮助到部分人,提升他们的开发能力。

在这个系列里,我能想到的或者实现方法,不一定是最好的。欢迎大家参与讨论。

问题

近来登录掘金的时候,掘金推送了系统消息给我

码上掘金挑战赛来了,show出创意赢大奖!

点进去一看,原来掘金要出一个码上掘金挑战赛了,通知我去参加。

不过这没有吸引我的注意,看完标题后,往下看文章作者的头像时,发现名字下面有一排时间

0001.png

我们前端开发的时候,经常会需要处理这些时间。比如后端返回一个时间戳给到我们前端,我们就需要把这个时间戳格式化为我们需要展示的时间。有些后端人可能比较好,会帮我们把时间的格式处理好了,返回给我们前端,我们前端直接使用就好了。但是大部分后端,可能没有这么好心,都是给一个时间戳给到我们前端,需要我们自己处理时间格式了。

前言

在上一篇文章里,我们讲解了怎么使用第三方库moment.js来处理时间的格式化问题。使用moment.js来处理时间格式化挺好用的,那它有没有问题或者缺陷呢?

缺陷是没有多大缺陷的,不过有一些小不足吧,那就是这个第三方依赖库的大小有40kb。在pc端,使用它没有多大问题。但是到了移动端,第三方依赖库体积大了,会导致打包体积过大,影响页面的打开速度。我们希望使用的第三方依赖库越小越好。

这时候,我们就会用到另外一个依赖库来解决时间格式化题--dayjs

Day.js是一个极简的JavaScript库,可以为现代浏览器解析、验证、操作和显示日期和时间。

这是dayjs的官网介绍,接下来,我们看下怎么使用dayjs来进行时间格式化。

实现

就以掘金上面的时间格式,来作为我们这次实现的目标

0001.png

创建一个index.html文件,在这个文件里实现我们的代码逻辑。

先是通过cdn的方式,引入day.js。

<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.5/dayjs.min.js"></script>

引入day.js后,会往window对象添加一个dayjs对象,即我们可以全局使用dayjs了。

我们查看dayjs官网,可以知道dayjs提供了一个format方法供我们调用,传递的参数为我们想要的时间格式

这里,我们想要的是年、月、日、时、分、秒的格式,我们传递以下时间格式进去

YYYY年MM月DD日 hh:mm:ss

通过调用format方法,我们把时间的,,,,,格式获取到了

我们测试验证一下

 console.log(dayjs().format("YYYY年MM月DD日 HH:mm:ss"));

查看打印结果

0003.png

可以看到,时间格式化后打印出来了

放上我们的代码块

小结

本小节,主要是讲解了怎么利用第三方库--day.js,来实现时间的格式化。day.js这个依赖库,和moment.js依赖库相比,它的优点是包体积更小。

通过调用dayjs的format方法,来获取时间的年、月、日、时、分、秒,然后按照我们想要的格式来进行输出即可。

最后,放上自己比较喜欢的一句诗句:

千淘万漉虽辛苦,吹尽狂沙始到金 - 唐 刘禹锡《浪淘沙》