Day.js:轻量级的时间日期处理库

复制代码
前言
小编最近在掘金上学习了前端性能优化方案,也是了解到了day.js的好处,
所以来分享分享😋

什么是 Day.js?

Day.js 是一个轻量级的 JavaScript 库,用于解析、验证、操作和格式化日期和时间。它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。 Day.js 的 API 与 Moment.js 高度相似,因此对于熟悉 Moment.js 的开发者来说,迁移到 Day.js 非常容易。

使用场景

Day.js 适用于各种需要处理日期和时间的场景,例如:

  • 在 Web 应用中显示和格式化日期
  • 处理用户输入的日期
  • 计算倒计时或时间间隔
  • 在日历应用中管理事件日期
  • 在数据可视化中处理时间序列数据

安装 Day.js

可以通过 npm 或 yarn 安装 Day.js:

bash 复制代码
npm install dayjs

或者

bash 复制代码
yarn add dayjs

你也可以通过 CDN 直接在 HTML 文件中引入 Day.js:

html 复制代码
<script src="https://unpkg.com/dayjs"></script>

如何使用 Day.js

基本用法

首先,引入 Day.js:

javascript 复制代码
import dayjs from 'dayjs';

然后,你可以使用 Day.js 来解析和格式化日期:

javascript 复制代码
const now = dayjs();
console.log(now.format('YYYY-MM-DD')); // 输出当前日期,例如:2023-10-01

解析日期

Day.js 可以解析多种格式的日期:

javascript 复制代码
const date = dayjs('2023-10-01');
console.log(date.format('MMMM D, YYYY')); // 输出:October 1, 2023

操作日期

你可以轻松地添加或减去时间:

javascript 复制代码
const tomorrow = dayjs().add(1, 'day');
console.log(tomorrow.format('YYYY-MM-DD')); // 输出明天的日期

const lastWeek = dayjs().subtract(1, 'week');
console.log(lastWeek.format('YYYY-MM-DD')); // 输出一周前的日期

比较日期

Day.js 提供了多种方法来比较日期:

javascript 复制代码
const date1 = dayjs('2023-10-01');
const date2 = dayjs('2023-10-02');

console.log(date1.isBefore(date2)); // true
console.log(date1.isAfter(date2)); // false
console.log(date1.isSame(date2, 'day')); // false

本地化支持

Day.js 支持多种语言的本地化:

javascript 复制代码
import 'dayjs/locale/zh-cn'; // 引入中文本地化

dayjs.locale('zh-cn'); // 设置为中文
console.log(dayjs().format('MMMM D, YYYY')); // 输出:十月 1, 2023

不同情况下如何使用 Day.js?

在 Vue.js 中使用 Day.js

在 Vue.js 项目中,Day.js 可以很方便地用于处理日期和时间的格式化、计算和显示。以下是一些常见的用法示例。

1. 在 Vue 组件中直接使用 Day.js

首先,在 Vue 组件中引入 Day.js:

javascript 复制代码
<template>
  <div>
    <p>当前日期:{{ formattedDate }}</p>
    <p>一周后的日期:{{ nextWeekDate }}</p>
  </div>
</template>

<script>
import dayjs from 'dayjs';

export default {
  data() {
    return {
      currentDate: dayjs(), // 获取当前日期
    };
  },
  computed: {
    // 格式化当前日期
    formattedDate() {
      return this.currentDate.format('YYYY-MM-DD');
    },
    // 计算一周后的日期
    nextWeekDate() {
      return this.currentDate.add(1, 'week').format('YYYY-MM-DD');
    },
  },
};
</script>

2. 在 Vue 过滤器中使用 Day.js

Vue 2.x 支持过滤器(Filters),可以方便地格式化日期。虽然 Vue 3.x 移除了过滤器,但你仍然可以通过方法或计算属性实现类似功能。

Vue 2.x 中使用过滤器
javascript 复制代码
import Vue from 'vue';
import dayjs from 'dayjs';

// 定义全局过滤器
Vue.filter('formatDate', function(value, format = 'YYYY-MM-DD') {
  return dayjs(value).format(format);
});

在模板中使用过滤器:

html 复制代码
<template>
  <div>
    <p>当前日期:{{ currentDate | formatDate('YYYY年MM月DD日') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: dayjs(), // 获取当前日期
    };
  },
};
</script>
Vue 3.x 中使用方法

Vue 3.x 中可以通过方法实现日期格式化:

javascript 复制代码
<template>
  <div>
    <p>当前日期:{{ formatDate(currentDate, 'YYYY年MM月DD日') }}</p>
  </div>
</template>

<script>
import dayjs from 'dayjs';

export default {
  data() {
    return {
      currentDate: dayjs(), // 获取当前日期
    };
  },
  methods: {
    formatDate(date, format = 'YYYY-MM-DD') {
      return dayjs(date).format(format);
    },
  },
};
</script>

3. 在 Vuex 中使用 Day.js

如果你的 Vue 项目使用了 Vuex 进行状态管理,可以在 Vuex 的 getters 或 actions 中使用 Day.js 处理日期。

示例:在 Vuex 中格式化日期
javascript 复制代码
import Vue from 'vue';
import Vuex from 'vuex';
import dayjs from 'dayjs';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    currentDate: dayjs(), // 存储当前日期
  },
  getters: {
    formattedDate: (state) => (format = 'YYYY-MM-DD') => {
      return dayjs(state.currentDate).format(format);
    },
  },
  actions: {
    updateDate({ commit }) {
      const newDate = dayjs().add(1, 'day'); // 计算明天的日期
      commit('SET_DATE', newDate);
    },
  },
  mutations: {
    SET_DATE(state, date) {
      state.currentDate = date;
    },
  },
});

export default store;

在组件中使用 Vuex 的日期:

javascript 复制代码
<template>
  <div>
    <p>当前日期:{{ formattedDate('YYYY年MM月DD日') }}</p>
    <button @click="updateDate">更新日期</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapGetters(['formattedDate']),
  },
  methods: {
    ...mapActions(['updateDate']),
  },
};
</script>

4. 在 Vue 中使用 Day.js 插件

Day.js 支持通过插件扩展功能。例如,使用 relativeTime 插件可以显示相对时间(如"2 天前")。

安装和使用 relativeTime 插件
bash 复制代码
npm install dayjs
npm install dayjs/plugin/relativeTime

在 Vue 项目中使用插件:

javascript 复制代码
<template>
  <div>
    <p>发布时间:{{ relativeTime(publishedDate) }}</p>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/zh-cn'; // 引入中文本地化

dayjs.extend(relativeTime);
dayjs.locale('zh-cn'); // 设置为中文

export default {
  data() {
    return {
      publishedDate: dayjs().subtract(2, 'day'), // 假设发布时间是 2 天前
    };
  },
  methods: {
    relativeTime(date) {
      return dayjs(date).fromNow(); // 输出:2 天前
    },
  },
};
</script>

在 React 中使用 Day.js

在 React 组件中,你可以使用 Day.js 来处理和显示日期:

javascript 复制代码
import React from 'react';
import dayjs from 'dayjs';

const DateComponent = ({ date }) => {
  const formattedDate = dayjs(date).format('MMMM D, YYYY');
  return <div>{formattedDate}</div>;
};

export default DateComponent;

在 Node.js 中使用 Day.js

在 Node.js 中,你可以使用 Day.js 来处理服务器端的日期和时间:

javascript 复制代码
const dayjs = require('dayjs');

const now = dayjs();
console.log(now.format('YYYY-MM-DD')); // 输出当前日期

Day.js 与 Moment.js 的比较

优点

  • 体积小:Day.js 的体积仅为 2KB 左右,而 Moment.js 的体积约为 67KB。
  • API 相似:Day.js 的 API 与 Moment.js 高度相似,迁移成本低。
  • 不可变性:Day.js 的日期对象是不可变的,这意味着每次操作都会返回一个新的日期对象,避免了意外的副作用。

缺点

  • 功能较少:Day.js 的功能相对 Moment.js 较少,特别是在处理时区和复杂日期操作时。
  • 插件依赖:一些高级功能(如时区支持)需要通过插件实现,增加了额外的依赖。

如何将 Moment.js 替换为 Day.js

1. 安装 Day.js

首先,安装 Day.js:

bash 复制代码
npm install dayjs

2. 替换导入语句

将项目中的 Moment.js 导入语句替换为 Day.js:

javascript 复制代码
// 将
import moment from 'moment';

// 替换为
import dayjs from 'dayjs';

3. 替换 API 调用

将 Moment.js 的 API 调用替换为 Day.js 的等效调用。由于两者的 API 非常相似,大多数情况下只需简单替换即可:

javascript 复制代码
// Moment.js
const date = moment('2023-10-01');
console.log(date.format('YYYY-MM-DD'));

// Day.js
const date = dayjs('2023-10-01');
console.log(date.format('YYYY-MM-DD'));

4. 处理差异

在某些情况下,Day.js 和 Moment.js 的行为可能略有不同。你需要根据具体情况调整代码。例如,Day.js 的 diff 方法返回的是毫秒数,而 Moment.js 返回的是天数:

javascript 复制代码
// Moment.js
const diff = moment('2023-10-02').diff('2023-10-01', 'days'); // 1

// Day.js
const diff = dayjs('2023-10-02').diff('2023-10-01', 'day'); // 1

5. 引入插件(可选)

如果你需要使用 Day.js 的高级功能(如时区支持),可以引入相应的插件:

javascript 复制代码
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';

dayjs.extend(utc);
dayjs.extend(timezone);

const date = dayjs().tz('America/New_York');
console.log(date.format('YYYY-MM-DD HH:mm:ss'));

总结一下🥳

Day.js 是一个轻量级且功能强大的日期处理库,适用于大多数常见的日期和时间操作。它的 API 与 Moment.js 高度相似,使得从 Moment.js 迁移到 Day.js 非常容易。尽管 Day.js 的功能相对较少,但其体积小、性能高,非常适合现代 Web开发!

相关推荐
鼠鼠我捏,要死了捏2 小时前
深入解析MongoDB分片原理与运维实践指南
mongodb·性能优化·sharding
拾光拾趣录3 小时前
内存泄漏的“隐形杀手”
前端·性能优化
鼠鼠我捏,要死了捏21 小时前
基于Redisson实现高并发分布式锁性能优化实践指南
性能优化·分布式锁·redisson
笑衬人心。21 小时前
后端项目中大量 SQL 执行的性能优化
sql·spring·性能优化
贵州晓智信息科技21 小时前
Unity 性能优化全攻略
unity·性能优化·游戏引擎
UWA1 天前
UWA DAY 2025 游戏开发者大会|全议程
游戏·unity·性能优化·游戏开发·uwa·unreal engine
未来之窗软件服务1 天前
网站访问信息追踪系统在安全与性能优化中的关键作用——网络安全—仙盟创梦IDE
安全·web安全·性能优化·仙盟创梦ide·东方仙盟
五岁小孩1 天前
Golang 性能分析神器 pprof 详解与实践(图文教程)
性能优化·golang·pprof
猿小蔡1 天前
Android Memory Monitor内存分析核心指标详解
性能优化
今禾1 天前
99% 的前端都在用,但你真的懂 Axios 吗?
前端·性能优化·axios