【译】你可能不需要Moment.js

栏目: JavaScript · 发布时间: 6年前

内容简介:Moment.js是一个很棒的时间和日期库,具有许多牛X的方法,平时原文地址

Moment.js是一个很棒的时间和日期库,具有许多牛X的方法,平时 npm install 了之后就是干,但是如果您的Web应用程序对性能上有很高的要求,可能会由于其复杂的API和大小会导致巨大的性能上的不必要的开销。

【译】你可能不需要Moment.js

原文地址 github.com/you-dont-ne…

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换了,我们项目体积减少了很多:scream:

Sergey Petushkov, a javaScript developer from Moscow, Russia • Currently in Berlin, Germany.

ESLint插件

【译】你可能不需要Moment.js 【译】你可能不需要Moment.js 【译】你可能不需要Moment.js 【译】你可能不需要Moment.js 【译】你可能不需要Moment.js

如果你正在使用ESLint, 你可以安装一个插件plugin 来帮助你识别代码库中你没有(可能不需要)Moment.js的地方。

安装这个插件...

npm install --save-dev eslint-plugin-you-dont-need-momentjs
复制代码

...然后更新你的配置

"extends" : ["plugin:you-dont-need-momentjs/recommended"],
复制代码

使用对比

:warning:_注意提供的date-fns示例适用于[v2]( date-fns.org/v2.0.0-alph… [请参阅v1 docs]( date-fns.org/docs/Gettin…

解析

字符串+日期格式化

返回从字符串中解析的日期.

// 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:x:不支持自定义格式解析
复制代码

字符串+本地格式化

返回从字符串中解析的本地化时间日期.

// 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:x:不支持自定义格式解析
复制代码

取值 + 赋值

毫秒 / 秒 / 分 / 时

获取 毫秒 / 秒 / 分 / 时

// 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 :x:  不支持
复制代码

一年的某一周

设置&获取一年的某一周。

// 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 :warning: requires weekOfYear plugin
import weekOfYear from 'dayjs/plugin/weekOfYear';
dayjs.extend(weekOfYear);
dayjs().week();
// => 37
// dayjs :x:  不支持
复制代码

某月有多少天

获取某月有多少天。

// 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 :x: 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 :x:  不支持
复制代码

获取日期最小值

返回给定日期的最小值。

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 :x:  不支持
复制代码

操作比较

添加天数

将指定的天数添加到给定日期。

// 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" :warning:  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 :warning: requires relativeTime plugin
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);

dayjs(1536484369695).fromNow();
// => "5 days ago" :warning:  这个插件的舍入方法与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 :warning: 需要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 :x:  不支持
复制代码

是否之后

检查日期是否在另一个日期之后。

// 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 :warning: 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 :warning: 要引入 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 :x:  不支持
复制代码

总结

如果你的项目不需要很复杂的时间操作 day.js 是你更好的选择。如果较为复杂 date-fns 更适合你。


以上所述就是小编给大家介绍的《【译】你可能不需要Moment.js》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Linux Device Drivers

Linux Device Drivers

Jonathan Corbet、Alessandro Rubini、Greg Kroah-Hartman / O'Reilly Media / 2005-2-17 / USD 39.95

Device drivers literally drive everything you're interested in--disks, monitors, keyboards, modems--everything outside the computer chip and memory. And writing device drivers is one of the few areas ......一起来看看 《Linux Device Drivers》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

SHA 加密
SHA 加密

SHA 加密工具