章节索引 :

moment

JavaScript 日期处理类库

moment.js 主要用于处理时间,许多程序的第三方框架在一些时间处理上都会采用 moment.js

1. 使用

moment.js 在全局下以 moment 作为入口,提供了一系列时间相关的方法。

<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script>
  var now = moment().calendar();

  console.log(now); // 输出当前日历时间
</script>

现在的相对时间差需求非常常见,如下单时间,是 多少分钟前moment.js 提供了相对时间计算:

moment().startOf('hour').fromNow(); // 相对这个小时过去了多少分钟

var timestamp = 1593933593236; // 2020年7曰5日下午15点20分38秒
moment(timestamp).fromNow(); // 相对时间戳多久前

图片描述

2. 国际化

上述例子发现输出的结果是英文的,显然是不适合在国内环境使用,moment.js 提供了国际化支持,在现有的库中,moment 支持的语言可以说是相对完备了。

通过引入对应的国际化资源(语言文件),来切换语言。

<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/moment.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/locale/zh-cn.min.js"></script>
<script>
  var now = moment().calendar();

  console.log(now);// 输出当前日历时间

  moment().startOf('hour').fromNow(); // 相对这个小时过去了多少分钟

  var timestamp = 1593933593236; // 2020年7曰5日下午15点20分38秒
  moment(timestamp).fromNow(); // 相对时间戳多久前
</script>

图片描述

有关国际化的更多内容可以参考文档

3. 小结

如果项目有大量处理时间的需求,可以考虑引入 moment.js 来处理。

前置知识
什么是JavaScript 开发与学习环境准备 调试方案
基础
JavaScript 变量 JavaScript 数据类型 JavaScript if 语句 JavaScript for 语句 JavaScript 算数运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 表达式 JavaScript 函数 JavaScript 对象 JavaScript 字符串 JavaScript 数字 JavaScript 数组 JavaScript switch 语句 JavaScript while 语句 JavaScript break与continue JavaScript with document.cookie
内置对象
JavaScript Function JavaScript Math JavaScript Date JavaScript RegExp JavaScript JSON
JavaScript 与 DOM
什么是DOM DOM和JavaScript的关系 获取和操作 DOM 节点 JavaScript DOM与事件 JavaScript DOM 事件绑定 JavaScript DOM 事件对象 JavaScript DOM 事件流 JavaScript DOM 事件优化 JavaScript DOM 自定义事件
表单处理
使用 JavaScript 校验表单
BOM
BOM window 对象 常用的 BOM 相关对象 BOM 常用属性和方法
AJAX
JavaScript AJAX
进阶知识
JavaScript 异常处理 JavaScript 三元运算符 JavaScript 逗号操作符 JavaScript void JavaScript typeof JavaScript delete JavaScript debugger JavaScript getter &setter JavaScript 原型 JavaScript new操作符和构造函数 JavaScript instanceof JavaScript this JavaScript 严格模式 JavaScript 作用域 JavaScript 闭包 JavaScript 变量提升 JavaScript 对象包装器
常用库
jQuery Lodash moment.js swiper
进阶指南
ECMAScript6 Node.js Babel CSS 预处理器 代码规范 TypeScript Web Components 小程序 Vue / React / Angular JavaScript 关键字
常见疑点与误区
分号问题 对象属性访问问题 this 使用问题 浮点数精度问题 独一无二的 NaN 避免全局污染 控制台观察对象问题 根据环境选择语言特性
扩展
相关资源