✍ 此系列为整理分享已完结入门搭建《TPM提测平台》系列的迭代版，拥抱Vue3.0将前端框架替换成字节最新开源的arco.design，其中约60%重构和20%新增内容，定位为从 0-1手把手实现简单的测试平台开发教程，内容将囊括基础、扩展和实战，由浅入深带你实现测试开发岗位中平台工具技术能力入门和提升。
Moment.js
JavaScript 日期处理类库( http://momentjs.cn/ )，它提供了一些经常用的时间处理方法，在node.js 和 浏览器中都可以直接使用。
安装和使用
在我们前端项目中安装和引用如下：
代码语言：javascript复制# 终端安装依赖（笔者测试的最新版本为2.24.0)
npm install moment
# 导入依赖
import moment from "moment";
也可通过require定义，或html直接引用
代码语言：javascript复制// require定义
var moment = require('moment');
moment().format();
// 浏览器script引用
<script src="moment.js"></script>
<script>
moment().format();
</script>
常用方法
格式化时间
通过format('字符串') 对日期进行格式化。
代码语言：javascript复制// 默认locale语言为cn
moment().format('MMMM Do YYYY, h:mm:ss a'); // August 13th 2022, 2:19:01 pm
moment().format('dddd'); // Saturday
moment().format("MMM Do YY"); // Aug 13th 22
// 更改本地语言为简体中文
moment.locale('zh-cn')
const res = moment().format('YYYY-MM-DD HH:mm'); // 2022-08-13 14:32
格式字符串很多，可以根据需要自行组合
http://momentjs.cn/docs/#/displaying/format/
令牌 | 输出 | |
|---|---|---|
月份 | M | 1 2 ... 11 12 |
Mo | 1st 2nd ... 11th 12th | |
MM | 01 02 ... 11 12 | |
MMM | Jan Feb ... Nov Dec | |
MMMM | January February ... November December | |
季度 | Q | 1 2 3 4 |
Qo | 1st 2nd 3rd 4th | |
月份的日期 | D | 1 2 ... 30 31 |
Do | 1st 2nd ... 30th 31st | |
DD | 01 02 ... 30 31 | |
年份的日期 | DDD | 1 2 ... 364 365 |
DDDo | 1st 2nd ... 364th 365th | |
DDDD | 001 002 ... 364 365 | |
星期几 | d | 0 1 ... 5 6 |
do | 0th 1st ... 5th 6th | |
dd | Su Mo ... Fr Sa | |
ddd | Sun Mon ... Fri Sat | |
dddd | Sunday Monday ... Friday Saturday | |
星期几（语言环境） | e | 0 1 ... 5 6 |
星期几（ISO） | E | 1 2 ... 6 7 |
年份的星期 | w | 1 2 ... 52 53 |
wo | 1st 2nd ... 52nd 53rd | |
ww | 01 02 ... 52 53 | |
年份的星期（ISO） | W | 1 2 ... 52 53 |
Wo | 1st 2nd ... 52nd 53rd | |
WW | 01 02 ... 52 53 | |
年份 | YY | 70 71 ... 29 30 |
YYYY | 1970 1971 ... 2029 2030 | |
Y | 1970 1971 ... 9999 10000 10001 | |
周年 | gg | 70 71 ... 29 30 |
gggg | 1970 1971 ... 2029 2030 | |
周年（ISO） | GG | 70 71 ... 29 30 |
GGGG | 1970 1971 ... 2029 2030 | |
子午线 | A | AM PM |
a | am pm | |
小时 | H | 0 1 ... 22 23 |
HH | 00 01 ... 22 23 | |
h | 1 2 ... 11 12 | |
hh | 01 02 ... 11 12 | |
k | 1 2 ... 23 24 | |
kk | 01 02 ... 23 24 | |
分钟 | m | 0 1 ... 58 59 |
mm | 00 01 ... 58 59 | |
秒钟 | s | 0 1 ... 58 59 |
ss | 00 01 ... 58 59 | |
小数秒钟 | S | 0 1 ... 8 9 |
SS | 00 01 ... 98 99 | |
Unix 时间戳 | X | 1360013296 |
Unix 毫秒时间戳 | x | 1360013296123 |
3.2.2 相对时间
通过fromNow、toNow、to等方法计算相对时间
// 当前时间与北京奥运开幕时间 xx年前
moment("20080808", "YYYYMMDD").fromNow();
// 到现在为止已距当天/小时已经过去
moment().startOf('day').fromNow(); // xx 小时前
moment().startOf('hour').fromNow(); // xx 分钟前
// 到现在为止已距当天/小时结束还有
moment().endOf('day').fromNow() // xx 小时后
moment().endOf('hour').fromNow() // xx 分钟后
// toNow与fromNow给出相反的间隔
moment([2008,8,8]).toNow() // xx 年后
// to用户两个时间的对比
const start = moment([2022, 8, 11]);
const end = moment([2022, 8, 13]);
console.log(end.to(start)) // 2 天前
console.log(start.to(end)) // 2 天后
时间计算
subtract() 通过减去时间来改变原始的 momentadd() 通过增加时间来改变原始的 momentstartOf() / endOf() 通过将原始的 moment 设置为时间单位的开头/末尾来对其进行更改 注：以上计算本身还是moment如果项展示还需要借助format或calendar
// 减去响应的天数
console.log(moment().subtract(10, 'days'))
console.log(moment().subtract(10, 'days').format("YYYY-MM-DD"))
console.log(moment().subtract(10, 'days').calendar())
// 已2022年8月13日 13时测试结果如下
// Moment<2022-08-03T15:01:51 08:00>
// 2022-08-03
// 2022/08/03
// 同样测试时间天数加法
console.log(moment().add(7, 'days').calendar()) // 2022/08/20
console.log(moment().add(1, 'months').calendar()) // 2022/09/13
console.log(moment().add(10, 'years').calendar()) // 2032/08/13
// 举例当月的开始和结束天
console.log(moment().startOf('month').calendar())
console.log(moment().endOf('months').calendar())
对于moment.js 以上是大奇认为比较常用的一些方法，还有更多的用法方便在时间上的快捷操作，按照项目需要随用随事到官方查看使用文档即可。
本篇主要讲解了几个后边要用到扩展知识点，在当今的开发环境生态下，有很多类似这样好用的前后端开发工具包，我们要善于发现和利用它们，尽量避免无效重复造轮子，把时间花费在功能实现上。
上篇回顾：
下篇预告：实现产品基础搜索和分页列表
