前往小程序,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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
C++ OpenCV视频操作之图像输出文字
当我们视频分析时可能图像中需要有一个文字说明,OpenCV中本身也有这个API,我们就来看看OpenCV中的图像文字输出。
Vaccae
2019/07/25
4.2K0
【C++】OpenCV:车道线检测原理与实现示例
车道线检测是自动驾驶和驾驶辅助系统中的关键任务之一。OpenCV是一个广泛使用的计算机视觉库,可以用来进行车道线检测。
DevFrank
2024/07/24
4030
图像加文字与运行时间——opencv
本文转自:https://blog.csdn.net/you_big_father/article/details/90604390
vv彭
2020/12/16
9260
【目标跟踪】奇葩需求如何处理(二)
昨天突然接到一个需求,识别井盖且判断是否有井盖或无井盖。而且时间紧急,比赛突然加的需求,只给一天时间。一天时间用深度学习方法大概率是来不及了,采集数据标注数据训练模型都要花时间。
读书猿
2024/03/22
1130
【目标跟踪】奇葩需求如何处理(二)
【ros】结果实时在线可视化
首先应该是读取配置文件,比如我们常说的.yaml 文件,这里可以包含一些传感器标定信息与各自算法的一些初始化参数配置等。
读书猿
2024/04/14
1940
【ros】结果实时在线可视化
OpenCV 绘图功能
在利用Opencv处理图像时,我们常常需要利用一些绘图操作用来验证中间结果是否正确,比如画圆,画椭圆,画线,画矩形等功能。下面对常用的绘图函数做个整理,也方便以后自己使用:
chaibubble
2022/05/07
2980
OpenCV 绘图功能
基于qt的opencv实时图像处理框架FastCvLearn实战
对代码陌生的朋友,可以看看本文。如果熟悉了,可以直接文末到github仓库下载使用。
threeQing
2021/09/29
1.2K0
基于qt的opencv实时图像处理框架FastCvLearn实战
【OpenCV入门之十五】随心所欲绘制想要形状
画圆画点都是使用circle()函数来画,点就是圆,我们平常所说的圆只不过是半径大一点而已。
小白学视觉
2019/05/30
1.8K0
OpenCv+Qt5.12.2:文字检测与文本识别
好久没有进行一些相关的更新的了,去年一共更新了四篇,最近一直在做音视频相关的直播服务,又是重新学习积攒经验的一个过程。去年疫情也比较严重,等到解封,又一直很忙,最近又算有了一些时间,所以想着可以做一些更新了,又拿起了 OpenCV,做一些相关更新了。其实代码相关的工作,在上一篇 OpenCV-摄像头相关的完成之后已经做完了,只是一直没有写相关博客,这次先给做完。
何其不顾四月天
2023/03/19
1.7K0
OpenCV 绘制图形
[【OpenCV3图像处理】绘图功能总结(直线,矩形,圆,椭圆,多边形,文字)]https://blog.csdn.net/u011574296/article/details/73332523
AI异构
2020/07/29
5380
OpenCV 绘制图形
万字长文,值得收藏/参考的OpenCV C++基础代码
一位友好人士做的B站OpenCV4.x C++ 快速入门30讲视频课程的笔记总结!我只能点赞了!
OpenCV学堂
2021/08/06
1.1K0
OpenCV DNN模块教程(四)Mask-RCNN实例分割
本文为OpenCV DNN模块官方教程的扩展,介绍如何使用OpenCV加载TensorFlow Object Detection API训练的模型做实例分割,以Mask-RCNN为例来检测缺陷。TensorFlow Object Detection API的github链接地址如下:https://github.com/tensorflow/models/tree/master/research/object_detection
Color Space
2020/10/29
1.1K0
OpenCV DNN模块教程(四)Mask-RCNN实例分割
机器视觉算法(第11期)----OpenCV中的绘图与注释
上期我们一起学习来了图像处理中64个常用的算子, 机器视觉算法(第10期)----图像处理中64个常用的算子 从今天我们仍将以OpenCV为工具,来学习下算法中常用的绘图和注释有哪些?
智能算法
2019/07/12
1.3K0
【C++】OpenCV:YOLO目标检测介绍及实现示例
我们都知道,yolo这些深度学习检测算法都是在python下用pytorch或tf框架这些训练的,训练得到的是pt或者weight权重文件,这些是算法开发人员做的事情,如何让算法的检测精度更高、速度更快。
DevFrank
2024/07/24
1.1K0
ubuntu16.0.4 opencv4.0.0 yolov3测试
硬件信息 8 Intel® Core™ i7-4790 CPU @ 3.60GHz
用户1148525
2019/05/26
6350
OpenCV4.8+YOLOv8对象检测C++推理演示
自从YOLOv5更新成7.0版本,YOLOv8推出以后,OpenCV4.6以前的版本都无法再加载导出ONNX格式模型了,只有OpenCV4.7以上版本才可以支持最新版本YOLOv5与YOLOv8模型的推理部署。首先看一下最新版本的YOLOv5与YOLOv8的输入与输出格式:
OpenCV学堂
2023/09/27
2.1K0
OpenCV4.8+YOLOv8对象检测C++推理演示
Opencv-python画图基础知识
相关函数介绍 1. Point 该数据结构表示了由其图像坐标 和 指定的2D点。可定义为: Point pt; pt.x = 10; pt.y = 8; 或者 Point pt = Point(10, 8); 2. Scalar 表示了具有4个元素的数组。次类型在OpenCV中被大量用于传递像素值。 本节中,我们将进一步用它来表示RGB颜色值(三个参数)。如果用不到第四个参数,则无需定义。 我们来看个例子,如果给出以下颜色参数表达式: Scalar( a, b, c ) 那么定义的RGB颜色值为:Red =
hbbliyong
2018/06/13
1.3K0
OpenCV DNN模块官方教程(二)YoloV4目标检测实例
OpenCV DNN模块官方教程地址如下,可以查看各个对应的使用方法https://docs.opencv.org/4.4.0/d2/d58/tutorial_table_of_content_dnn.html
Color Space
2020/09/23
3.8K0
OpenCV DNN模块官方教程(二)YoloV4目标检测实例
深度学习:驾驶行为分析
程序功能简介: 使用yolo训练,OpenCV调用、实现打哈欠、手机、抽烟、系安全带,口罩检测。
DS小龙哥
2022/01/17
7490
深度学习:驾驶行为分析
OpenCV系列(18)|三角剖分
应用:人脸检测的核心技术 代码: #include <opencv2/imgproc.hpp> #include <opencv2/highgui.hpp> #include <iostream> #include <fstream> using namespace cv; using namespace std; static void help() { cout << "\nThis program demonstrates iterative construction of\n"
用户9831583
2022/06/16
6360
OpenCV系列(18)|三角剖分
推荐阅读
相关推荐
C++ OpenCV视频操作之图像输出文字
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文