Luxon 初步介紹(Moment 團隊日期另一個類庫)

stormzhang 發布于2019-08-26 11:46 / 1989人閱讀

摘要：我不是的深度用戶只是日常會遇到一些時間格式化的需求之前用的都是不過對的感到有些不舒服同事介紹過里邊用不可變數據的風格設計的所以就試試上星星很多請放心食用是項目的某個維護者開發的按照他個人想法進行了改進除了不可變性使用的工具做了更新也嘗試到時

我不是 Moment 的深度用戶, 只是日常會遇到一些時間格式化的需求,
之前用的都是 Moment, 不過對 Moment 的 mutable API 感到有些不舒服,
同事介紹過 Luxon, 里邊用不可變數據的風格設計的 API, 所以就試試.
GitHub 上星星很多, 請放心食用 https://github.com/moment/luxon

Luxon 是 Moment 項目的某個維護者開發的, 按照他個人想法進行了改進,
除了不可變性, 使用的工具做了更新, 也嘗試到時區做了更好的一些調整,
具體要看作者原文說明了 https://moment.github.io/luxo...

Luxon 和 Moment 的區別

文檔有詳細描述 https://moment.github.io/luxo...
最明顯的一個例子, 就是不可變性(Immutability), 比如在 Moment 當中修改時間:

var m1 = moment();
var m2 = m1.add(1, "hours");
m1.valueOf() === m2.valueOf(); //=> true

原來的對象是會被修改的. 但是在 Luxon 當中舊的對象會保持不變:

var d1 = DateTime.local();
var d2 = d1.plus({ hours: 1 });
d1.valueOf() === d2.valueOf(); //=> false

這樣, 基于舊的時間推移計算出新的時間的時候, 不用擔心舊的數據被意外修改了.

在 API 風格上也有不小的調整. 比如例子當中就是 DateTime 這個對象了,
總體感覺 Luxon 命名相對啰嗦一點, 可能是為了更準確吧.

可能覺得好的一點就是比如讀取 m.year 用了 Getter 接口, 這個更簡單一點.
在上面的鏈接當中有詳細的描述 https://moment.github.io/luxo...

另外專門看了下代碼體積, 看上去是更大了. 反正兩個都挺大的...
https://cdnjs.cloudflare.com/...
https://moment.github.io/luxo...

引用代碼

Luxon 當中主要從 DateTime 開始調用, 根據平臺不同寫法不一樣,
主要還是用 ES6 的語法引用 DateTime 對象吧:

var DateTime = luxon.DateTime;
const { DateTime } = require("luxon");

import { DateTime } from "luxon";

如果是在 ClojureScript 當中, 借助 shadow-cljs, 可以這樣寫:

(ns app (:require ["luxon" :refer [DateTime]]))

(.log js/console (.local DateTime))

創建日期的對象

Luxon 當中需要區分開很多的寫法, 針對不用的格式:

DateTime.local() // 類似 Date.now()
DateTime.fromISO(String)
DateTime.fromObject(Object) // fromJSDate(date: Date, options: Object): DateTime
DateTime.fromMillis(Number)
DateTime.fromJSDate(Date)

實際調用的結果比如:

coffee> DateTime.local()
DateTime {
  ts: 2018-02-21T14:44:35.186+08:00,
  zone: Asia/Shanghai,
  locale: en-US }

coffee> date = new Date
2018-02-21T06:45:13.151Z

coffee> DateTime.fromJSDate(date)
DateTime {
  ts: 2018-02-21T14:45:13.151+08:00,
  zone: Asia/Shanghai,
  locale: en-US }

coffee> str = date.toISOString()
"2018-02-21T06:45:13.151Z"

coffee> DateTime.fromISO str
DateTime {
  ts: 2018-02-21T14:45:13.151+08:00,
  zone: Asia/Shanghai,
  locale: en-US }

再具體一些的用法, 可以去翻 API 文檔:
https://moment.github.io/luxo...

格式化日期

內置格式沒有怎么研究, 需要看上去業務不大用到, 提供格式盡管不少,

dt.toISO();         //=> "2017-04-20T11:32:00.000-04:00"

日期的格式化通過 dt.toFormat 方法來完成, 類似 m.format,
細節有些小的區別, 但是參考著文檔來寫吧:
https://moment.github.io/luxo...

DateTime.local().toFormat("HH "hours and" mm "minutes"") //=> "20 hours and 55 minutes"

日期的操作

請參考文檔 https://moment.github.io/luxo...

DateTime.local(2017, 2, 13).plus({ months: 1 }).toISODate() //=> "2017-03-13"
d1 < d2 // is d1 before d2?
d1.hasSame(d2, "milllisecond"); // equivalent to `+d1 === +d2`
d1.hasSame(d2, "minute");       // both DateTimes are in the same minute (and hour, day, month, etc)
d1.hasSame(d2, "year");         // etc

Luxon 里有專門關于 Duration 的計算, 不大熟悉, 我就直接抄幾個例子過一下了...
https://moment.github.io/luxo...

var dur = Duration.fromObject({ days: 3, hours: 6})
dur.as("minutes")       //=> 4680

var end = DateTime.fromISO("2017-03-13");
var start = DateTime.fromISO("2017-02-13");

var diffInMonths = end.diff(start, "months");
diffInMonths.toObject(); //=> { months: 1 }

其他

我能想到還有的一個功能是多語言, 因為 Moment 里就容易用到.
翻了文檔沒有翻到, 只有一些通過操作系統 API 處理多語言的描述, 不了解...
https://moment.github.io/luxo...

關于時區, Luxon 當中直接有支持, 看上去內容挺多, 然而不了解...
https://moment.github.io/luxo...

GPU云服務器云服務器日期處理類庫 html介紹團隊團隊介紹html5 html5 團隊介紹

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107543.html

前端每周清單第 40 期: JS 的 Core 與 Cost，Node 內存溢出調試，Softwar

摘要：已被所有主流瀏覽器支持在過去幾周蘋果的瀏覽器與微軟的瀏覽器分別發布新版本，支持了，再加上早已支持的和，已得到所有主流瀏覽器支持。 showImg(https://segmentfault.com/img/remote/1460000012086220?w=1240&h=823); 前端每周清單第 40 期: JS 的 Core 與 Cost，Node 內存溢出調試，Software 2...

番茄西紅柿 2019-08-21 17:43 評論0 收藏0
時間處理工具 moment.js：管理時間和日期，so easy！

摘要：大家在項目中一定會遇到很多關于時間處理的問題，比如你想獲取一個本地時間格式為，常用的方法是先拿到時間再用正則替換什么的。大家在項目中一定會遇到很多關于時間處理的問題，比如你想獲取一個本地時間格式為YYYY-MM-DD，常用的方法是先拿到時間再用正則替換什么的。比較麻煩，也比較費勁。每次都要弄。所以呢就想著有沒有什么簡單的方法，之后就發現了一個輕量級的Javascript日期處理類庫：...

lei___ 2019-08-21 10:35 評論0 收藏0
前端常用插件、工具類庫匯總（上）

摘要：函數庫動畫庫動畫庫，也是目前最通用的動畫庫。下拉框級聯選擇器移動端最好用的的篩選器組件聯動篩選移動端最好用的的篩選器組件聯動篩選顏色選擇器時間選擇器時間日期處理是一個解析，驗證，操作和顯示日期和時間的類庫。 showImg(https://segmentfault.com/img/bVbjpHt?w=900&h=383); 前言在開發中，我們經常會將一些常用的代碼塊、功能塊進行封裝，...

txgcwm 2019-08-23 13:06 評論0 收藏0
moment日期處理庫

摘要：日期處理類庫文檔前天在實現日期選擇器引用日期處理庫，覺得有必要將常用的方法記錄下來，特此一記。首發一文取值獲取年月日時分秒獲取星期天周操作一天后一周后一月后一年后一天前一周前一月前一年前 Javascript 日期處理類庫 (moment.js) moment文檔: http://momentjs.cn/ 前天在實現日期選擇器引用moment日期處理庫，覺得有必要將常用的方法記錄下來，...

andong777 2019-08-23 12:34 評論0 收藏0
前端那些小眾而又精美的網站及工具

摘要：寫此文的目的是為了總結在開發中能增加我們開發速度及能給我們帶來方便的工具與網站及一些小眾框架只限于簡介不負責教程如有相應的教程希望大家自薦或推薦我在這里感激不盡讓我們發現美并記錄它第一次寫文章請多多包涵如有我沒有寫到的但又是一些好用的工具及寫此文的目的是為了總結在開發中能增加我們開發速度及能給我們帶來方便的工具與網站及一些小眾框架只限于簡介不負責教程如有相應的教程希望大家自薦或推薦我...

Edison 2019-08-02 16:02 評論0 收藏0