Moment.js、Day.js、Miment,日期时间库怎么选?
一直以来,处理时间和日期的JavaScript库,选用的都是Momment.js
。它的API清晰简单,使用方便灵巧,功能还特别齐全。
大师兄是Moment.js
的重度使用者。凡是遇到时间和日期的操作,就把Moment.js
引用上。
直到有天我发现加载的moment.min.js大小有19.8KB,而我的页面整体大小还不到5KB,Moment.js
给我的吸引力顿减。这Moment.js
体积是忒大了一点。
于是就在开源社区找到了两个精简的替代方案:Day.js
和Miment
。
Day.js
是一个极简的JavaScript库,可以为现代浏览器解析、验证、操作和显示日期和时间。Day.js
本身就是对标Moment.js
进行开发的,极力兼容了Moment.js
的API。官网上有一句话If you use Moment.js, you already know how to use Day.js.
我们来对比下Day.js
和Moment.js
的使用。
//解析和显示
dayjs().format();
moment().format();
//格式化
dayjs('2021-11-18', 'YYYY-MM-DD')
moment('2021-11-18', 'YYYY-MM-DD')
//依赖原生 Javascript Date 对象
var d = new Date(2018, 8, 18);
var day = dayjs(d);
var m_day = moment(d);
//取值
dayjs().year()
moment().year()
//操作
dayjs('2020-01-25').add(1, 'day').subtract(1, 'year').year(2009);
moment('2020-01-25').add(7, 'days').subtract(1, 'months').year(2009);
Day.js
的API和Moment.js
几乎一模一样,学习成本和迁移成本非常低。API调用语句绝大部分情况下可以一字不改。Day.js
的大小是多少呢?2KB。再想想Moment.js
的大小,你说香不香。
Miment
(“Mini Moment”)也是一个轻量级的时间库,打包压缩后体积更小:大约1KB。
作者团队保留了Moment.js
中核心方法,用于应对普通场景下的需求,从而有个这个精简版的Moment。
Miment
API分为3大类
第一类,返回其他对象的,比如format
,返回的是字符串,json
返回的是一个json对象。
miment().format('YYYY') // 2021
miment().json() //{"year": 2021,"month": 11,"date": 16,"hour": 16,"minute": 26,"second": 45,"day": 2,"milliSecond": 887}
第二类,返回Miment
对象。你可以在调完一个API后面继续调用另一个API,也就是我们所说的链式调用。
miment().add(1, 'YYYY').add(2, 'MM').add(-3, 'DD')
需要注意的是,不能把第一类和第二类API混用。当你调完第一类方法后,返回的对象类型不是Miment
对象,后面就不支持链式调用了。
第三类从Date对象继承的,也就是说Date对象有的方法,Miment
也同样有。
miment().getFullYear() //2021
miment().getDate() //16
如果你想要Moment.js
的若干核心能力但又不希望包体积膨胀时,欢迎尝试Miment
。
是不是我们可以完全用Day.js
或Miment
替代Moment.js
呢?
不是。其一,框架或JavaScript库本已经依赖了Moment.js
,没必要用Day.js
或Miment
进行替代了。
其二,当需要更完善的API操作时,Moment.js
毕竟功能更齐全。Miment
只包含了核心功能。
除开上面两种情况,在时间操作场景下,如果Day.js
和Miment
更符合使用要求就可以进行替代了。
尤其对于非SSR的场合,想要精简首屏渲染速度,使用Day.js
或Miment
真的是非常有吸引力。
【程序视点】助力打工人减负,从来不是说说而已!
后续小二哥会继续详细分享更多实用的工具和功能。持续关注,这样就不会错过之后的精彩内容啦!
如果这篇文章对你有帮助的话,别忘了【点赞】【分享】支持下哦~