前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >这个日期处理工具如此强大,却轻到飞起!

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

作者头像
程序员老鱼
发布于 2022-12-02 01:57:31
发布于 2022-12-02 01:57:31
1K00
代码可运行
举报
文章被收录于专栏:前端实验室前端实验室
运行总次数:0
代码可运行

前端实验室设为星标精品文章第一时间阅读

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

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

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

于是就在开源社区找到了两个精简的替代方案:Day.jsMiment

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.jsMoment.js的使用。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//解析和显示
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

MimentAPI分为3大类

第一类,返回其他对象的,比如format,返回的是字符串,json返回的是一个json对象。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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,也就是我们所说的链式调用。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
miment().add(1, 'YYYY').add(2, 'MM').add(-3, 'DD')

需要注意的是,不能把第一类和第二类API混用。当你调完第一类方法后,返回的对象类型不是Miment对象,后面就不支持链式调用了。

第三类从Date对象继承的,也就是说Date对象有的方法,Miment也同样有。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
miment().getFullYear() //2021
miment().getDate() //16

如果你想要Moment.js的若干核心能力但又不希望包体积膨胀时,欢迎尝试Miment

结语

是不是我们可以完全用Day.jsMiment替代Moment.js呢?

不是。其一,框架或JavaScript库本已经依赖了Moment.js,没必要用Day.jsMiment进行替代了。其二,当需要更完善的API操作时,Moment.js毕竟功能更齐全。Miment只包含了核心功能。

除开上面两种情况,在时间操作场景下,如果Day.jsMiment更符合使用要求就可以进行替代了。

尤其对于非SSR的场合,想要精简首屏渲染速度,使用Day.jsMiment真的是非常有吸引力。

进了前端门,便是一家人 原创不易,点赞、留言、分享就是大师兄写下去的动力!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-11-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端实验室 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript日期处理不再难!Day.js带你飞!
本文介绍了Day.js的使用方法,Day.js 是一个轻量级的JavaScript库,用于解析、验证、操作和格式化日期和时间。Day.js 的使用方法类似于Moment.js,但 Day.js 的大小只有 2KB,比 Moment.js 更小。
前端小智@大迁世界
2023/04/21
9.9K0
JavaScript日期处理不再难!Day.js带你飞!
上手 Day.js 日期处理库
Day.js 是一个轻量级的 JavaScript 日期处理库,类似于 Moment.js,但体积更小。Day.js 提供了丰富的 API 来解析、格式化和操作日期。以下是 Day.js 的一些基本使用方法
winty
2024/07/31
2360
上手 Day.js 日期处理库
提升日期处理效率:day.js 实战经验分享
访问 https://www.jsdelivr.com/package/npm/dayjs 下载最新版本的 Day.js。
德育处主任
2023/05/31
2.3K0
提升日期处理效率:day.js 实战经验分享
由浅入深,走进中级工程师都未必知道的 JavaScript 时间处理冷知识
在过去,世界各地都各自订定当地时间,例如我国古代将一昼夜分为十二时辰,每一时辰相当于现代的两个小时。但随着交通和通信的发达,各地交流日益频繁,不同的地方时间给人们造成了许多困扰。于是在1884年的国际经度会议上制定了全球性的标准时,确定以英国伦敦格林威治区这个地方为零度经线的起点(本初子午线),并以地球由西向东每24小时自转一周360°,规定经度每隔15°,时差1小时,而每15°的经线则称为该时区的中央经线。全球被划分为24个时区,其中包含23个整时区及180°经线左右两侧的2个半时区。东经的时间比西经要早,也就是如果格林威治时间是中午12时,则中央经线15°E的时区为下午1时,中央经线30°E时区的时间为下午2时;反之,中央经线15°W的时区时间为上午11时,中央经线30°W时区的时间为上午10时。如果两人同时从格林威治的0°各往东、西方前进,当他们在经线180°时,就会相差24小时,所以经线180°被定为国际换日线,由西向东通过此线时日期要减去一日,反之,若由东向西则增加一日。
wade
2021/07/08
2.2K0
由浅入深,走进中级工程师都未必知道的 JavaScript 时间处理冷知识
超轻量无依赖的日期时间控件!
Pikaday不依赖于任何 Javascript 库,且文件大小小于 5K。不仅轻量,而且功能也十分强大。
程序员老鱼
2022/12/22
2.9K0
超轻量无依赖的日期时间控件!
dayjs——一个轻量型的日期时间库
对于日期时间处理,常见有moment.js和date-fns.js等库,然而这些库在个人看来有点大了,而平常人往往只用到其中个别功能,这就有点浪费,当然也可以抽取想要模块,但稍显繁琐。对于这种情况,我一般喜欢自己封装时间处理方法,但在发现有这么一个2K左右,出现不久瞬间飙涨到过千star的日期时间js库dayjs后,觉得值得去看看会不会对上眼。
IT晴天
2018/08/20
1.4K0
Day.js 基本使用
Day.js 是一个极简的 JavaScript 库,可以为现代浏览器解析、验证、操作和显示日期和时间。
訾博ZiBo
2025/01/06
1060
前后端时间转换的那些常见问题及处理方法
在现代的Web开发中,前后端分离的架构已经成为主流,尤其是在Spring Boot和Vue.js的组合中。开发者在这种架构下经常遇到的一个问题就是如何处理时间的转换和显示。前端和后端对时间的处理方式不同,可能会导致时间在传递过程中出现问题,比如时区不同步、格式不一致等。因此,本文将详细讨论在Spring Boot + Vue前后端分离架构中如何处理时间转换问题,并提供一些解决方案。
繁依Fanyi
2024/08/16
3850
vue之转换时间戳
JS获取当前时间戳,可以通过Date.now()方法来实现,返回自1970年1月1日00:00:00 UTC以来经过的毫秒数也就是当前时间戳。
Tom2Code
2022/04/15
1.9K0
vue之转换时间戳
Vue学习笔记之moment.js日期处理控件
moment可以方便的计算自然月或者自然年份,避免使用固定天数或者月份计算导致结束日期错乱问题。
Jetpropelledsnake21
2022/11/12
13.2K0
Vue学习笔记之moment.js日期处理控件
前端时间处理库-Day.js与Moment.js
Day.js比较轻量,所以在我刚接触需要处理时间的需求中,我首先选择了Day.js,但是我还是用着不是很舒服,可能语法问题,也可以体验感问题,反正就是不太喜欢。
JanYork_简昀
2022/08/29
3.2K0
前端时间处理库-Day.js与Moment.js
【HarmonyOS】时间处理Dayjs
在项目中经常会使用要时间的格式转换,比如数据库返回一个Date数据,你需要转成2024-10-2的格式,鸿蒙的原生SDK中是没有办法实现的,因此,在这里介绍第三方封装好并且成熟使用的库Dayjs。
钟子翔
2024/12/24
760
80%的程序员都在使用的10个JS库,提高效率解放生产力
为什么别人写代码又快又简洁?为什么别人任务完成的那么快,还有时间摸鱼,而我一个需求写一天,改改bug又两天?
程序员老鱼
2022/12/02
2.2K0
Moment.js日期处理库的使用
Moment.js是一个轻量级的JavaScript时间库,它方便了日常开发中对时间的操作,提高了开发效率。这个在一些金融保险公司会经常用到,比如一下时间的格式化处理,时间的选择等等。
孙叫兽
2021/12/20
5.4K0
Moment.js日期处理库的使用
使用moment格式化日期
例如:let startDate = moment(‘2018-09-27’).format(YYYY-MM-DD);
全栈程序员站长
2022/06/30
3.2K0
使用moment格式化日期
小而美的时间工具:超200种函数,这个库能满足你的所有需求
关于日期时间的插件,我们之前介绍过功能齐全的moment.js,具备时间/时区处理的全部功能,缺点就是体积大,连moment.min.js大小也有几十k.
程序员老鱼
2024/02/23
4070
小而美的时间工具:超200种函数,这个库能满足你的所有需求
moment.js处理日期偏移的几个方法示例:获取前n天/周/月/年
moment.js 是一个用于解析、校验、操作、显示日期和时间的 JavaScript 工具库,它提供了丰富而简洁的 API,让我们可以轻松地处理各种日期和时间相关的任务。
德顺
2023/08/25
1.8K0
Moment.js常见用法
用户4396583
2024/07/24
1240
让我告诉你一些强无敌的 NPM 软件包(超实用,收藏!)
在这里,我整理出一份个人最喜欢的 NPM 软件包清单。为了便于浏览,我还对它们进行了分类,希望呈现出更加清晰的结构。
coder_koala
2021/07/08
3K0
让我告诉你一些强无敌的 NPM 软件包(超实用,收藏!)
Momentjs常用用法整理总汇
Moment.js 是一个 JavaScript 日期处理类库,用于解析、检验、操作、以及显示日期。对于前端开发者来说还是非常实用的,今天就整理一些 Moment.js 的常用用法,方便后期查阅:
德顺
2023/08/25
5050
Momentjs常用用法整理总汇
相关推荐
JavaScript日期处理不再难!Day.js带你飞!
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文