介紹
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
如果你是在單頁面應用或者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就是我最大的動力了,謝謝!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94290.html
介紹 Miment 是一個輕量級的時間庫(打包壓縮后只有1K),沒有太多的方法,Miment的設計理念就是讓你以幾乎為零的成本快速上手,無需一遍一遍的擼文檔 由來 首先 致敬一下Moment,非常好用的一個時間庫,我本身也是Moment重度使用者,用習慣了Moment,一碰到需要處理時間的需求,立馬Moment,不過有時候想想,Moment給我們提供了那么多的功能,但是我們天天用的,也就那么一兩個...
介紹 Miment 是一個輕量級的時間庫(打包壓縮后只有1K),沒有太多的方法,Miment的設計理念就是讓你以幾乎為零的成本快速上手,無需一遍一遍的擼文檔 由來 首先 致敬一下Moment,非常好用的一個時間庫,我本身也是Moment重度使用者,用習慣了Moment,一碰到需要處理時間的需求,立馬Moment,不過有時候想想,Moment給我們提供了那么多的功能,但是我們天天用的,也就那么一兩個...
摘要:方便靈巧,功能強大。唯一的缺點是,對于前端來講,它的包太太太太太大了。我是的重度用戶,但它的大小時刻都在折磨人。所以,開源社區有了一些精簡的方案。的使用方法,也和基本一致。其實對于絕大部分的時間操作場景,和更符合使用要求。 關于時間的操作,一直在使用momentjs這個庫。方便靈巧,功能強大。唯一的缺點是,對于前端HTML來講,它的包太太太太太大了。 我是momentjs的重度用戶,但...
showImg(https://segmentfault.com/img/bV9wV7?w=1952&h=712);Moment.js 是一個大而全的 JS 時間庫,很大地方便了我們處理日期和時間。但是 Moment.js太重了(200k+ with locals),可能一般項目也只使用到了她幾個常用的API。雖然社區也有幾個輕量的時間庫,要想遷移過去又會增加新的學習和遷移成本。 如果能有一個和 ...
閱讀 2315·2021-11-24 10:33
閱讀 1385·2019-08-30 15:43
閱讀 3276·2019-08-29 17:24
閱讀 3481·2019-08-29 14:21
閱讀 2220·2019-08-29 13:59
閱讀 1735·2019-08-29 11:12
閱讀 2811·2019-08-28 18:00
閱讀 1848·2019-08-26 12:17