jQuery Prettydate（长文解析）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 Web 开发中，时间信息的展示方式直接影响用户体验。例如，当用户看到 "2023-10-05 15:30:00" 这样的绝对时间时，可能需要额外思考才能理解其与当前时间的关系。而像 "1 小时前" 或 "昨天" 这样的相对时间描述，能更直观地传达信息。jQuery Prettydate 正是这样一个将绝对时间转换为相对时间的插件，它通过简洁的 API 和灵活的配置，帮助开发者快速实现这一功能。本文将从基础用法到进阶技巧，结合实际案例，逐步讲解如何掌握这一工具。

一、jQuery Prettydate 的核心概念与安装

1.1 什么是相对时间显示？

相对时间显示（Relative Time Display）是指将时间信息转化为与当前时间的相对关系，例如 "5 分钟前"、"1 天前" 或 "下周三"。这种格式能减少用户的认知负担，尤其适用于社交媒体、论坛或新闻网站中需要频繁展示时间信息的场景。

1.2 jQuery Prettydate 的作用

jQuery Prettydate 是一个轻量级的 JavaScript 插件，基于 jQuery 构建，专门用于将日期对象或时间戳转换为相对时间字符串。它支持多种语言（如中文、英文等），并提供了灵活的配置选项，适用于不同需求的开发场景。

1.3 安装与引入

要使用 jQuery Prettydate，需先确保页面中已引入 jQuery 库。然后通过以下方式加载插件：

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入 Prettydate -->
<script src="jquery.prettydate.js"></script>

二、基础用法与代码示例

2.1 最简配置：直接转换日期对象

Prettydate 的核心方法是 $.prettyDate(date)，其中 date 可以是日期对象或符合特定格式的时间字符串。以下是一个基础示例：

<div id="time-display"></div>

<script>
  // 获取当前时间
  const currentDate = new Date();
  // 转换为相对时间
  const formattedTime = $.prettyDate(currentDate);
  // 显示结果
  $('#time-display').text(formattedTime);
</script>

此时，页面会显示类似 "刚刚" 的文本，因为时间与当前时间完全一致。

2.2 处理历史时间：示例场景

假设我们需要展示一条论坛帖子的发布时间：

<p>帖子发布时间：<span class="time-ago">2023-10-05T15:30:00Z</span></p>

<script>
  $(document).ready(function() {
    $('.time-ago').each(function() {
      const isoTime = $(this).text();
      const convertedTime = $.prettyDate(isoTime);
      $(this).text(convertedTime);
    });
  });
</script>

若当前时间为 2023-10-05 16:00，则输出结果为 "30 分钟前"。

三、工作原理与核心逻辑

3.1 时间差计算：数学与条件判断

Prettydate 的核心逻辑是计算目标时间与当前时间的差值，并根据差值的大小选择对应的文本描述。例如：

• 如果差值在 1 分钟内 → "刚刚"
• 1 分钟到 1 小时 → "X 分钟前"
• 1 小时到 24 小时 → "X 小时前"
• 超过 24 小时但小于 30 天 → "X 天前"
• 超过 30 天则显示原始日期

3.2 国际化支持：多语言适配

Prettydate 默认支持多种语言，通过配置 $.prettydate.config.locale 可切换语言。例如设置中文：

$.prettydate.config.locale = {
  suffix: '前',
  minutes: '分钟',
  hour: '小时',
  day: '天',
  month: '个月',
  year: '年前',
  months: ['一月', '二月', ...],
  days: ['周一', '周二', ...]
};

四、进阶用法与优化技巧

4.1 自定义时间格式：扩展功能边界

若默认的相对时间规则不满足需求，可通过重写 $.prettydate 的内部方法实现自定义逻辑。例如，添加 "昨天" 或 "今天" 的判断：

// 扩展 Prettydate 的格式化函数
$.extend($.prettydate, {
  format: function(time) {
    const diff = time - (new Date()).getTime();
    if (diff < 0) {
      return '未来时间';
    } else if (diff < 60 * 1000) {
      return '刚刚';
    } else if (diff < 24 * 60 * 60 * 1000) {
      return Math.floor(diff / (60 * 60 * 1000)) + ' 小时前';
    } else {
      // 自定义 "昨天" 判断
      const yesterday = new Date();
      yesterday.setDate(yesterday.getDate() - 1);
      if (time >= yesterday.getTime()) {
        return '昨天';
      }
      return $.prettydate.originalFormat(time);
    }
  }
});

4.2 处理时区问题：确保时间准确性

由于 JavaScript 的 Date 对象默认使用本地时区，若目标时间需基于特定时区（如 UTC），可通过时间戳转换：

// 将 UTC 时间戳转换为本地时间
const utcTimestamp = 1696523400000; // 2023-10-05T15:30:00Z
const localDate = new Date(utcTimestamp);
const formatted = $.prettyDate(localDate);

五、实际案例：构建动态时间展示模块

5.1 场景描述

假设需要为一个博客文章列表动态显示每篇文章的发表时间，要求：

1. 时间需实时更新（例如每 10 秒刷新一次）
2. 超过 30 天的显示具体日期

5.2 完整代码实现

<ul id="article-list">
  <li>文章 1 <span class="time">2023-10-01T10:00:00Z</span></li>
  <li>文章 2 <span class="time">2023-09-20T14:30:00Z</span></li>
</ul>

<script>
$(document).ready(function() {
  function updateTimes() {
    $('.time').each(function() {
      const isoTime = $(this).text();
      const date = new Date(isoTime);
      const now = new Date();
      const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
      
      if (diffDays < 30) {
        $(this).text($.prettyDate(date));
      } else {
        // 显示原始日期
        $(this).text(date.toLocaleDateString('zh-CN'));
      }
    });
  }

  // 初始加载
  updateTimes();
  // 每 10 秒刷新
  setInterval(updateTimes, 10000);
});
</script>

六、常见问题与解决方案

6.1 时间显示不更新

原因：未在 setInterval 或事件触发器中重新调用 $.prettyDate。
解决：确保定期重新计算时间，如示例中的 updateTimes 函数。

6.2 时区差异导致结果错误

原因：目标时间未正确转换为本地时区。
解决：使用 UTC 时间戳并显式创建 Date 对象，或通过库（如 moment-timezone）处理时区。

6.3 插件未加载或报错

原因：未按顺序引入 jQuery 或插件文件路径错误。
解决：检查网络请求，确保 jquery.prettydate.js 成功加载。

结论

jQuery Prettydate 以其简洁的 API 和直观的输出，成为处理相对时间显示的利器。通过本文的讲解，读者可以掌握从基础配置到进阶自定义的完整流程，并能够结合实际项目需求灵活应用。无论是快速实现论坛的帖子时间展示，还是为电商网站的订单列表添加动态时间提示，Prettydate 都能显著提升开发效率与用户体验。

对于希望进一步优化性能或支持复杂场景的开发者，可以探索结合其他时间处理库（如 Moment.js）或自定义扩展逻辑。记住，工具的价值不仅在于功能本身，更在于开发者如何创造性地将其融入解决方案中。