Moment.js
是一个很棒的时间和日期库,具有许多牛X的方法,平时npm install
了之后就是干,但是如果您的Web应用程序对性能上有很高的要求,可能会由于其复杂的API
和大小会导致巨大的性能上的比不要的开销。
Moment
存在的一些问题
- 它高度基于OOP API,这使得它无法使用
Webpack 2
新引入的Tree-shaking
代码优化技术 - 由于OOP API还有非纯函数,这会导致一些bug github.com/moment/mome…
- 如果您没有使用时区,而只使用了
moment.js
中的一些简单函数,这会导致你的应用程序被引入了很多没使用的方法,这是极其浪费性能和内存的。在这里推荐使用dayjs
,
dayjs
有一个较小的核心,并且具有非常相似的API,因此很容易从moment
平滑过渡到day.js
。date-fns
可以使用Tree-shaking
代码优化技术和其他good api
,因此它很适合与React
,Sinon.js
和webpack
等好基友一起使用。
简单比较
名字 | 大小(gzip) | 支持Tree-shaking | 名气 | api方法数 | 模式 | 时区支持 | 支持的语言数 |
---|---|---|---|---|---|---|---|
Moment.js | 329K(69.6K) | No | 38k | 高 | OO | 非常好(moment-timezone) | 123 |
date-fns | 78.4k(13.4k) without tree-shaking | Yes | 13k | 高 | Functional | 还不支持 | 32 |
dayjs | 6.5k(2.6k) without plugins | No | 14k | 中 | OO | 还不支持 | 23 |
程序员吐槽
- 把了
moment.js
换成了date-fns
- 构建输出减少了40%
—Jared Farago from webnode project. - 请使用
JavaScript
原生时间对象和数组。 如果您因为某种原因想要用Moment.js
,那么这是一个很好的库。 差不多。
—Dan Abramov, Author of Redux and co-author of Create React App.
Building tools for humans. - 我强烈建议在
Moment.js
上使用date-fns
,它有一个更好的API,你只能包含你需要的部分!
—Matija Marohni?, a design-savvy frontend developer from Croatia. - 就在昨天,在项目中将
momentjs
换了,我们项目体积减少了很多??
—Sergey Petushkov, a javaScript developer from Moscow, Russia ? Currently in Berlin, Germany.
ESLint
插件
如果你正在使用 ESLint
, 你可以安装一个插件plugin
来帮助你识别代码库中你没有(可能不需要)Moment.js
的地方。
安装这个插件…
npm install --save-dev eslint-plugin-you-dont-need-momentjs
…然后更新你的配置
"extends" : ["plugin:you-dont-need-momentjs/recommended"],
使用对比
注意提供的date-fns
示例适用于v2
解析
字符串+日期格式化
返回从字符串中解析的日期.
// Moment.js
moment('12-25-1995', 'MM-DD-YYYY');
// => "1995-12-24T13:00:00.000Z"
// date-fns
import parse from 'date-fns/parse';
parse('12-25-1995', 'MM-dd-yyyy', new Date());
// => "1995-12-24T13:00:00.000Z"
// dayjs
dayjs('12-25-1995');
// => "1995-12-24T13:00:00.000Z"
字符串+时间格式化
返回从字符串中解析的时间日期.
// Moment.js
moment('2010-10-20 4:30', 'YYYY-MM-DD HH:mm');
// => "2010-10-19T17:30:00.000Z"
// date-fns
import parse from 'date-fns/parse';
parse('2010-10-20 4:30', 'yyyy-MM-dd H:mm', new Date());
// => "2010-10-19T17:30:00.000Z"
// dayjs?不支持自定义格式解析
字符串+本地格式化
返回从字符串中解析的本地化时间日期.
// Moment.js
moment('2012 mars', 'YYYY MMM', 'fr');
// => "2012-02-29T13:00:00.000Z"
// date-fns
import parse from 'date-fns/parse';
import fr from 'date-fns/locale/fr';
parse('2012 mars', 'yyyy MMMM', new Date(), { locale: fr });
// => "2012-02-29T13:00:00.000Z"
// dayjs?不支持自定义格式解析
取值 + 赋值
毫秒/秒/分/时
获取 毫秒 / 秒 / 分 / 时。
// Moment.js
moment().seconds();
// => 49
moment().hours();
// => 19
// 原生
new Date().getSeconds();
// => 49
new Date().getHours();
// => 19
// date-fns
import getSeconds from 'date-fns/getSeconds';
import getHours from 'date-fns/getHours';
getSeconds(new Date());
// => 49
getHours(new Date());
// => 19
// dayjs
dayjs().second();
// => 49
dayjs().hour();
// => 19
设置 毫秒 / 秒 / 分 / 时。
// Moment.js
moment().seconds(30);
// => "2018-09-09T09:12:30.695Z"
moment().hours(13);
// => "2018-09-09T03:12:49.695Z"
// 原生
new Date(new Date().setSeconds(30));
// => "2018-09-09T09:12:30.695Z"
new Date(new Date().setHours(13));
// => "2018-09-09T03:12:49.695Z"
// date-fns
import setSeconds from 'date-fns/setSeconds';
import setHours from 'date-fns/setHours';
setSeconds(new Date(), 30);
// => "2018-09-09T09:12:30.695Z"
setHours(new Date(), 13);
// => "2018-09-09T03:12:49.695Z"
// dayjs
dayjs().set('second', 30);
// => "2018-09-09T09:12:30.695Z"
dayjs().set('hour', 13);
// => "2018-09-09T03:12:49.695Z"
月份日期
设置&获取月份。
// Moment.js
moment().date();
// => 9
moment().date(4);
// => "2018-09-04T09:12:49.695Z"
// 原生
new Date().getDate();
// => 9
new Date().setDate(4);
// => "2018-09-04T09:12:49.695Z"
// date-fns
import getDate from 'date-fns/getDate';
import setDate from 'date-fns/setDate';
getDate(new Date());
// => 9
setDate(new Date(), 4);
// => "2018-09-04T09:12:49.695Z"
// dayjs
dayjs().date();
// => 9
dayjs().set('date', 4);
// => "2018-09-04T09:12:49.6
星期几
设置&获取星期。
// Moment.js
moment().day();
// => 0 (Sunday)
moment().day(-14);
// => "2018-08-26T09:12:49.695Z"
// 原生
new Date().getDay();
// => 0 (Sunday)
new Date().setDate(new Date().getDate() - 14);
// => "2018-08-26T09:12:49.695Z"
// date-fns
import getDay from 'date-fns/getDay';
import setDay from 'date-fns/setDay';
getDay(new Date());
// => 0 (Sunday)
setDay(new Date(), -14);
// => "2018-08-26T09:12:49.695Z"
// dayjs
dayjs().day();
// => 0 (Sunday)
dayjs().set('day', -14);
// => "2018-08-26T09:12:49.695Z"
一年的某一天
设置&获取一年的某一天。
// Moment.js
moment().dayOfYear();
// => 252
moment().dayOfYear(256);
// => "2018-09-13T09:12:49.695Z"
// date-fns
import getDayOfYear from 'date-fns/getDayOfYear';
import setDayOfYear from 'date-fns/setDayOfYear';
getDayOfYear(new Date());
// => 252
setDayOfYear(new Date(), 256);
// => "2018-09-13T09:12:49.695Z"
// dayjs ? 不支持
一年的某一周
设置&获取一年的某一周。
// Moment.js
moment().week();
// => 37
moment().week(24);
// => "2018-06-10T09:12:49.695Z"
// date-fns
import getWeek from 'date-fns/getWeek';
import setWeek from 'date-fns/setWeek';
getWeek(new Date());
// => 37
setWeek(new Date(), 24);
// => "2018-06-10T09:12:49.695Z"
// dayjs ?? requires weekOfYear plugin
import weekOfYear from 'dayjs/plugin/weekOfYear';
dayjs.extend(weekOfYear);
dayjs().week();
// => 37
// dayjs ? 不支持
某月有多少天
获取某月有多少天。
// Moment.js
moment('2012-02', 'YYYY-MM').daysInMonth();
// => 29
// date-fns
import getDaysInMonth from 'date-fns/getDaysInMonth';
getDaysInMonth(new Date(2012, 1));
// => 29
// dayjs
dayjs('2012-02').daysInMonth();
// => 29
一年有多少周
根据ISO周,获取当年的周数。
// Moment.js
moment().isoWeeksInYear();
// => 52
// date-fns
import getISOWeeksInYear from 'date-fns/getISOWeeksInYear';
getISOWeeksInYear(new Date());
// => 52
// dayjs ? does not support weeks in the year
获取日期最大值
返回给定日期的最大值。
const array = [
new Date(2017, 4, 13),
new Date(2018, 2, 12),
new Date(2016, 0, 10),
new Date(2016, 0, 9),
];
// Moment.js
moment.max(array.map(a => moment(a)));
// => "2018-03-11T13:00:00.000Z"
// 原生
new Date(Math.max.apply(null, array)).toISOString();
// => "2018-03-11T13:00:00.000Z"
// date-fns
import max from 'date-fns/max';
max(array);
// => "2018-03-11T13:00:00.000Z"
// dayjs ? 不支持
获取日期最小值
返回给定日期的最小值。
const array = [
new Date(2017, 4, 13),
new Date(2018, 2, 12),
new Date(2016, 0, 10),
new Date(2016, 0, 9),
];
// Moment.js
moment.min(array.map(a => moment(a)));
// => "2016-01-08T13:00:00.000Z"
// 原生
new Date(Math.min.apply(null, array)).toISOString();
// => "2016-01-08T13:00:00.000Z"
// date-fns
import min from 'date-fns/min';
min(array);
// => "2016-01-08T13:00:00.000Z"
// dayjs ? 不支持
操作比较
添加天数
将指定的天数添加到给定日期。
// Moment.js
moment().add(7, 'days');
// => "2018-09-16T09:12:49.695Z"
// date-fns
import addDays from 'date-fns/addDays';
addDays(new Date(), 7);
// => "2018-09-16T09:12:49.695Z"
// dayjs
dayjs().add(7, 'day');
// => "2018-09-16T09:12:49.695Z"
减去天数
从给定日期减去指定的天数。
// Moment.js
moment().subtract(7, 'days');
// => "2018-09-02T09:12:49.695Z"
// date-fns
import subDays from 'date-fns/subDays';
subDays(new Date(), 7);
// => "2018-09-02T09:12:49.695Z"
// dayjs
dayjs().subtract(7, 'day');
// => "2018-09-02T09:12:49.695Z"
获月初时间
获取这个月初时间。
// Moment.js
moment().startOf('month');
// => "2018-08-31T14:00:00.000Z"
// date-fns
import startOfMonth from 'date-fns/startOfMonth';
startOfMonth(new Date());
// => "2018-08-31T14:00:00.000Z"
// dayjs
dayjs().startOf('month');
// => "2018-08-31T14:00:00.000Z"
获取今天结束的时间
获取今天结束的时间。
// Moment.js
moment().endOf('day');
// => "2018-09-09T13:59:59.999Z"
// date-fns
import endOfDay from 'date-fns/endOfDay';
endOfDay(new Date());
// => "2018-09-09T13:59:59.999Z"
// dayjs
dayjs().endOf('day');
// => "2018-09-09T13:59:59.999Z"
显示
格式化
用给定的格式格式化给定的字符串。
// Moment.js
moment().format('dddd, MMMM Do YYYY, h:mm:ss A');
// => "Sunday, September 9th 2018, 7:12:49 PM"
moment().format('ddd, hA');
// => "Sun, 7PM"
// date-fns
import format from 'date-fns/format';
format(new Date(), 'eeee, MMMM do YYYY, h:mm:ss aa');
// => "Sunday, September 9th 2018, 7:12:49 PM"
format(new Date(), 'eee, ha');
// => "Sun, 7PM"
// dayjs
dayjs().format('dddd, MMMM D YYYY, h:mm:ss A');
// => "Sunday, September 9 2018, 7:12:49 PM" ?? not support 9th
dayjs().format('ddd, hA');
// => "Sun, 7PM"
获取到现在的年限
获取到现在的年限
// Moment.js
moment(1536484369695).fromNow();
// => "4 days ago"
// date-fns
import formatDistance from 'date-fns/formatDistance';
formatDistance(new Date(1536484369695), new Date(), { addSuffix: true });
// => "4 days ago"
// dayjs ?? requires relativeTime plugin
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
dayjs(1536484369695).fromNow();
// => "5 days ago" ?? 这个插件的舍入方法与moment.js和date-fns不同,请谨慎使用。
时差
返回两个时间点的时差。
// Moment.js
moment([2007, 0, 27]).to(moment([2007, 0, 29]));
// => "in 2 days"
// date-fns
import formatDistance from 'date-fns/formatDistance';
formatDistance(new Date(2007, 0, 27), new Date(2007, 0, 29));
// => "2 days"
// dayjs ?? 需要relativeTime插件
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
dayjs('2007-01-27').to(dayjs('2007-01-29'));
// => "in 2 days"
时差(毫秒)
返回两个时间点的毫秒级时差。
// Moment.js
moment([2007, 0, 27]).diff(moment([2007, 0, 29]));
// => -172800000
moment([2007, 0, 27]).diff(moment([2007, 0, 29]), 'days');
// => -2
// date-fns
import differenceInMilliseconds from 'date-fns/differenceInMilliseconds';
differenceInMilliseconds(new Date(2007, 0, 27), new Date(2007, 0, 29));
// => -172800000
import differenceInDays from 'date-fns/differenceInDays';
differenceInDays(new Date(2007, 0, 27), new Date(2007, 0, 29));
// => -2
// dayjs
dayjs('2007-01-27').diff(dayjs('2007-01-29'), 'milliseconds');
// => -172800000
dayjs('2007-01-27').diff(dayjs('2007-01-29'), 'days');
// => -2
查询
是否之前
检查日期是否在另一个日期之前。
// Moment.js
moment('2010-10-20').isBefore('2010-10-21');
// => true
// date-fns
import isBefore from 'date-fns/isBefore';
isBefore(new Date(2010, 9, 20), new Date(2010, 9, 21));
// => true
// dayjs
dayjs('2010-10-20').isBefore('2010-10-21');
// => true
是否一样
检查日期是否与另一个日期相同。
// Moment.js
moment('2010-10-20').isSame('2010-10-21');
// => false
moment('2010-10-20').isSame('2010-10-20');
// => true
moment('2010-10-20').isSame('2010-10-21', 'month');
// => true
// date-fns
import isSameDay from 'date-fns/isSameDay';
import isSameMonth from 'date-fns/isSameMonth';
isSameDay(new Date(2010, 9, 20), new Date(2010, 9, 21));
// => false
isSameDay(new Date(2010, 9, 20), new Date(2010, 9, 20));
// => true
isSameMonth(new Date(2010, 9, 20), new Date(2010, 9, 21));
// => true
// dayjs
dayjs('2010-10-20').isSame('2010-10-21');
// => false
dayjs('2010-10-20').isSame('2010-10-20');
// => true
// dayjs ? 不支持
是否之后
检查日期是否在另一个日期之后。
// Moment.js
moment('2010-10-20').isAfter('2010-10-19');
// => true
// date-fns
import isAfter from 'date-fns/isAfter';
isAfter(new Date(2010, 9, 20), new Date(2010, 9, 19));
// => true
// dayjs
dayjs('2010-10-20').isAfter('2010-10-19');
// => true
是否在两个日期之前
检查日期是否在两个其他日期之间。
// Moment.js
moment('2010-10-20').isBetween('2010-10-19', '2010-10-25');
// => true
// date-fns
import isWithinInterval from 'date-fns/isWithinInterval';
isWithinInterval(new Date(2010, 9, 20), {
start: new Date(2010, 9, 19),
end: new Date(2010, 9, 25),
});
// => true
// dayjs ?? requires isBetween plugin
import isBetween from 'dayjs/plugin/isBetween';
dayjs.extend(isBetween);
dayjs('2010-10-20').isBetween('2010-10-19', '2010-10-25');
// => true
是否是闰年
判断是否是润年。
// Moment.js
moment([2000]).isLeapYear();
// => true
// date-fns
import isLeapYear from 'date-fns/isLeapYear';
isLeapYear(new Date(2000, 0, 1));
// => true
// dayjs ?? 要引入 isLeapYear 插件
import isLeapYear from 'dayjs/plugin/isLeapYear';
dayjs.extend(isLeapYear);
dayjs('2000').isLeapYear();
// => true
是否是日期对象
检查变量是否是js Date
对象。
// Moment.js
moment.isDate(new Date());
// => true
// date-fns
import isDate from 'date-fns/isDate';
isDate(new Date());
// => true
// dayjs ? 不支持
总结
如果你只需要简单的操作那么day.js
更适合你,如果复杂一点的项目那么date-fns
看起来更合适。