超輕量級的js時(shí)間庫miment使用解析
介紹
Miment 是一個(gè)輕量級的時(shí)間庫(打包壓縮后只有1K),沒有太多的方法,
Miment的設(shè)計(jì)理念就是讓你以幾乎為零的成本快速上手,無需一遍一遍的擼文檔
由來
首先 致敬一下Moment,非常好用的一個(gè)時(shí)間庫,我本身也是Moment重度使用者,用習(xí)慣了Moment,一碰到需要處理時(shí)間的需求,立馬Moment,不過有時(shí)候想想,Moment給我們提供了那么多的功能,但是我們天天用的,也就那么一兩個(gè),剛好最近在寫微信小程序,然后在頁面引入Moment,打包完,包竟然大了200多K,把Moment去掉,就直接少掉200多K,反復(fù)試了好幾次,確定一個(gè)Moment在小程序里面,占用大概200K的空間。
于是就想自己寫一個(gè)類似Moment的精簡的時(shí)間庫,于是就有了這個(gè),為什么要叫Miment呢,其實(shí)剛開始我是想叫Mini-Moment的,但是考慮到以后可能會經(jīng)常使用到,打2個(gè)單詞中間還要加一個(gè)下劃線太累了,所以就把Mini-Moment縮水成Miment了。
開始使用
如果你是直接在瀏覽器里面使用,請下載./dist/miment-min.js到你的項(xiàng)目里面去,然后在頁面引入后即可直接使用miment
<script src='你js存放的目錄/miment-min.js'> </script> <script> miment().format() // 2018-04-09 23:01:58 這是我寫這篇文檔的時(shí)候,運(yùn)行代碼顯示的時(shí)間 </script>
如果你是在單頁面應(yīng)用或者nodejs環(huán)境下使用,首先你需要使用安裝一下Miment
npm i miment
或者
yarn add miment
然后就可以在你的項(xiàng)目中使用了
import miment from 'miment' miment().format()
API
你也可以猛戳這里看example
API 分為3大類
- 第一類是返回其他對象的,比如format,返回的是字符串 json返回的是一個(gè)josn
- 第二類是返回miment對象的,你可以在調(diào)完一個(gè)api后面繼續(xù)調(diào)用另一個(gè)api,也就是我們所說的鏈?zhǔn)秸{(diào)用
- 第三類是從Date對象繼承的,也就是說Date對象有的方法,miment也同樣有,該類方法建議盡量少用
第一類
1.format 格式化時(shí)間 ,format方法也就是我們平時(shí)最常用的一個(gè)了,他一共接收2個(gè)參數(shù),這2個(gè)參數(shù)都有默認(rèn)值,不傳就使用默認(rèn)值
參數(shù)名稱 | 參數(shù)類型 | 參數(shù)默認(rèn)值 | 是否必傳 | 說明 |
---|---|---|---|---|
格式化的字符串 | string | 'YYYY-MM-DD hh:mm:ss' | N | 年YYYY,月MM,日DD,時(shí)hh,分mm,秒ss,毫秒SSS,數(shù)字星期ww,中文星期WW |
是否是格式化一個(gè)時(shí)間差 | boolean | false | N | 比如你要計(jì)算的時(shí)間是一個(gè)倒計(jì)時(shí),這個(gè)時(shí)候也就需要傳true |
本著簡單的原則,這里格式化方式?jīng)]有做的太靈活,有時(shí)候靈活也是一種學(xué)習(xí)成本,因?yàn)槟阈枰浐芏嗟挠梅?,不是嗎?
注意格式化字符串區(qū)分大小寫,記的技巧是大的單位大寫 YYYY MM DD,小的單位小寫 hh mm ss 毫秒跟星期特殊的單獨(dú)記,
參數(shù)必須嚴(yán)格按照說明里面的填寫,多一個(gè)或者少一個(gè)都認(rèn)不到,比如YYYY寫成YYY或者YY這樣是識別不了的
第二個(gè)參數(shù)的用法可以參考 distance函數(shù)
示例
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)
擴(kuò)展一下,如果我們只是想獲取年份或者月份或者日,可以這樣用
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') // 一
所以,有了這個(gè)方法,其實(shí)你可以不需要去記大部分原生的方法(getFUllYear,getDate,getDay...),所有的需求一個(gè)format搞定,
這就是我們追求的極簡,當(dāng)然,也會有一丟丟的性能損失,不過個(gè)人覺得對于當(dāng)今的硬件設(shè)備,你完全可以忽略這一點(diǎn)點(diǎn)性能。除非你的項(xiàng)目很特殊。
2.json 輸出json格式的時(shí)間,不需要參數(shù)
直接上代碼
miment().json()
看輸出
{ "year": 2018, "month": 4, "date": 11, "hour": 8, "minute": 57, "second": 41, "day": 3, "milliSecond": 87 }
輸出內(nèi)容比較簡單,應(yīng)該很好理解,這里就不對輸出做介紹了,day返回的是星期幾,從0-星期天 1-星期一,以此類推
3.stamp 輸出時(shí)間戳,不需要參數(shù)
miment().stamp()
看輸出
1523408529932
會輸出一串代表當(dāng)前時(shí)間的數(shù)字,這個(gè)對前端基本沒啥用,不過有時(shí)候后端的同學(xué)會要求傳這個(gè)
4.daysInMonth 獲取當(dāng)前月的天數(shù),不需要參數(shù)
miment().daysInMonth() // 30
第二類
5.add 增加或減少時(shí)間,它接收2個(gè)參數(shù)
參數(shù)名稱 | 參數(shù)類型 | 參數(shù)默認(rèn)值 | 是否必傳 | 說明 |
---|---|---|---|---|
增量 | number | 0 | N | 要增加的時(shí)間量,增加傳正數(shù),減少傳負(fù)數(shù) |
增量單位 | string | 無默認(rèn)值 | Y | 要增加的時(shí)間單位,可選有YYYY MM DD hh mm ss SSS ww WW |
單位 的可選參數(shù)跟格式化方法format的類似,這么做也是為了方便記憶,只需要記一套方案
同樣地 單位也區(qū)分大小寫,記的技巧是大的單位大寫 YYYY MM DD,小的單位小寫 hh mm ss 毫秒跟星期特殊的單獨(dú)記,
參數(shù)必須嚴(yán)格按照說明里面的填寫,多一個(gè)或者少一個(gè)都認(rèn)不到,比如YYYY寫成YYY或者YY這樣是識別不了的
miment().add(1,'DD') // 增加一天 miment().add(1,'YYYY').add(2,'MM').add(-3,'DD') // 增加1年2個(gè)月又減回去3天 miment().add(-1,'ww') // 減去一周 --即獲取上周的日期 miment().add(500,SSS) // 增加500毫秒
add返回的值是增加完后的miment對象,所以我們可以在它后面繼續(xù)調(diào)用miment有的方法。
miment().add(1,'DD').format() // 我測試的時(shí)候,打印的是 2018-04-12 09:29:55
需要注意的是,當(dāng)你調(diào)完第一類的方法以后,返回的就不是miment對象了,比如format返回的是一個(gè)字符串,這個(gè)時(shí)候你就不能再調(diào)用miment上的方法了,
會報(bào)錯(cuò) Uncaught TypeError: miment(...).format(...).xxx is not a function 因?yàn)樽址脑蜕厦鏇]有這個(gè)方法
miment().add(1,'DD').format().add(1,'DD') // 報(bào)錯(cuò)
6.distance 計(jì)算2個(gè)時(shí)間的距離 接收2個(gè)參數(shù),返回一個(gè)miment對象
參數(shù)名稱 | 參數(shù)類型 | 參數(shù)默認(rèn)值 | 是否必傳 | 說明 |
---|---|---|---|---|
起始時(shí)間 | miment/date/number/string | 無 | Y | 接受4種類型參數(shù),會自動(dòng)轉(zhuǎn)換 |
結(jié)束時(shí)間 | miment/date/number/string | 無 | N | 同上 |
只傳一個(gè)起始時(shí)間的時(shí)候,返回 起始時(shí)間 - miment當(dāng)前時(shí)間
起始時(shí)間和結(jié)束時(shí)間都有傳的時(shí)候,返回 起始時(shí)間 - 結(jié)束時(shí)間
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方法返回的時(shí)間,竟然都是1969年的? 這實(shí)際上是基于1970-01-01 00:00:00的一個(gè)毫秒數(shù),
具體請看 百度百科-unix時(shí)間,
而我們把兩個(gè)時(shí)間相減,得到的可能是一個(gè)相對來說很小的數(shù)(還有可能是負(fù)數(shù)),所以離1970很近
那我們要怎么顯示我們能看得懂的時(shí)間呢? 很簡單 用格式化時(shí)間函數(shù)format,還記得format函數(shù)的第二個(gè)參數(shù)嗎?
就是專門用來格式化distance計(jì)算出來的時(shí)間差,只要把第二個(gè)參數(shù)設(shè)為true,就能把當(dāng)前時(shí)間格式化成時(shí)間差
我們先來看看第二個(gè)參數(shù)不傳,或者傳false的時(shí)候是什么樣子的
miment().distance(1523408529932).format('YYYY年MM月DD日 hh時(shí)mm分ss秒') // 1969年12月30日 00時(shí)52分16秒 miment().distance(1523408529932).format('YYYY年MM月DD日 hh時(shí)mm分ss秒',false) // 1969年12月30日 00時(shí)52分16秒
然后我們把第二個(gè)參數(shù)設(shè)為true
miment().distance(1523408529932).format('YYYY年MM月DD日 hh時(shí)mm分ss秒',true) // 00年01月03日 23時(shí)08分23秒
7.firstDayOfWeek 獲取 本周的第一天(周日) 不需要參數(shù)
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 獲取每個(gè)月的第一天 不需要參數(shù)
miment().firstDay() // Sun Apr 01 2018 00:00:00 GMT+0800 (CST) miment().firstDay().format() // 2018-04-01 00:00:00
9.lastDay 獲取每個(gè)月的最后一天 不需要參數(shù)
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對象的所有方法,這里就不做深入講解,需要更多關(guān)于Date對象的說明,
請移步至MDN查看
不過需要注意的是,由于繼承而來的方法是屬于Date對象的,為了保持一致,我們沒有去對方法做改動(dòng),所以方法無法返回miment對象,也就是說無法鏈?zhǔn)秸{(diào)用miment
寫在最后
目前這些功能(函數(shù)),是我們團(tuán)隊(duì)在日常實(shí)踐中碰到的比較常用的,如果你對功能有新的需求或者建議,
歡迎給我們提Issue,如果喜歡miment,
請?jiān)谖业?a target="_blank" rel="external nofollow" >github上給我一個(gè)star,你的star就是我最大的動(dòng)力了,謝謝!
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)移動(dòng)端整屏滑動(dòng)的實(shí)例代碼
本文通過實(shí)例代碼給大家分享了基于js 實(shí)現(xiàn)移動(dòng)端整屏滑動(dòng)效果,基本思路是檢測手指滑動(dòng)方向,獲取手指抬起時(shí)的位置,減去手指按下時(shí)的位置,得正即為向下滑動(dòng)了,具體實(shí)現(xiàn)代碼大家參考下本文2017-11-11JavaScript使用readAsDataUrl方法預(yù)覽圖片
這篇文章主要為大家詳細(xì)介紹了JavaScript使用readAsDataUrl方法預(yù)覽圖片,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05原生Js與jquery的多組處理, 僅展開一個(gè)區(qū)塊的折疊效果
同一個(gè)頁面, 有多組(不固定), 每組區(qū)塊數(shù)量不一定一樣的小區(qū)塊. 要求每次只展開一個(gè)區(qū)塊,需要的朋友可以參考下。2011-01-01JavaScript中自帶的 reduce()方法使用示例詳解
下文小編給大家?guī)砹薺s中自帶的reduce()方法使用示例詳解,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-08-08javascript之大字符串的連接的StringBuffer 類
javascript之大字符串的連接的StringBuffer 類...2007-05-05一個(gè)不用onmouseup的拖動(dòng)函數(shù)
一個(gè)不用onmouseup的拖動(dòng)函數(shù)...2007-05-05JavaScript中for循環(huán)的幾種寫法與效率總結(jié)
每個(gè)接觸JS的開發(fā)人員都不可避免的與for循環(huán)打交道,畢竟這是遍歷必不可少的工具之一。然而當(dāng)循環(huán)次數(shù)比較大時(shí),效率問題必須重視。下面這篇文章就主要介紹了JavaScript中幾種for循環(huán)的寫法與效率,需要的朋友可以參考借鑒,下面來一起看看吧。2017-02-02JS表格組件神器bootstrap table詳解(強(qiáng)化版)
這篇文章主要以實(shí)例的方式為大家再次介紹了JS表格組件神器bootstrap table,bootstrap table界面采用扁平化的風(fēng)格,用戶體驗(yàn)比較好,更好兼容各種客戶端,需要了解更多bootstrap table的朋友可以參考下2016-05-05JavaScript ES6常用基礎(chǔ)知識總結(jié)
ES6中為我們提供了很多好用的新特性,其中包括let,箭頭函數(shù)以及擴(kuò)展運(yùn)算符…等,以下就是總結(jié)的常用基礎(chǔ)知識2019-02-02