介紹
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也同樣有,該類方法建議儘量少用
第一類
-
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搞定, 這就是我們追求的極簡,當然,也會有一丟丟的效能損失,不過個人覺得對於當今的硬體裝置,你完全可以忽略這一點點效能。除非你的專案很特殊。
-
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個引數引數名稱 引數型別 引數預設值 是否必傳 說明 增量 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') // 報錯 複製程式碼
-
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秒 複製程式碼
-
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 複製程式碼
-
firstDay
獲取每個月的第一天 不需要引數miment().firstDay() // Sun Apr 01 2018 00:00:00 GMT+0800 (CST) miment().firstDay().format() // 2018-04-01 00:00:00 複製程式碼
-
lastDay
獲取每個月的最後一天 不需要引數miment().lastDay() // Mon Apr 30 2018 00:00:00 GMT+0800 (CST) miment().lastDay().format() // 2018-04-30 00:00:00 複製程式碼
第三類
-
Date自帶方法
miment繼承自Date物件,所以也擁有Date物件的所有方法,這裡就不做深入講解,需要更多關於Date物件的說明, 請移步至MDN檢視不過需要注意的是,由於繼承而來的方法是屬於Date物件的,為了保持一致,我們沒有去對方法做改動,所以方法無法返回miment物件,也就是說無法鏈式呼叫miment
寫在最後
目前這些功能(函式),是我們團隊在日常實踐中碰到的比較常用的,如果你對功能有新的需求或者建議, 歡迎給我們提Issue,如果喜歡miment, 請在我的github上給我一個star,你的star就是我最大的動力了,謝謝!