<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當(dāng)前位置: 首頁 - 科技 - 知識百科 - 正文

        超輕量級的js時間庫miment使用解析

        來源:懂視網(wǎng) 責(zé)編:小采 時間:2020-11-27 21:52:46
        文檔

        超輕量級的js時間庫miment使用解析

        超輕量級的js時間庫miment使用解析:介紹 Miment 是一個輕量級的時間庫(打包壓縮后只有1K),沒有太多的方法, Miment的設(shè)計(jì)理念就是讓你以幾乎為零的成本快速上手,無需一遍一遍的擼文檔 由來 首先 致敬一下Moment,非常好用的一個時間庫,我本身也是Moment重度使用者,用習(xí)慣了Mome
        推薦度:
        導(dǎo)讀超輕量級的js時間庫miment使用解析:介紹 Miment 是一個輕量級的時間庫(打包壓縮后只有1K),沒有太多的方法, Miment的設(shè)計(jì)理念就是讓你以幾乎為零的成本快速上手,無需一遍一遍的擼文檔 由來 首先 致敬一下Moment,非常好用的一個時間庫,我本身也是Moment重度使用者,用習(xí)慣了Mome

        介紹

        Miment 是一個輕量級的時間庫(打包壓縮后只有1K),沒有太多的方法,

        Miment的設(shè)計(jì)理念就是讓你以幾乎為零的成本快速上手,無需一遍一遍的擼文檔

        由來

        首先 致敬一下Moment,非常好用的一個時間庫,我本身也是Moment重度使用者,用習(xí)慣了Moment,一碰到需要處理時間的需求,立馬Moment,不過有時候想想,Moment給我們提供了那么多的功能,但是我們天天用的,也就那么一兩個,剛好最近在寫微信小程序,然后在頁面引入Moment,打包完,包竟然大了200多K,把Moment去掉,就直接少掉200多K,反復(fù)試了好幾次,確定一個Moment在小程序里面,占用大概200K的空間。

        于是就想自己寫一個類似Moment的精簡的時間庫,于是就有了這個,為什么要叫Miment呢,其實(shí)剛開始我是想叫Mini-Moment的,但是考慮到以后可能會經(jīng)常使用到,打2個單詞中間還要加一個下劃線太累了,所以就把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 這是我寫這篇文檔的時候,運(yùn)行代碼顯示的時間
        </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大類

      1. 第一類是返回其他對象的,比如format,返回的是字符串 json返回的是一個josn
      2. 第二類是返回miment對象的,你可以在調(diào)完一個api后面繼續(xù)調(diào)用另一個api,也就是我們所說的鏈?zhǔn)秸{(diào)用
      3. 第三類是從Date對象繼承的,也就是說Date對象有的方法,miment也同樣有,該類方法建議盡量少用
      4. 第一類

        1.format 格式化時間 ,format方法也就是我們平時最常用的一個了,他一共接收2個參數(shù),這2個參數(shù)都有默認(rèn)值,不傳就使用默認(rèn)值

        參數(shù)名稱 參數(shù)類型 參數(shù)默認(rèn)值 是否必傳 說明
        格式化的字符串 string 'YYYY-MM-DD hh:mm:ss' N 年YYYY,月MM,日DD,時hh,分mm,秒ss,毫秒SSS,數(shù)字星期ww,中文星期WW
        是否是格式化一個時間差 boolean false N 比如你要計(jì)算的時間是一個倒計(jì)時,這個時候也就需要傳true

        本著簡單的原則,這里格式化方式?jīng)]有做的太靈活,有時候靈活也是一種學(xué)習(xí)成本,因?yàn)槟阈枰浐芏嗟挠梅ǎ皇菃幔?

        注意格式化字符串區(qū)分大小寫,記的技巧是大的單位大寫 YYYY MM DD,小的單位小寫 hh mm ss 毫秒跟星期特殊的單獨(dú)記,

        參數(shù)必須嚴(yán)格按照說明里面的填寫,多一個或者少一個都認(rèn)不到,比如YYYY寫成YYY或者YY這樣是識別不了的

        第二個參數(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') // 一

        所以,有了這個方法,其實(shí)你可以不需要去記大部分原生的方法(getFUllYear,getDate,getDay...),所有的需求一個format搞定,

        這就是我們追求的極簡,當(dāng)然,也會有一丟丟的性能損失,不過個人覺得對于當(dāng)今的硬件設(shè)備,你完全可以忽略這一點(diǎn)點(diǎn)性能。除非你的項(xiàng)目很特殊。

        2.json 輸出json格式的時間,不需要參數(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ù)

         miment().stamp()

        看輸出

        1523408529932

        會輸出一串代表當(dāng)前時間的數(shù)字,這個對前端基本沒啥用,不過有時候后端的同學(xué)會要求傳這個

        4.daysInMonth 獲取當(dāng)前月的天數(shù),不需要參數(shù)

         miment().daysInMonth() // 30

        第二類

        5.add 增加或減少時間,它接收2個參數(shù)

        參數(shù)名稱 參數(shù)類型 參數(shù)默認(rèn)值 是否必傳 說明
        增量 number 0 N 要增加的時間量,增加傳正數(shù),減少傳負(fù)數(shù)
        增量單位 string 無默認(rèn)值 Y 要增加的時間單位,可選有YYYY MM DD hh mm ss SSS ww WW

        單位 的可選參數(shù)跟格式化方法format的類似,這么做也是為了方便記憶,只需要記一套方案

        同樣地 單位也區(qū)分大小寫,記的技巧是大的單位大寫 YYYY MM DD,小的單位小寫 hh mm ss 毫秒跟星期特殊的單獨(dú)記,
        參數(shù)必須嚴(yán)格按照說明里面的填寫,多一個或者少一個都認(rèn)不到,比如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對象,所以我們可以在它后面繼續(xù)調(diào)用miment有的方法。

         miment().add(1,'DD').format() // 我測試的時候,打印的是 2018-04-12 09:29:55

        需要注意的是,當(dāng)你調(diào)完第一類的方法以后,返回的就不是miment對象了,比如format返回的是一個字符串,這個時候你就不能再調(diào)用miment上的方法了,

        會報錯 Uncaught TypeError: miment(...).format(...).xxx is not a function 因?yàn)樽址脑蜕厦鏇]有這個方法

         miment().add(1,'DD').format().add(1,'DD') // 報錯

        6.distance 計(jì)算2個時間的距離 接收2個參數(shù),返回一個miment對象

        參數(shù)名稱 參數(shù)類型 參數(shù)默認(rèn)值 是否必傳 說明
        起始時間 miment/date/number/string Y 接受4種類型參數(shù),會自動轉(zhuǎn)換
        結(jié)束時間 miment/date/number/string N 同上

        只傳一個起始時間的時候,返回 起始時間 - miment當(dāng)前時間

        起始時間和結(jié)束時間都有傳的時候,返回 起始時間 - 結(jié)束時間

         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年的? 這實(shí)際上是基于1970-01-01 00:00:00的一個毫秒數(shù),
        具體請看 百度百科-unix時間,

        而我們把兩個時間相減,得到的可能是一個相對來說很小的數(shù)(還有可能是負(fù)數(shù)),所以離1970很近

        那我們要怎么顯示我們能看得懂的時間呢? 很簡單 用格式化時間函數(shù)format,還記得format函數(shù)的第二個參數(shù)嗎?

        就是專門用來格式化distance計(jì)算出來的時間差,只要把第二個參數(shù)設(shè)為true,就能把當(dāng)前時間格式化成時間差
        我們先來看看第二個參數(shù)不傳,或者傳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秒

        然后我們把第二個參數(shù)設(shè)為true

         miment().distance(1523408529932).format('YYYY年MM月DD日 hh時mm分ss秒',true) // 00年01月03日 23時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 獲取每個月的第一天 不需要參數(shù)

         miment().firstDay() // Sun Apr 01 2018 00:00:00 GMT+0800 (CST)
         miment().firstDay().format() // 2018-04-01 00:00:00

        9.lastDay 獲取每個月的最后一天 不需要參數(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對象的,為了保持一致,我們沒有去對方法做改動,所以方法無法返回miment對象,也就是說無法鏈?zhǔn)秸{(diào)用miment

        寫在最后

        目前這些功能(函數(shù)),是我們團(tuán)隊(duì)在日常實(shí)踐中碰到的比較常用的,如果你對功能有新的需求或者建議,

        歡迎給我們提Issue,如果喜歡miment,

        請?jiān)谖业膅ithub上給我一個star,你的star就是我最大的動力了,謝謝!

        聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        超輕量級的js時間庫miment使用解析

        超輕量級的js時間庫miment使用解析:介紹 Miment 是一個輕量級的時間庫(打包壓縮后只有1K),沒有太多的方法, Miment的設(shè)計(jì)理念就是讓你以幾乎為零的成本快速上手,無需一遍一遍的擼文檔 由來 首先 致敬一下Moment,非常好用的一個時間庫,我本身也是Moment重度使用者,用習(xí)慣了Mome
        推薦度:
        標(biāo)簽: 使用 js 解析
        • 熱門焦點(diǎn)

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 2022国内精品免费福利视频| 久久黄色免费网站| 免费看又黄又爽又猛的视频软件| 黄网站色视频免费在线观看的a站最新| 亚洲免费网站观看视频| 国产偷国产偷亚洲清高动态图| 亚洲色图.com| 国产精品成人免费观看| 亚洲国产精品无码久久青草| 亚洲国产精品综合久久2007| aaa毛片视频免费观看| 最近的免费中文字幕视频 | 日韩视频免费在线| 91亚洲国产成人久久精品网站| 日韩视频免费在线观看| 亚洲精品在线观看视频| 亚洲日韩在线观看免费视频| 中文字幕在线亚洲精品| 久久亚洲免费视频| 亚洲国产福利精品一区二区| 男人的天堂网免费网站| 亚洲美女中文字幕| 好先生在线观看免费播放| 亚洲精品韩国美女在线| 久久福利青草精品资源站免费| 亚洲AV无码专区国产乱码电影| 一级毛片免费在线观看网站| 免费高清在线爱做视频| 亚洲国产成+人+综合| 午夜毛片不卡免费观看视频| 亚洲区精品久久一区二区三区| 国产免费av片在线看| 国产精品亚洲精品日韩动图 | 毛片在线播放免费观看| 亚洲精品综合久久中文字幕| 最近中文字幕无吗高清免费视频| 男男gvh肉在线观看免费| 国产亚洲一区二区三区在线观看| jizz日本免费| 亚洲最大免费视频网| 成人亚洲综合天堂|