首页 > 其他分享 >Moment.js、Day.js、Miment,日期时间库怎么选?

Moment.js、Day.js、Miment,日期时间库怎么选?

时间:2024-11-08 22:22:52浏览次数:3  
标签:Miment js Moment API year Day

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

大师兄是Moment.js的重度使用者。凡是遇到时间和日期的操作,就把Moment.js引用上。
直到有天我发现加载的moment.min.js大小有19.8KB,而我的页面整体大小还不到5KB,Moment.js给我的吸引力顿减。这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的使用。

//解析和显示
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对象。

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.jsMiment替代Moment.js呢?

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

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

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

最后

【程序视点】助力打工人减负,从来不是说说而已!

后续小二哥会继续详细分享更多实用的工具和功能。持续关注,这样就不会错过之后的精彩内容啦!

如果这篇文章对你有帮助的话,别忘了【点赞】【分享】支持下哦~

标签:Miment,js,Moment,API,year,Day
From: https://www.cnblogs.com/tanggoahead/p/18536027

相关文章

  • 基于nodejs+vue闸口社区管理系统[开题+源码+程序+论文]计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于社区管理系统的研究,现有研究主要以大型综合社区或特定功能社区(如养老社区、智慧社区等)为主,专门针对闸口社区这种具有特定地理或功能属性的社区管理......
  • 基于nodejs+vue枣阳市第二人民医院信息管理系统[开题+源码+程序+论文]计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于医院信息管理系统的研究,现有研究多聚焦于大型综合性医院,专门针对枣阳市第二人民医院这种规模和特定需求的研究较少。在国内外,医院信息管理系统的研......
  • 前端入门一之JS对象、字符串对象、数组对象、Data()对象等
    前言JS是前端三件套之一,也是核心,本人将会更新JS基础、JS对象、DOM、BOM、ES6等知识点,这篇是JS常用的内置对象;这篇文章是本人大一学习前端的笔记;欢迎点赞+收藏+关注,本人将会持续更新。文章目录目录总览1、对象1.1、创建对象(object)利用字面量创建对象对象的调用变量......
  • ssm电脑配件销售系统的设计与实现+jsp
    前言随着科学技术的飞速发展,各行各业都在努力与现代先进技术接轨,通过科技手段提高自身的优势;对于电脑配件销售系统当然也不能排除在外,随着网络技术的不断成熟,带动了电脑配件销售系统,它彻底改变了过去传统的管理方式,不仅使服务管理难度变低了,还提升了管理的灵活性。这种个性......
  • JS数据结构之树和二叉树
    一、树树(Tree)是一种非常常见的数据结构,它模拟了自然界中树的结构,由节点(或称为顶点)组成,并且具有层次化的组织形式。树结构在计算机科学中广泛应用,例如在组织数据、管理信息层次以及算法设计中。1.基本概念节点(Node)根节点(Root):树的最顶端节点,没有父节点。内部节点(InternalNod......
  • JS之正则表达式
    一、什么是正则表达式<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document<......
  • 【前端知识】JS模块规范
    JS模块规范概述CommonJS规范代码示例AMD规范代码示例ES6Module规范代码示例IIFE规范代码示例全局变量代码示例CommonJS模块和ES6模块有什么区别?1.语法和声明方式2.动态和静态导入3.循环依赖4.默认导出和命名导出5.文件扩展名6.环境和应用7.工具和构......
  • js实现漂亮的注册页面(js动态注册页面)
    代码:<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>注册</title>......
  • JS实现漂亮的登录页面(氛围感页面)
    代码:<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>登录</title>......
  • JS DOM获取
    一、DOM初相识DOM简介文档对象模型(DocumentObjectModel,简称DOM),它就是一些系列编程接口,有了这些接口,就可以改变页面内容,结构和样式DOM树:  文档:一个页面就是一个文档,DOM中使用document表示元素:页面中所有的标签都是元素,DOM中使用element表示节点:网页中所有内容都是节......