前端时间处理库-Day.js与Moment.js

简介: 偶然遇到一些需求,需要计算时间差或者处理时间,格式化,转换等等。那大名鼎鼎的两个时间库不多说了,在标题,非常强大。

偶然遇到一些需求,需要计算时间差或者处理时间,格式化,转换等等。

那大名鼎鼎的两个时间库不多说了,在标题,非常强大。

Day.js

Day.js官网

Day.js比较轻量,所以在我刚接触需要处理时间的需求中,我首先选择了Day.js,但是我还是用着不是很舒服,可能语法问题,也可以体验感问题,反正就是不太喜欢。

但是这个库无疑非常优秀,为什么呢?

我们上面提到了Moment.js,那这两个库比如是有竞争选择。

而Moment.js也是占用资源比Day.js大了些许了。

import dayjs from "dayjs";
 dayjs(new Date(2021, 10, 1)).diff(new Date(2021, 9, 17), "day");

稍微看看语法,Day.js还要许许多多的功能呢。

比如,想获取时间差,可以用Day.js的插件RelativeTime。

import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 dayjs.extend(relativeTime);
 dayjs("2022-09-16 13:28:55").fromNow();

Moment.js

Moment.js官网

是的,我最后还是喜欢选择Moment.js,语法写起来也顺手,虽然占用资源较大,但是功能也是比Day.js多了许多。

首先看看官网界面:

网络异常,图片无法展示
|

网络异常,图片无法展示
|

给人的感觉就是强大、精准、数据量也是非常之多。

语法我也是比较喜欢的,比如格式化时间:

moment().format('MMMM Do YYYY, h:mm:ss a'); // 八月 9日 2022, 2:34:03 下午
 moment().format('dddd');                    // 星期二
 moment().format("MMM Do YY");               // 8月 9日 22
 moment().format('YYYY [escaped] YYYY');     // 2022 escaped 2022
 moment().format();                          // 2022-08-09T14:34:03+08:00

还要太多功能我就不一一演示了,反正非常强大就对了,但Day.js也不弱。

对比一下

bundlephobia.com也是提供了资源占用的Api,Day.js如下:

网络异常,图片无法展示
|

Moment.js如下:

网络异常,图片无法展示
|

这样一对比,所以说,day.js是更现代并且更轻量化,更加容易扩展的一个库,但是需要强大的时间处理,我还是喜欢Moment.js。

Day.js它可以利用TreeShaking,并且通过插件的方式来进行扩展,我们可以根据自己的需求去引入插件,所以我们最后只会引入我们需要的东西。

至于Moment.js支不支持TreeShaking,我记得好像是不支持的吧,应该、大概、或许...

相关文章
|
JavaScript 前端开发 Java
通义灵码 Rules 库合集来了,覆盖Java、TypeScript、Python、Go、JavaScript 等
通义灵码新上的外挂 Project Rules 获得了开发者的一致好评:最小成本适配我的开发风格、相当把团队经验沉淀下来,是个很好功能……
2419 103
|
JavaScript 前端开发 API
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
1080 24
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
913 8
|
JavaScript 前端开发 容器
|
JavaScript 前端开发
|
存储 JavaScript 前端开发
|
移动开发 JavaScript 前端开发
|
存储 JavaScript 前端开发
|
JavaScript 前端开发

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1457
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    724
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    591
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    596
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    677
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    862
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1711
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    409
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1412
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    716