moment太重? 那就試試miment--一個超輕量級的js時間庫

noahlam發表於2018-04-16

介紹

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就是我最大的動力了,謝謝!

相關文章