超轻量级的js时间库miment使用解析


Posted in Javascript onAugust 02, 2019

介绍

Miment 是一个轻量级的时间库(打包压缩后只有1K),没有太多的方法,

Miment的设计理念就是让你以几乎为零的成本快速上手,无需一遍一遍的撸文档

由来

首先 致敬一下Moment,非常好用的一个时间库,我本身也是Moment重度使用者,用习惯了Moment,一碰到需要处理时间的需求,立马Moment,不过有时候想想,Moment给我们提供了那么多的功能,但是我们天天用的,也就那么一两个,刚好最近在写微信小程序,然后在页面引入Moment,打包完,包竟然大了200多K,把Moment去掉,就直接少掉200多K,反复试了好几次,确定一个Moment在小程序里面,占用大概200K的空间。

于是就想自己写一个类似Moment的精简的时间库,于是就有了这个,为什么要叫Miment呢,其实刚开始我是想叫Mini-Moment的,但是考虑到以后可能会经常使用到,打2个单词中间还要加一个下划线太累了,所以就把Mini-Moment缩水成Miment了。

开始使用

如果你是直接在浏览器里面使用,请下载./dist/miment-min.js到你的项目里面去,然后在页面引入后即可直接使用miment

<script src='你js存放的目录/miment-min.js'> </script>
<script>
  miment().format() // 2018-04-09 23:01:58 这是我写这篇文档的时候,运行代码显示的时间
</script>

如果你是在单页面应用或者nodejs环境下使用,首先你需要使用安装一下Miment

npm i miment

或者

yarn add miment

然后就可以在你的项目中使用了

import miment from 'miment'
miment().format()

API

你也可以猛戳这里看example

API 分为3大类

  • 第一类是返回其他对象的,比如format,返回的是字符串 json返回的是一个josn
  • 第二类是返回miment对象的,你可以在调完一个api后面继续调用另一个api,也就是我们所说的链式调用
  • 第三类是从Date对象继承的,也就是说Date对象有的方法,miment也同样有,该类方法建议尽量少用

第一类

1.format 格式化时间 ,format方法也就是我们平时最常用的一个了,他一共接收2个参数,这2个参数都有默认值,不传就使用默认值

参数名称 参数类型 参数默认值 是否必传 说明
格式化的字符串 string 'YYYY-MM-DD hh:mm:ss' N 年YYYY,月MM,日DD,时hh,分mm,秒ss,毫秒SSS,数字星期ww,中文星期WW
是否是格式化一个时间差 boolean false N 比如你要计算的时间是一个倒计时,这个时候也就需要传true

本着简单的原则,这里格式化方式没有做的太灵活,有时候灵活也是一种学习成本,因为你需要记很多的用法,不是吗?,

注意格式化字符串区分大小写,记的技巧是大的单位大写 YYYY MM DD,小的单位小写 hh mm ss 毫秒跟星期特殊的单独记,

参数必须严格按照说明里面的填写,多一个或者少一个都认不到,比如YYYY写成YYY或者YY这样是识别不了的

第二个参数的用法可以参考 distance函数

示例

miment().format('YYYY年MM月DD日 hh:mm:ss') // 2018-04-09 23:49:36
 miment().format('YYYY/MM/DD hh-mm-ss SSS') // 2018/04/09 23-49-36 568
 miment().format('YYYY年MM月DD日 星期WW')   // 2018年04月09日 星期一
 miment().format('YYYY年MM月DD日 星期ww')   // 2018年04月09日 星期1 (星期日这边会显示星期0)

扩展一下,如果我们只是想获取年份或者月份或者日,可以这样用

miment().format('YYYY')  // 2018
 miment().format('MM')   // 04
 miment().format('DD')   // 09
 miment().format('hh')   // 23
 miment().format('mm')   // 57
 miment().format('ss')   // 16
 miment().format('SSS')  // 063
 miment().format('ww')   // 1
 miment().format('WW')   // 一

所以,有了这个方法,其实你可以不需要去记大部分原生的方法(getFUllYear,getDate,getDay...),所有的需求一个format搞定,

这就是我们追求的极简,当然,也会有一丢丢的性能损失,不过个人觉得对于当今的硬件设备,你完全可以忽略这一点点性能。除非你的项目很特殊。

2.json 输出json格式的时间,不需要参数

直接上代码

miment().json()

看输出

{
   "year": 2018,
   "month": 4,
   "date": 11,
   "hour": 8,
   "minute": 57,
   "second": 41,
   "day": 3,
   "milliSecond": 87
 }

输出内容比较简单,应该很好理解,这里就不对输出做介绍了,day返回的是星期几,从0-星期天 1-星期一,以此类推

3.stamp 输出时间戳,不需要参数

miment().stamp()

看输出

1523408529932

会输出一串代表当前时间的数字,这个对前端基本没啥用,不过有时候后端的同学会要求传这个

4.daysInMonth 获取当前月的天数,不需要参数

miment().daysInMonth()  // 30

第二类

5.add 增加或减少时间,它接收2个参数

参数名称 参数类型 参数默认值 是否必传 说明
增量 number 0 N 要增加的时间量,增加传正数,减少传负数
增量单位 string 无默认值 Y 要增加的时间单位,可选有YYYY MM DD hh mm ss SSS ww WW

单位 的可选参数跟格式化方法format的类似,这么做也是为了方便记忆,只需要记一套方案

同样地 单位也区分大小写,记的技巧是大的单位大写 YYYY MM DD,小的单位小写 hh mm ss 毫秒跟星期特殊的单独记,
参数必须严格按照说明里面的填写,多一个或者少一个都认不到,比如YYYY写成YYY或者YY这样是识别不了的

miment().add(1,'DD') // 增加一天
 miment().add(1,'YYYY').add(2,'MM').add(-3,'DD') // 增加1年2个月又减回去3天
 miment().add(-1,'ww') // 减去一周 --即获取上周的日期
 miment().add(500,SSS) // 增加500毫秒

add返回的值是增加完后的miment对象,所以我们可以在它后面继续调用miment有的方法。

miment().add(1,'DD').format()  // 我测试的时候,打印的是 2018-04-12 09:29:55

需要注意的是,当你调完第一类的方法以后,返回的就不是miment对象了,比如format返回的是一个字符串,这个时候你就不能再调用miment上的方法了,

会报错 Uncaught TypeError: miment(...).format(...).xxx is not a function 因为字符串的原型上面没有这个方法

miment().add(1,'DD').format().add(1,'DD') // 报错

6.distance 计算2个时间的距离 接收2个参数,返回一个miment对象

参数名称 参数类型 参数默认值 是否必传 说明
起始时间 miment/date/number/string Y 接受4种类型参数,会自动转换
结束时间 miment/date/number/string N 同上

只传一个起始时间的时候,返回 起始时间 - miment当前时间

起始时间和结束时间都有传的时候,返回 起始时间 - 结束时间

miment().distance('2018-04-10 00:00:00') // Mon Dec 29 1969 22:11:51 GMT+0800 (CST)
 miment().distance(1523408529932)     // Wed Dec 31 1969 07:13:47 GMT+0800 (CST)
 miment().distance('2018-04-10 00:00:00', new Date()) //Mon Dec 29 1969 22:11:13 GMT+0800 (CST)
 miment().distance('2018-04-10 00:00:00', '2018-04-11 00:00:00') //Mon Dec 29 1969 22:10:46 GMT+0800 (CST)

你一定注意到了,distance方法返回的时间,竟然都是1969年的? 这实际上是基于1970-01-01 00:00:00的一个毫秒数,
具体请看 百度百科-unix时间,

而我们把两个时间相减,得到的可能是一个相对来说很小的数(还有可能是负数),所以离1970很近

那我们要怎么显示我们能看得懂的时间呢? 很简单 用格式化时间函数format,还记得format函数的第二个参数吗?

就是专门用来格式化distance计算出来的时间差,只要把第二个参数设为true,就能把当前时间格式化成时间差
我们先来看看第二个参数不传,或者传false的时候是什么样子的

miment().distance(1523408529932).format('YYYY年MM月DD日 hh时mm分ss秒')    // 1969年12月30日 00时52分16秒
 miment().distance(1523408529932).format('YYYY年MM月DD日 hh时mm分ss秒',false) // 1969年12月30日 00时52分16秒

然后我们把第二个参数设为true

miment().distance(1523408529932).format('YYYY年MM月DD日 hh时mm分ss秒',true) // 00年01月03日 23时08分23秒

7.firstDayOfWeek 获取 本周的第一天(周日) 不需要参数

miment().firstDayOfWeek()      // Sun Apr 08 2018 11:27:55 GMT+0800 (CST)
  miment().firstDayOfWeek().format() // 2018-04-08 11:27:55

如果想获取周一呢?周二、三、四、五、六呢?

miment().firstDayOfWeek().add(1,'DD').format() // 2018-04-09 11:27:55

8.firstDay 获取每个月的第一天 不需要参数

miment().firstDay()      // Sun Apr 01 2018 00:00:00 GMT+0800 (CST)
 miment().firstDay().format() // 2018-04-01 00:00:00

9.lastDay 获取每个月的最后一天 不需要参数

miment().lastDay()      // Mon Apr 30 2018 00:00:00 GMT+0800 (CST)
 miment().lastDay().format() // 2018-04-30 00:00:00

第三类

10.Date自带方法 miment继承自Date对象,所以也拥有Date对象的所有方法,这里就不做深入讲解,需要更多关于Date对象的说明,

请移步至MDN查看

不过需要注意的是,由于继承而来的方法是属于Date对象的,为了保持一致,我们没有去对方法做改动,所以方法无法返回miment对象,也就是说无法链式调用miment

写在最后

目前这些功能(函数),是我们团队在日常实践中碰到的比较常用的,如果你对功能有新的需求或者建议,

欢迎给我们提Issue,如果喜欢miment,

请在我的github上给我一个star,你的star就是我最大的动力了,谢谢!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JS写的一个TableView控件代码
Jan 23 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
JavaScript常用正则验证函数实例小结【年龄,数字,Email,手机,URL,日期等】
Jan 23 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
Angular6中使用Swiper的方法示例
Jul 09 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 #Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 #Javascript
微信小程序的授权实现过程解析
Aug 02 #Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 #jQuery
用 js 写一个 js 解释器过程详解
Aug 02 #Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 #Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 #Javascript
You might like
PHP脚本数据库功能详解(上)
2006/10/09 PHP
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
Javascript 实用小技巧
2010/04/07 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
python基础教程之udp端口扫描
2014/02/10 Python
python中__call__内置函数用法实例
2015/06/04 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
旅游管理专业学生求职信
2013/09/28 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
四下基层实施方案
2014/03/28 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
期中考试复习计划
2015/01/19 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python