moment太重? 那就试试miment--一个超轻量级的js时间库

介绍

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
    

第二类

  1. 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')  // 报错
    
  2. 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秒
    
  3. 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
    
  4. firstDay 获取每个月的第一天 不需要参数

     miment().firstDay()           // Sun Apr 01 2018 00:00:00 GMT+0800 (CST)
     miment().firstDay().format()  // 2018-04-01 00:00:00
    
  5. lastDay 获取每个月的最后一天 不需要参数

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

第三类

  1. Date自带方法 miment继承自Date对象,所以也拥有Date对象的所有方法,这里就不做深入讲解,需要更多关于Date对象的说明,
    请移步至MDN查看

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

写在最后

目前这些功能(函数),是我们团队在日常实践中碰到的比较常用的,如果你对功能有新的需求或者建议,
欢迎给我们提Issue,如果喜欢miment,
请在我的github上给我一个star,你的star就是我最大的动力了,谢谢!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335

推荐阅读更多精彩内容