DateTime semble être un simple problème jusqu'à ce que vous réalisiez que vous stockez une valeur qui modifie son format d'affichage en fonction de la personne qui la regarde et de son emplacement. Nous passons en revue certaines options de la bibliothèque JavaScript qui peuvent aider et discutons s’il est judicieux de les utiliser.
DateTimes est intéressant dans toutes les langues. La plupart des variables contenant une valeur restent les mêmes, que vous les regardiez sur le serveur ou dans le navigateur Web, mais DateTimes sont relatives à l'endroit où vous vous trouvez dans le monde. Non seulement la valeur d'affichage change-t-elle en fonction de votre emplacement, mais sa présentation à l'utilisateur varie également. Bien que JavaScript offre de bonnes méthodes pour gérer DateTime, vous vous trouvez parfois en train de faire des vérifications compliquées, comme quel événement s'est produit en premier ou si vous affichez l'heure relative par rapport à l'heure locale. Une fois que vous commencez à travailler avec ces scénarios, vous commencez à chercher des solutions.
Nous allons voir quand vous devriez utiliser des méthodes natives et commencer à extraire des bibliothèques pour gérer certains des scénarios les plus complexes.
Natif Méthodes
Lorsque vous commencez à utiliser DateTimes, vous remarquerez que JavaScript dispose des fonctions de base nécessaires à certaines opérations simples, accessibles via new Date () . Le cas d'utilisation le plus élémentaire de DateTimes consiste à stocker la date et l'heure actuelles avec une action et à les afficher à l'utilisateur, comme la date de publication d'un blog. Vous pouvez accomplir cela avec des méthodes natives sans avoir à extraire des bibliothèques supplémentaires.
Il manque quelques fonctionnalités pour afficher les heures relatives ou le formatage personnalisé par paramètres régionaux. De plus, les fuseaux horaires ne sont pris en charge que si vous disposez d'un navigateur moderne prenant en charge l'API Intl. Une fois que vous avez commencé à rencontrer ces problèmes, vous avez deux options: construisez-le ou recherchez une bibliothèque qui le gère pour vous. Comme DateTimes est une tâche délicate, vous devez absolument commencer à chercher des bibliothèques qui comblent les lacunes.
En ce qui concerne le choix des bibliothèques, il existe actuellement quelques choix: Momentjs, Luxon et date-fns.
Moment + Moment.tz
Moment.js traite chaque cas d'utilisation possible pour les dates et les heures. et lorsqu'il est associé à Moment.timezone il peut gérer les fuseaux horaires. La bibliothèque existe depuis environ sept ans, donc s'il y a un problème lié au temps, il l'a résolu ou quelqu'un qui l'a résolu l'a posté sur Internet.
Lorsqu'il est associé à Moment.timezone, il inclut le sien. version de la base de données IANA Time Zone, ce qui signifie que, quelle que soit la version du navigateur, la liste déroulante peut gérer le fuseau horaire, le calcul de l'heure et la conversion, même dans les navigateurs les plus anciens. Cette combinaison de bibliothèques fait de Moment.js + Moment.timezone un excellent choix pour les applications Web nécessitant la prise en charge de navigateurs IE plus anciens.
Moment.js existe depuis assez longtemps pour rassembler son lot d'inconvénients. Une des sources les plus importantes de bugs de Moment.js est que les objets Moment sont mutables. Voir l'exemple ci-dessous pour plus de détails. Cela peut constituer une source facile de bogues.
Moment Mutable Quirk
// Common Bug
var currentTime = moment ();
var futureTime = currentTime.add (1, «heures»);
// currentTime et futureTime contiennent les mêmes informations
//Solution
var currentTime = moment ();
var futureTime = moment (heure courante) .add (1, ‘heures’); // crée un nouvel objet moment, puis le modifie
// currentTime et futureTime contiennent les différentes informations
Une autre chose à surveiller est la taille de Moment.js lors du regroupement ou de l'hébergement. Par défaut, il inclura tous les paramètres régionaux avec Moment.js, ce qui peut augmenter la taille du paquet si vous utilisez webpack, et inclure moment.timezone le rendra encore plus grand.
Malgré ces revers, Moment.js est un bon choix. bibliothèque complète et construite capable de résoudre tout problème lié à DateTime que vous rencontrez. Si vous pensez que vous devrez prendre en charge des navigateurs plus anciens, vous devez absolument utiliser Moment.js et n’ajouter que Moment.timezone lorsque vous commencez à effectuer des conversions de fuseau horaire côté navigateur.
Luxon
Luxon a une histoire d’origine intéressante avec une API assez intuitive. Luxon a commencé quand un des contributeurs à Moment.js a commencé à jouer avec des idées et des concepts qui ne pouvaient pas être facilement mis en œuvre dans la bibliothèque de Moment.js. Luxon est rapidement devenu une bibliothèque comparable à Moment.js, sans que personne ne sache vraiment où va l’avenir de l’une ou de l’autre des bibliothèques. En fait, Luxon vit avec le repo Moment.js, il n’ya donc pas de concurrence réelle, mais une façon différente de résoudre un problème similaire. En plus de résoudre un problème similaire, Luxon résout certains des inconvénients de Moment tout en résolvant les problèmes DateTime à leur manière et selon leur style.
L’un des atouts majeurs de Luxon est l’objet Immutable, comme vous pouvez le voir ci-dessous. Cela peut conduire à un comportement plus prévisible, ce qui est très utile pour l'affichage de DateTimes sur différents fuseaux horaires.
Objets immuables de Luxon
var currentTime = luxon.DateTime.local ();
var futureTime = currentTime.plus ({hours: 1});
// currentTime et futureTime contiennent des valeurs différentes
Luxon possède l'un des meilleurs supports de fuseau horaire pour toutes les bibliothèques temporelles en raison de l'API Intl fournie avec les navigateurs modernes.
L'utilisation de l'API Intl réduit la taille de l'ensemble de Luxon, car vous n'apportez pas votre propre heure IANA. base de données de zone avec chaque téléchargement. Avec leur objectif de taille de paquetage, ils ont conçu leur bibliothèque où arborescence à secouer ne vous permettra de grouper que les paramètres régionaux que vous utilisez avec les paramètres régionaux anglais par défaut.
L'API Intl indique que Luxon ne prend pas en charge les fuseaux horaires si vous travaillez dans un navigateur plus ancien. Son implémentation dans certaines zones varie en fonction de l'implémentation de l'API Intl dans ce navigateur particulier. Ils ont une matrice de ce qui est supporté, ce qui est utile. Pour la plupart des applications Web qui ciblent les nouveaux navigateurs et les nouveaux consommateurs, cela ne posera probablement pas de problème. Si vous prenez en charge des clients entreprises ayant des exigences de navigateur plus anciennes, vous pouvez rencontrer quelques problèmes.
Dans l’ensemble, Luxon est une excellente bibliothèque qui devrait être utilisée si vous faites un peu du travail DateTime en mettant l’accent sur les navigateurs modernes. Outre la prise en charge des fuseaux horaires, il inclut des paramètres régionaux pouvant être combinés. Vous ne devez donc inclure que ce dont vous avez besoin. Je pense que leur API est beaucoup plus intuitive et que le code est généralement plus lisible.
Date-fns
Moment.js et Luxon fonctionnent avec des objets centraux, ce qui permet de tout conserver dans une belle API OOP (Object Oriented Programming). , mais cela peut avoir des inconvénients au sein de JavaScript. date-fns adopte une approche différente de la bibliothèque DateTime. date-fns est une bibliothèque de fonctions qui fonctionnent avec l'objet natif Date en JavaScript.
var currentTime = new Date ();
var futureTime = addHours (currentTime, 2);
// currentTime et futureTime contiennent des valeurs différentes
Depuis date-fns utilise l'objet natif Date il permet à la bibliothèque d'être un groupe de fonctions, ce qui permet certaines améliorations concernant la taille et les performances du regroupement par rapport aux autres bibliothèques. en raison de la secousse des arbres. Un autre avantage intéressant est que les paramètres régionaux sont regroupés de la même manière que Luxon, ce qui vous permet d'importer uniquement les paramètres régionaux dont vous avez besoin à l'époque, l'anglais étant chargé par défaut.
Date-fns est en développement actif, avec certaines fonctionnalités intéressantes. venir avec V2 comme le support de fuseau horaire et les intervalles (calculs impliquant une date et heure de début et de fin). Leur V2 est encore au stade alpha, qui a connu plusieurs itérations, de sorte que leurs changements pourraient bientôt se stabiliser. Jusque-là, leur V1 manque de prise en charge des fuseaux horaires. De plus, date-fns supporte assez bien les paramètres régionaux, mais la liste ne cesse de s'allonger, mais elle n'est pas complète.
Dans son ensemble, l'approche par date-fns d'une véritable collection de fonctions est attrayante, en particulier si vous utilisez Webpack. Le manque de prise en charge des fuseaux horaires dans la V1 est un gros inconvénient et il vaut peut-être la peine de passer à leur V2 si vous commencez à utiliser la bibliothèque. Je peux même voir des scénarios où il serait idéal d'utiliser les assistants d'intervalle V2 de date-fns en combinaison avec une autre bibliothèque pour certains calculs de calendrier.
Conclusion
Dans l'ensemble, je pense que vous devriez vous en tenir à l'utilisation de l'outil natif . objet et ne vous inquiétez pas des bibliothèques DateTime tant que vous n’allez pas au-delà du cas d’utilisation simple qui consiste à stocker un DateTime avec une action. Une fois que vous avez dépassé ce point, vous avez plusieurs options, et le meilleur choix dépend de votre application Web ainsi que de certaines préférences de codage personnelles. Si vous avez besoin de supporter des navigateurs web plus anciens, alors Moment.js serait le choix évident. Si votre clientèle doit utiliser des navigateurs Web plus modernes, il s’agit d’un choix personnel entre Luxon et date-fns. Joyeux codage!
Ce blog a été créé pour vous par Kendo UI
Vous voulez en savoir plus sur la création de superbes applications Web? Tout commence avec Kendo UI – la bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il comprend tout ce dont vous avez besoin, des grilles et graphiques aux menus déroulants et jauges.
Source link