当前位置: 首页 > Web前端 > HTML5

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

时间:2023-04-05 18:21:43 HTML5

介绍Miment是一个轻量级的时间库(打包压缩后只有1K),方法不多,Miment的设计理念就是让你快速上手成本几乎为零,无需一遍又一遍地阅读文档。应对时间的需求,马上发朋友圈,但有时候想想,发朋友圈给我们提供了那么多功能,而我们每天只用到一两个,正好最近在写一个微信小程序,然后就引入了发朋友圈page,打包后,包大了200K多。如果去掉Moment,直接损失200K多。反复试了几次,确定小程序里有一个Moment,占用空间200K左右,所以想自己写一个。一个类似Moment的精简时间库,于是就有了这个。为什么叫美满呢?其实一开始我是想叫它Mini-Moment的,但是考虑到以后可能会经常用到,所以需要加在两个词之间。一个下划线太累了,所以我把Mini-Moment缩短为Miment。开始使用如果直接在浏览器中使用,请下载./dist/miment-min.js到你的项目中,然后页面导入后就可以直接使用miment如果你是在单页应用或者nodejs环境下使用,首先你需要安装mimentnpmimiment或者yarnaddmiment然后你可以在你的项目中使用importmimentfrom'miment'miment().format()API也可以戳这里看exampleAPI分为3类。第一类返回其他对象,比如format,它返回一个字符串。JSON返回一个josn。第二类返回miment对象。你可以在调整一个API之后,继续调用另一个API,也就是我们所说的链式调用。第三类继承自Date对象,也就是说Date对象有方法,miment也有方法。建议尽量使用此类方法。less使用第一种格式来格式化时间。格式化方法是最常用的一种。它一共接收2个参数。这2个参数具有默认值。如果不传递,则使用默认值。是否必须传值表示格式化字符串string'YYYY-MM-DDhh:mm:ss'N年YYYY,月MM,日DD,时??hh,分mm,秒ss,毫秒SSS,数字周ww,中文星期的WW是否格式化一个时差booleanfalseN比如你要计算的时间是倒计时,此时需要传true为了简单起见,这里的格式化方式不是太灵活了,有时候灵活也是一种学习成本,因为你需要记住很多用法,不是吗?,注意格式化后的字符串是区分大小写的。记忆技巧是大单位用大写YYYYMMDD,小单位用hhmmss。毫秒和星期特意分开记录。参数一定要严格按照说明填写,多一个少一个都认不出来。比如YYYY写成YYY或者YY,是无法识别的。第二个参数的用法请参考距离函数示例miment().format('YYYYMMDDhh:mm:ss')//2018-04-0923:49:36miment().format('YYYY/MM/DDhh-mm-ssSSS')//2018/04/0923-49-36568miment().format('YYYY,MM,DD,WW,WW')//2018年4月9日星期一,miment().format('YYYY,MM,DD,weekww')//Week1,April09,2018(星期天会显示第0周)展开,如果我们只想得到年月日,可以使用miment().format('YYYY')//2018miment()。format('MM')//04miment().format('DD')//09miment().format('hh')//23miment().format('mm')//57miment().format('ss')//16miment().format('SSS')//063miment().format('ww')//1miment().format('WW')//一个这样,用这个方法,在其实,原来的大部分方法(getFUllYear,getDate,getDay...)不需要死记硬背,所有的需求都可以用一种格式搞定,这就是我们追求的简单,当然会有一点loss性能损失,但是个人觉得对于今天的硬件设备来说,除非你的项目非常特殊,否则完全可以忽略这一点性能。json输出json格式的时间,不需要参数,直接输入代码miment().json()就可以看到输出{"year":2018,"month":4,"date":11,"hour":8,"minute":57,"second":41,"day":3,"milliSecond":87}输出内容比较简单,应该容易理解。这里就不介绍输出了。day返回的天是星期几,从0-星期日1-星期一等等stamp输出时间戳,不需要参数miment().stamp()看输出1523408529932会输出一串数字代表当前时间,这个对于前端基本没什么用,但是有时候后端同学会要求通过这个daysInMonth来获取当前月份的天数,没有参数miment().daysInMonth()//30的第二种add增加或减少时间,接收2个参数参数名称参数类型参数默认值必须传入表示增加number0N增加的时间量,正数增加,负数减少增量单位string无默认valueY增加的时间单位,可选YYYYMMDDhhmmssSSSwwWWunit可选参数,格式与方法格式类似。这也是为了方便记忆。你只需要记住一套方案。该单位也区分大小写。记忆的技巧是大单位大写YYYYMMDD,小单位小写hhmmss毫秒和星期特殊分开,参数一定要严格按照说明填写,多一少一不会被识别,比如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-1209:29:55。需要注意的是,当你调整完第一个方法以后,返回的不是一个miment对象。例如,format返回一个字符串。这时候就不能再调用miment上的方法了,会报错UncaughtTypeError:miment(...).format(...).xxxisnotafunction因为字符串的原型没有有这个方法miment().add(1,'DD').format().add(1,'DD')//误差距离计算两次之间的距离接收2个参数,返回一个miment对象参数名称参数类型参数默认值必填说明开始时间miment/date/number/string否Y接受4种参数,结束时间会自动转换miment/date/number/string否N同上,只上传一个开始时间,返回开始时间-当前时间。当开始时间和结束时间都上传时,返回开始时间-结束时间miment().distance('2018-04-1000:00:00')//MonDec29196922:11:51GMT+0800(CST)miment().distance(1523408529932)//1969年12月31日星期三07:13:47GMT+0800(CST)miment().distance('2018-04-1000:00:00',newDate())//MonDec29196922:11:13GMT+0800(CST)miment().distance('2018-04-1000:00:00','2018-04-1100:00:00')//MonDec29196922:10:46GMT+0800(CST)你一定注意到距离法返回的时间,都是1969年吧?这实际上是基于1970-01-0100:00:00的毫秒数。具体可以参考百度百科-unix时间。当我们减去两次时,我们可能会得到一个相对较小的数字(除了可能是负数),所以已经很接近1970了,那我们怎么显示我们能理解的时间呢?很简单使用format时间函数format,还记得format函数的第二个参数吗?专门用于格式化按距离计算的时间差。只要将第二个参数设置为true,就可以将当前时间格式化为时差。我们先来看看第二个参数不传,或者传false时是什么样子miment().distance(1523408529932).format('YYYY年MM月DD日hh时mm分ss秒')//1969年12月30日00:52:16miment().distance(1523408529932)。format('YYYY,MM,DD,hh,mm,ss,second',false)//00:52:16,December30,1969然后我们将第二个参数设置为truemiment().distance(1523408529932).format('YYYY,MM,DD,hhhour,mm,ss,second',true)//firstDayOfWeek获取本周(星期日)的第一天,不带参数miment().firstDayOfWeek()//SunApr08201811:27:55GMT+0800(CST)miment().firstDayOfWeek().format()//2018-04-0811:27:55如果你想得到星期一呢?周二、周三、周四、周五和周六呢?miment().firstDayOfWeek().add(1,'DD').format()//2018-04-0911:27:55firstDay获取每个月的第一天,不带参数miment().firstDay()//SunApr01201800:00:00GMT+0800(CST)miment().firstDay().format()//2018-04-0100:00:00lastDay获取每个月的最后一天,不带参数miment().lastDay()//2018年4月30日星期一00:00:00GMT+0800(CST)miment().lastDay().format()//2018-04-3000:00:00第三种Date有自己的方法miment继承自Date对象,所以它也有所有Date对象的方法,这里就不做深入的解释了。如果需要关于Date对象的更多解释,请移步MDN查看>不过需要注意的是,继承的方法是属于Date对象的。为了保持一致性,我们没有对方法进行更改,所以方法不能返回miment对象,也就是说miment不能链式调用。这些功能(函数)写在最后。这些功能(函数)是我们团队在日常实践中常用的。如果您有新的功能,有任何需求或建议,欢迎给我们发送Issue。如果你喜欢miment,请在我的github上给我一个star。你的star是我最大的动力,谢谢!