介绍一个超轻量级的 js 时间库 miment

2018-04-19 00:04:59 +08:00
 noahlam

介绍

Miment ("Mini Moment") 是一个轻量级的时间库,打包压缩后体积 1K,没有过多的方法。它的上手成本几乎为零,无需反复查阅文档。当你只需要 Moment 的若干核心能力但又不希望使你的包体积膨胀时,欢迎尝试 Miment。

首先致敬一下 Moment,非常好用的一个时间库。我本身也是 Moment 重度使用者,用习惯了 Moment,一碰到需要处理时间的需求立马 Moment。不过有时候想想,Moment 给我们提供了那么多的功能,但是我们天天用的, 也就那么一两个。刚好最近在写微信小程序,然后在页面引入 Moment,打包完,包竟然大了 200 多 K,把 Moment 去掉,就直接少掉 200 多 K。反复试了好几次,确定一个 Moment 在小程序里面,占用大概 200K 的空间。于是就想自己写一个类似 Moment 的精简的时间库,于是就有了这个。为什么要叫 Miment 呢?其实刚开始我是想叫 Mini-Moment 的,但是考虑到以后可能会经常使用到,打 2 个单词中间还要加一个横杆太累了,所以就把 Mini-Moment 缩水成 Miment 了。

安装

对浏览器环境,在页面引入 ./dist/miment-min.js 即可:

<script src="//unpkg.com/miment/dist/miment-min.js"></script>
<script>miment().format()</script>

在 NPM 生态中使用时,请使用包管理器安装 Miment:

npm i miment

然后就可在你的项目中使用了:

import miment from 'miment'
miment().format() // 2018-04-09 23:01:58

API

API 方法可分为三类:

返回 Computed 结果的方法

format

format 方法几乎是我们平时最常用的了。它一共接收 2 个参数,这 2 个参数都有默认值,不传则使用默认值:

参数名称 参数类型 参数默认值 是否必传 说明
格式化的字符串 string 'YYYY-MM-DD hh:mm:ss' N 年 YYYY
月 MM
日 DD
时 hh
分 mm
秒 ss
毫秒 SSS
数字星期 ww
中文星期 WW
是否为时间差 boolean false N 格式化 distance 时间差时,使用 true
miment().format('YYYY 年 MM 月 DD 日 hh:mm:ss')
// 2018-04-09 23:49:36

miment().format('YYYY/MM/DD hh-mm-ss SSS')
// 2018/04/09 23-49-36 568

miment().format('YYYY 年 MM 月 DD 日 星期 WW')
// 2018 年 04 月 09 日 星期一

miment().format('YYYY 年 MM 月 DD 日 星期 ww')
// 2018 年 04 月 09 日 星期 1 *周日对应星期 0*

作为扩展,如果我们只想获取单独的年、月或日,可这样使用:

miment().format('YYYY') // 2018
miment().format('MM') // 04
miment().format('DD') // 09
miment().format('hh') // 23
miment().format('mm') // 57
miment().format('ss') // 16
miment().format('SSS') // 063
miment().format('ww') // 1
miment().format('WW') // 一

基于这个方法,你可以不需要记忆大部分原生的日期方法(如 getFullYear / getDate / getDay 等),使用统一的 format 处理各种需求。

json

输出 JSON 格式的时间字段:

miment().json()
{
  "year": 2018,
  "month": 4,
  "date": 11,
  "hour": 8,
  "minute": 57,
  "second": 41,
  "day": 3,
  "milliSecond": 87
}

stamp

输出时间戳,不需参数。

miment().stamp()
// 1523408529932

daysInMonth

获取当前 Miment 对象所在月的天数。

miment().daysInMonth()
// 30

支持链式调用的方法

add

增加或减少时间。它接收 2 个参数:

参数名称 参数类型 参数默认值 是否必传 说明
增量 number 0 N 要增加的时间量,增加传正数,减少传负数
单位 string 无默认值 Y 要增加的时间单位
可选同 format 格式化字符串

为方便使用,单位的可选参数格式与格式化方法 format 的保持一致。同样严格匹配大小写与长度。

miment().add(1,'DD') // 增加一天
miment().add(1, 'YYYY').add(2, 'MM').add(-3, 'DD') // 增加 1 年 2 个月又减回 3 天
miment().add(-1,'ww') // 减去一周,即获取上周的日期
miment().add(500,SSS) // 增加 500 毫秒

add 返回的值是增加完后的 Miment 对象,我们可以在它后面继续调用 mimont 支持的方法:

miment().add(1,'DD').format()
// 2018-04-12 09:29:55

需要注意的是,当你调完返回 Computed 结果的方法后,返回的对象类型不是 Miment,故而不支持链式调用:

miment().add(1,'DD').format().add(1,'DD') // 报错

distance

计算 2 个时间的距离。它接收 2 个参数,返回一个 Miment 对象:

参数名称 参数类型 参数默认值 是否必传 说明
起始时间 miment/date/number/string Y 接受 4 种类型参数,会自动转换
结束时间 miment/date/number/string N 同上
miment().distance('2018-04-10 00:00:00')
// Mon Dec 29 1969 22:11:51 GMT+0800 (CST)

miment().distance(1523408529932)
// Wed Dec 31 1969 07:13:47 GMT+0800 (CST)
miment().distance('2018-04-10 00:00:00')
// Mon Dec 29 1969 22:11:51 GMT+0800 (CST)

miment().distance(1523408529932)
// Wed Dec 31 1969 07:13:47 GMT+0800 (CST)

miment().distance('2018-04-10 00:00:00', new Date())
// Mon Dec 29 1969 22:11:13 GMT+0800 (CST)

miment().distance('2018-04-10 00:00:00', '2018-04-11 00:00:00')
// Mon Dec 29 1969 22:10:46 GMT+0800 (CST)

你一定注意到了,为什么 distance 方法返回的年份是 1969 年呢?这实际上是基于1970-01-01 00:00:00 的毫秒数,参见 Unix 时间,而我们把两个时间相减,得到的可能是一个相对很小的时间戳(还可能是负数),所以离 1970 很近。

那我们要怎么显示我们能看得懂的时间呢?配合 format 即可。format 的第二个参数是用于用来格式化 distance 计算出的时间差,只要把第二个参数设为 true,即可将当前时间格式化成时间差。作为对比:

miment().distance(1523408529932).format('YYYY 年 MM 月 DD 日 hh 时 mm 分 ss 秒')
// 1969 年 12 月 30 日 00 时 52 分 16 秒

miment().distance(1523408529932).format('YYYY 年 MM 月 DD 日 hh 时 mm 分 ss 秒', false)
// 1969 年 12 月 30 日 00 时 52 分 16 秒

把第二个参数设为 true

miment().distance(1523408529932).format('YYYY 年 MM 月 DD 日 hh 时 mm 分 ss 秒', true)
// 00 年 01 月 03 日 23 时 08 分 23 秒

firstDayOfWeek

获取本周的第一天(周日),无参数:

miment().firstDayOfWeek() // Sun Apr 08 2018 11:27:55 GMT+0800 (CST)
miment().firstDayOfWeek().format() // 2018-04-08 11:27:55

如果想获取周一呢?周二、三、四、五、六呢?

miment().firstDayOfWeek().add(1,'DD').format()
// 2018-04-09 11:27:55

firstDay

获取每个月的第一天,无参数:

miment().firstDay() // Sun Apr 01 2018 00:00:00 GMT+0800 (CST)
miment().firstDay().format() // 2018-04-01 00:00:00

lastDay

获取每个月的最后一天,无参数:

miment().lastDay()
// Mon Apr 30 2018 00:00:00 GMT+0800 (CST)

miment().lastDay().format()
// 2018-04-30 00:00:00

Date 自有方法

Miment 继承自 Date 对象,所以也拥有 Date 对象的所有方法。请移步至 MDN 查看

需要注意的是,由于继承而来的方法是属于 Date 对象的,为保持一致,我们没有对方法做改动。故而方法无法返回 miment 对象,也无法链式调用 miment。

许可

MIT

写在最后

目前这些功能(函数),是我们团队在日常实践中碰到的比较常用的。如果你对功能有新的需求或者建议,欢迎给我们提 Issue。如果喜欢 miment,请在我的 GitHub 上给我一个 star,你的 star 就是我最大的动力了,谢谢!

3817 次点击
所在节点    JavaScript
2 条回复
GooMS
2018-04-19 01:26:49 +08:00
不错,在多语言和时区上处理下就更有竞争力了
noahlam
2018-04-19 10:30:34 +08:00
@GooMS 多语言由于能力问题,目前只能做到中英文..时区的问题,在 roadmap 中了..

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/447993

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX