这个日期处理工具如此强大，却轻到飞起！

​

大家好,我是​​前端实验室​​的大师兄!

一直以来，处理时间和日期的JavaScript库，选用的都是​​Momment.js​​。它的API清晰简单，使用方便灵巧，功能还特别齐全。

大师兄是​​Moment.js​​​的重度使用者。凡遇到时间和日期的操作，就把​​Moment.js​​​引用上。直到有天我发现自己的一个原生HTML5页面加载的moment.min.js大小有19.8KB，而页面整体大小还不到5KB时，Moment.js给我的吸引力顿减。相对于常用的几个API，这​​Moment.js​​体积是忒大了一点。

于是就在开源社区找到了两个精简的替代方案：​​Day.js​​​和​​Miment​​​。

​Day.js​

​​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​

​​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​​真的是非常有吸引力。

进了前端门，便是一家人

原创不易,点赞、留言、分享就是大师兄写下去的动力!