Geekly articles weekly

Luxon - eine neue Bibliothek für die Arbeit mit Daten aus dem Moment.js-Team



Es scheint, warum brauchen wir eine andere Bibliothek, um mit Datums- und Uhrzeitangaben zu arbeiten, wenn es eine bekannte Moment-Bibliothek gibt ?! Umso interessanter ist, dass die Alternative vom Moment-Team selbst vorgeschlagen wurde.

Die Luxon- Bibliothek gilt als leistungsstarkes, modernes und praktisches Tool für die Arbeit mit Datums- und Uhrzeitangaben in JavaScript. Die Bibliothek wurde von Isaac Cambron erstellt, der seit 2013 Mitglied des Moment-Entwicklungsteams ist.

Der Autor hatte viele Ideen für die Entwicklung von Moment, die er im Rahmen des vorhandenen Codes nicht machen konnte. Hier sind die wichtigsten Punkte, die ich implementieren wollte:

  • Probieren Sie einige Ideen aus, wie Sie die API logischer gestalten können (diese Ideen waren jedoch nicht mit dem von Moment verfolgten Ansatz kompatibel).
  • Implementieren Sie "out of the box" Arbeiten mit Zeitzonen ohne zusätzliche Erweiterungen.
  • Überdenken Sie die Arbeit mit der Internationalisierung unter Berücksichtigung des Aufkommens der Intl-API vollständig.
  • Wechseln Sie bei der Erstellung von JS-Code zu einer Reihe moderner Tools und Ansätze.

Deshalb beschloss er, alles von Grund auf neu zu schreiben, was ungefähr zwei Jahre dauerte.
Das Ergebnis ist eine Art modernisierte Version von Moment.
Die resultierende Version schien für das gesamte Moment-Entwicklungsteam interessant zu sein, daher wurde beschlossen, die neue Bibliothek unter der Schirmherrschaft des Teams zu bewerben.

Luxon-Prinzipien


  1. Anrufketten wie im Moment.
  2. Alle Typen sind unveränderlich.
  3. Klarere und offensichtlichere API: für verschiedene Objekte - verschiedene Methoden mit klar definierten Parametern.
  4. Intl-API für die Internationalisierung (Rollback auf die englische Version, wenn der Browser die Intl-API nicht unterstützt).
  5. Intl API für die Arbeit mit Zeitzonen.
  6. Vollständigere Unterstützung für die Berechnung der Dauer.
  7. Native Intervallunterstützung.
  8. Inline-Code-Dokumentation.

Diese Prinzipien haben zu folgenden Verbesserungen geführt:

  • Luxon-Code ist viel einfacher zu verstehen und zu debuggen.
  • Die Verwendung der integrierten Browserfunktionen für die Internationalisierung verbessert das Bibliotheksverhalten und erleichtert das Debuggen.
  • Die Zeitzonenunterstützung ist besser implementiert als in jeder anderen JS-Bibliothek.
  • Luxon bietet sowohl ein einfaches als auch ein sehr leistungsfähiges Werkzeug für die Arbeit mit der Dauer.
  • Die Bibliothek verfügt über eine gute Dokumentation.

Aber Luxon hat seine Nachteile:

  • Die Betonung der Verwendung der integrierten Funktionen des Browsers führt zu Schwierigkeiten bei der Unterstützung älterer Browser.
  • Einige Internationalisierungsfunktionen, die noch nicht von Browsern unterstützt werden, sind ebenfalls nicht in der Bibliothek implementiert (Sie sollten erwarten, dass diese Unterstützung in Browsern angezeigt wird).
  • Die Implementierung der Intl-API in verschiedenen Browsern kann variieren, und das Verhalten von Luxon wird ebenfalls variieren.

Installation


Luxon bietet Module für alle modernen JavaScript-Plattformen.

Die Dokumentation enthält eine vollständige Liste der unterstützten Browser mit Anwendungsbeschränkungen. Für Browser ohne oder mit eingeschränkter Intl-Unterstützung wird die Verwendung einer Polydatei empfohlen (dies gilt insbesondere für IE 10 oder 11).

Wenn Sie mit Node.js (6+) arbeiten und mit Gebietsschemas arbeiten müssen, müssen Sie zusätzlich das Full-ICU- Paket installieren und die Umgebungsvariable festlegen, um die Verwendung dieses Pakets zu ermöglichen.

Die Standardinstallationsmethode von npm:
npm installieren - Luxus sparen

Luxon unterstützt sowohl TypeScript als auch Flow. Es gibt auch ein Modul im ES6-Format.

Schnelle Überprüfung


Die Luxon-Bibliothek besteht aus fünf Hauptklassen:

DateTime - Datum und Uhrzeit mit Zeitzonen- und Anzeigeeinstellungen sowie zugehörigen Methoden.
Dauer - ein Zeitraum (Dauer), z. B. „2 Monate“ oder „1 Tag, 3 Stunden“.
Infostatische Methoden zum Abrufen allgemeiner Daten zu Uhrzeit und Datum.
Intervall - Zeitintervall und Methoden für die Arbeit damit.
Einstellungen sind statische Methoden, die das allgemeine Verhalten von Luxon definieren.

import {DateTime, Duration, Info, Interval, Settings} from 'luxon';

Deine erste datetime


Die wichtigste Klasse in Luxon ist DateTime. DateTime repräsentiert Datum + Uhrzeit zusammen mit Zeitzone und Gebietsschema. So können Sie den 15. Mai 2017 um 08:30 Uhr in der lokalen Zeitzone einstellen:

 var dt = DateTime.local(2017, 5, 15, 8, 30);

Hier ist der Aufruf zur Ermittlung der aktuellen Uhrzeit:

 var now = DateTime.local();

Aus Objekt erstellen


 DateTime.fromObject({ month:12, day: 22, hour: 12, minutes: 20, zone: 'Europe/Kaliningrad' }); //=> 2018-12-22T12:20:00.000+02:00

Erstellen Sie aus einer Zeichenfolge im ISO 8601-Format


 DateTime.fromISO("2017-05-15"); //=> May 15, 2017 at 0:00 DateTime.fromISO("2017-05-15T08:30:00"); //=> May 15, 2017 at 8:30

Bei der Konvertierung in eine Zeichenfolge gibt Luxon auch eine Zeichenfolge im ISO 8601-Format zurück:

 DateTime.local().toString(); //=> "2018-12-18T20:58:29.995+03:00"

Einzelne Komponenten erhalten:


 var dt = DateTime.local(); dt.year; //=> 2018 dt.month; //=> 12 dt.day; //=> 18 dt.second; //=> 27 dt.weekday; //=> 2 dt.zoneName; //=> "Europe/Moscow" dt.offset; //=> 180 dt.daysInMonth; //=> 31

Formatierte Ausgabe


Luxon verfügt über viele Methoden zum Konvertieren von DateTime in eine Zeichenfolge. Zwei davon sind für LocalString und toISO am wichtigsten. Die erste konvertiert unter Berücksichtigung des Browserlacks in ein Format und die zweite bereitet Text für die programmatische Verarbeitung vor (z. B. für die Übertragung auf einen Server):

 dt.toLocaleString(); //=> "18.12.2018" dt.toLocaleString(DateTime.DATETIME_MED); //=> "18 . 2018 ., 21:46" dt.toISO(); //=> "2018-12-18T21:46:55.013+03:00"

Luxon verfügt über zwei Dutzend vorgefertigte „Voreinstellungen“ für die formatierte Ausgabe (z. B. DATETIME_MED und TIME_WITH_LONG_OFFSET).

Sie können auch Ihre eigene Formatierungsoption basierend auf Token erstellen:

 dt.setLocale('ru').toFormat('d MMMM tt - ZZZZZ'); //=> "18  21:46:55 - ,  "

DateTime-Konvertierungen


Wichtiger Hinweis: Luxon-Objekte sind unveränderlich, d. H. Alle auf sie angewendeten Änderungsmethoden geben die geänderte Kopie zurück, ohne das ursprüngliche Objekt zu ändern. Daher sollten alle Begriffe in diesem Artikel (wie in der Luxon-Dokumentation) wie "Ändern", "Installieren", "Neu definieren" als "Neue Instanz mit anderen Eigenschaften erstellen" verstanden werden.

Mathematische Transformationen


 var dt = DateTime.local(2018, 12, 18, 20, 30); //=> "18.12.2018, 20:30" dt.plus({hours: 3, minutes: 2}); //=> "18.12.2018, 23:32" dt.minus({days: 7}); //=> "11.12.2018, 20:30" dt.startOf('day'); //=> "18.12.2018, 0:00" dt.endOf('hour'); //=> "18.12.2018, 20:00"

Einzelne Parameter überschreiben


 var dt = DateTime.local(); dt.set({hour: 3}).hour //=> 3

Intl Conversions


Luxon unterstützt mehrere verschiedene Intl-Transformationen. Eine der wichtigsten ist die Formatierung für verschiedene Gebietsschemas:

 var dt = DateTime.local(); var f = {month: 'long', day: 'numeric'}; dt.setLocale('fr').toLocaleString(f); //=> "18 décembre" dt.setLocale('en-GB').toLocaleString(f); //=> "18 December" dt.setLocale('en-US').toLocaleString(f); //=> "December 18"

Die Info-Klasse kann Listen von Monaten und Wochentagen in einem bestimmten Gebietsschema zurückgeben:

 Info.months('long', {locale: 'it'}); //=> ["gennaio", "febbraio", "marzo", ...] Info.weekdays ('short', {locale: 'de'}); //=> ["Mo", "Di", "Mi", ...]

Zeitzonen


Luxon unterstützt Zeitzonen. Wenn Sie eine DateTime erstellen, ohne explizit eine Zeitzone anzugeben, wird standardmäßig die lokale Zone ausgewählt. Wenn Sie die Zone für eine vorhandene DateTime ändern, werden Uhrzeit und Datum unter Berücksichtigung der Differenz zwischen den Zeitzonen neu berechnet.

 var dt = DateTime.local(2018, 12, 18, 20, 00); //=> 2018-12-18T20:00:00.000+03:00 dt.zone.name; //=> "Europe/Moscow" dt.setZone('Asia/Vladivostok'); //=> 2018-12-19T03:00:00.000+10:00

Luxon unterstützt auch das Arbeiten mit Datum und Uhrzeit im UTC-Format:

 DateTime.utc(2018, 5, 15); //=> 2018-05-15T00:00:00.000Z DateTime.utc(); //=> 2018-12-18T17:58:29.995Z DateTime.local().toUTC(); //=> 2018-12-18T17:58:29.995Z DateTime.utc().toLocal(); //=> 2018-12-18T20:58:29.995+03:00

Dauer


Die Dauer-Klasse bietet die Möglichkeit, mit einer Dauer von beispielsweise „2 Stunden und 7 Minuten“ zu arbeiten. Sie können eine Dauer wie folgt erstellen:

 var dur = Duration.fromObject({hours: 2, minutes: 7});

Dauern können addiert und subtrahiert werden. Die Dauer kann einen negativen Wert haben.

 dur.minus(dur).minus(dur); //=> {hours: -2, minutes: -7}

Ebenso kann die Dauer von DateTime addiert oder subtrahiert werden.

 DateTime.local().plus(dur);

Dauer hat Getter (ähnlich wie DateTime Getter):

 dur.hours; //=> 2 dur.minutes; //=> 7 dur.seconds; //=> 0 dur.zone; //=> undefined

Die Dauer hat auch andere nützliche Methoden:

 dur.as('seconds'); //=> 7620 dur.toObject(); //=> { hours: 2, minutes: 7 } dur.toISO(); //=> 'PT2H7M'

Intervalle


Intervalle sind definiert als der Zeitraum zwischen zwei Zeitpunkten, mit dem die Intervallklasse gearbeitet wird. Die Startzeit ist im Intervall enthalten, die Endzeit jedoch nicht: Dementsprechend ist der Anfang beim Konvertieren in eine Zeichenfolge mit einer eckigen Klammer und das Ende mit einer runden Klammer gekennzeichnet.

 var today = DateTime.local(2018, 12, 18); var later = DateTime.local(2020, 10, 12); var interval = Interval.fromDateTimes(today, later); interval.toString(); //=> "[2018-12-18T00:00:00.000+03:00 – 2020-10-12T00:00:00.000+03:00)" interval.toISO(); //=> "2018-12-18T00:00:00.000+03:00/2020-10-12T00:00:00.000+03:00" interval.length(); //=> 57369600000 interval.length('years', true); //=> 1.8169398907103824 interval.contains(DateTime.local(2019)); //=> true

Intervalle können miteinander verglichen und miteinander kombiniert werden:

 var nextYear = Interval.after(DateTime.local(), {year: 1}); var prevYear = Interval.before(DateTime.local(), {year: 1}); prevYear.overlaps(nextYear); //false prevYear.abutsStart(nextYear); //true nextYear.union(prevYear).length('years'); //=> 2

Luxon und Moment


Die Luxon-Bibliothek "lebt" im "Moment" -Projekt, ist jedoch kein vollständiger Ersatz für die Moment-Bibliothek. Luxon bietet nicht die volle Funktionalität von Moment. Beispielsweise wurde die Formatierung des relativen Datums erst kürzlich in der Chrome-Browserversion 71 implementiert, funktioniert noch nicht in anderen Browsern und die Unterstützung dafür wurde in Luxon noch nicht implementiert (obwohl dies erwartet wird). Aber selbst wenn Browser die erforderlichen Funktionen unterstützen, müssen Sie verstehen, dass sie nur in diesen neuen Umgebungen verfügbar sind. In älteren Browsern arbeitet Luxon mit Problemen, während Moment jederzeit und überall funktioniert.

Darüber hinaus wurde die Luxon-API komplett neu gestaltet und unterscheidet sich grundlegend von der Moment-API.

Beachten Sie die Hauptunterschiede zwischen Moment und Luxon.

Immunität


Luxon-Objekte sind unveränderlich, Moment jedoch nicht.
Im folgenden Beispiel sind m1 und m2 dasselbe Objekt, das durch die add-Methode geändert wurde.

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

Im Fall von Luxon gibt die Plus-Methode ein neues d2-Objekt zurück, ohne das ursprüngliche d1 zu ändern.

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

Aus diesem Grund benötigt Luxon keine speziellen Kopierkonstruktoren oder Klonierungsmethoden, mit denen Moment Kopien erhält, ohne den ursprünglichen Wert zu ändern.

Wichtige funktionale Unterschiede


  1. Der Countdown der Monate in Luxon beginnt bei 1 und nicht bei Null wie in Moment (und nativ im Date js-Objekt).
  2. Lokalisierungs- und Zeitzonen werden mithilfe der nativen Intl-API (oder Polyphile) implementiert und nicht in die Bibliothek integriert.
  3. Luxon verfügt über integrierte Typen für Dauer und Intervall.
  4. Luxon unterstützt die relative Datumsformatierung noch nicht.
  5. Luxon hat auch keine Humanisierungsmethode zur Darstellung der Dauer in einem „humanisierten“ Stil (z. B. „einige Sekunden“).

Unterschiede im API-Stil


  • Bei Luxon-API-Methoden befinden sich die optionalen Parameter normalerweise zuletzt.
  • Luxon verfügt im Gegensatz zu Moment, das eine Funktion dafür hat, über viele separate Methoden zum Erstellen von Objekten (z. B. fromISO), und der Typ des Objekts wird durch Parameter festgelegt.
  • Luxon hat sehr strenge Parser, während Moment liberalere hat, d.h. Wenn sich das Format der Eingabezeichenfolge vom Standard unterscheidet, gibt Luxon sofort einen Fehler aus, und Moment versucht, einige Fehler im Format zu korrigieren.
  • Luxon verwendet Getter (dt.year, dt.isValid), um den Wert interner Felder abzurufen, und keine Methoden wie Moment (m.year (), m.isValid ()).
  • Mit Luxon kann eine Methode sofort alle erforderlichen Parameter dt.set ({Jahr: 2016, Monat: 4}) festlegen. Im Moment werden sie jeweils nur einzeln festgelegt - eine Aufrufkette m.year (2016) .month (4).
  • Duration in Luxon ist eine separate Duration-Klasse der obersten Ebene.

Ansonsten hat Luxon viele Ideen von Moment übernommen, die Dokumentation enthält sogar Tabellen zur Äquivalenz der Moment- und Luxon-Methoden.

Bibliotheksdateigrößen


Luxon (v. 1.8.2)
luxon.min.js - 61 KB

Moment (v. 2.23.0)
moment.min.js - 51 KB
moment.min.js + locale / ru.js - 59 KB
moment-with-locales.min.js - 323 KB

Wie Sie sehen können, ist die Größe ohne Moment-Gebietsschemas 10 KB kleiner als bei Luxon. Durch Hinzufügen mehrerer Gebietsschemas wird die Größe jedoch ungefähr gleich.

Wenn für alle Gebietsschemas sofort Unterstützung erforderlich ist, bietet Luxon einen erheblichen Gewinn.

Zusammenfassung


Die Bibliothek ist vollständig einsatzbereit und der Autor verspricht seine Unterstützung. Die Bibliothek hat bereits 7k + Sterne auf dem Github und ihre Popularität wächst nur. Nicht nur die Autorin selbst macht die Commits in ihrem Code, sondern mindestens 6 weitere Entwickler.

Ich gehe davon aus, dass die Luxon-Bibliothek eine Reaktion auf das Auftreten der Intl-API-Unterstützung in Browsern ist. Momentan wissen Entwickler, dass sich die Arbeit mit Daten im Web erheblich ändern kann, und versuchen, sich auf diese Änderungen vorzubereiten. Sie können jedoch die Entwicklung des Webs und damit des neuen Projekts (das sie selbst als Moment Labs-Projekt bezeichnen) nicht genau vorhersagen. Werden Luxon-Ideen auf Moment 3 portiert? Werden die meisten Benutzer irgendwann von Moment zu Luxon wechseln? Vielleicht wird Luxon in Moment umbenannt? Die Entwickler selbst geben zu, dass sie diese Fragen jetzt nicht beantworten können.

Source: https://habr.com/ru/post/de433850/

More articles:


All Articles