Tham quan nhanh về date-fns, Thư viện ngày JavaScript đơn giản
Làm việc với ngày tháng trong JavaScript không dễ dàng. Đó là lý do tại sao nếu bạn nhìn vào các file package.json của hầu hết các ứng dụng, bạn thường sẽ tìm thấy một thư viện như Moment.js trong đó.
Moment.js là một trong những thư viện đầu tiên nổi tiếng. Nó làm cho việc phân tích cú pháp / định dạng / tính toán ngày tháng bớt khó khăn hơn cho các nhà phát triển.
Nhưng bạn có biết về một thư viện có tên là date-fns không?
date-fns thường được coi là một sự thay thế xứng đáng cho Moment.js . Không chỉ bởi vì nó cung cấp cùng một bộ tính năng mà còn hấp dẫn các lập trình viên chức năng.
Cài đặt date-fns
Bạn có thể cài đặt date-fns với npm / Yarn:
# Using npm $ npm install date-fns # Or using yarn $ yarn add date-fns Định dạng ngày
Định dạng ngày là bánh mì và bơ của các thư viện như Moment.js / date-fns. Điều này là do JavaScript root không có cách đơn giản để xử lý điều này.
date-fns sử dụng các mẫu chuỗi tương tự như Moment.js:
const format = require('date-fns/format'); const stPattysDay = new Date('2020/03/17'); const formattedDate1 = format(stPattysDay, 'MM/dd/yyyy'); const formattedDate2 = format(stPattysDay, 'MMMM dd, yyyy'); console.log(formattedDate1); // => "03/17/2020" console.log(formattedDate2); // => "March 17, 2020" Nó đơn giản mà! Có rất nhiều cách để định dạng ngày tháng để chúng trông chính xác theo cách bạn muốn.
Thêm / trừ ngày
Bây giờ ta có thể định dạng ngày tháng, còn việc thực hiện cộng / trừ với chúng thì sao? Có một số chức năng để thực hiện việc này:
Trong ví dụ dưới đây, ta thêm 1 năm vào một ngày cụ thể:
const format = require('date-fns/format'); const addYears = require('date-fns/addYears'); const stPattysDay = new Date('2020/03/17'); const stPattysDayNextYear = addYears(stPattysDay, 1); const formattedDate = format(stPattysDayNextYear, 'MMMM dd, yyyy'); console.log(formattedDate); // => "March 17, 2021" Sử dụng ngôn ngữ
Định dạng khá dễ dàng, nhưng còn ngôn ngữ thì sao? Ta biết rằng user sẽ truy cập trang web từ khắp nơi trên thế giới và ta không muốn cho rằng họ nói ngôn ngữ mẹ đẻ của ta .
Đối với điều này, ta có thể nhập các plugin ngôn ngữ cụ thể:
const format = require('date-fns/format'); const russianLocale = require('date-fns/locale/ru'); const stPattysDay = new Date('2020/03/17'); const formattedDate = format(stPattysDay, 'MMMM dd, yyyy', { locale: russianLocale }); console.log(formattedDate); // => "марта 17, 2020" Sự khác biệt giữa 2 ngày
Khả năng tính toán sự khác biệt giữa 2 ngày là rất quan trọng đối với một thư viện thao tác ngày. date-fns cung cấp một số hàm để tính toán điều này.
Ví dụ: ta có thể tính toán các ngày từ ngày 1 tháng 1 đến lễ Giáng sinh (cũng như "ngày làm việc"!):
const format = require('date-fns/format'); const addYears = require('date-fns/addYears'); const differenceInDays = require('date-fns/differenceInDays'); const differenceInBusinessDays = require('date-fns/differenceInBusinessDays') const startDate = new Date('2020/01/01'); const endDate = new Date('2020/12/24'); const daysBetween = differenceInDays(endDate, startDate); const workdaysBetween = differenceInBusinessDays(endDate, startDate); console.log(daysBetween); // => 358 console.log(workdaysBetween); // => 256 🎁 Tiền thưởng! date-fns có Dấu chân nhỏ 🎁
Một trong những nhược điểm lớn nhất khi sử dụng Moment.js là nó quá lớn! Không có cách nào để nhập các hàm riêng lẻ vì API của nó chỉ cho phép chuỗi. Điều này nghĩa là bạn phải nhập toàn bộ thư viện:
const moment = require('moment'); const formattedDate = moment(new Date()).format('MM/DD/YYYY'); console.log(formattedDate); // => "03/17/2020" Với date-fns, bạn chỉ lấy các chức năng cụ thể mà bạn cần (rất giống với Lodash):
const format = require('date-fns/format'); const formattedDate = format(new Date(), 'MM/dd/yyyy'); console.log(formattedDate); // => "03/17/2020" Điều này làm cho date-fns trở thành một phần phụ thuộc nhỏ hơn nhiều so với Moment.js. Xem hình bên dưới để biết kích thước gói của Moment.js và date-fns:
Nguồn: BundlePhobia
Lưu ý có một cách để cấu hình webpack để loại trừ các plugin "ngôn ngữ". Điều này sẽ làm giảm đáng kể kích thước gói của nó.
Kết luận
date-fns có vẻ đang được phát triển nhiều hơn Moment.js vào lúc này 😉. Vì lý do này, nó thực sự được bảo trì tốt và các nhà phát triển nhận được nhiều ý kiến đóng góp hơn vào hướng đi của nó. Cùng với bộ tính năng mạnh mẽ và sự nhạy bén của ES6 hiện đại, rất đáng để thử! 📅📌
Tài liệu chính thức về date-fns thực sự tuyệt vời và có rất nhiều mẫu mã!
Các tin liên quan
Phương thức getOwnPropertyDescriptors trong JavaScript2020-03-12
Cây tìm kiếm nhị phân thông qua JavaScript
2020-03-03
Tree Traversal qua JavaScript
2020-03-02
Hiểu về Trình tạo trong JavaScript
2020-02-28
Triển khai Thành phần Tab từ Scratch trong Vanilla JavaScript
2020-02-24
Khám phá cây qua JavaScript
2020-02-23
Giới thiệu về danh sách được liên kết qua JavaScript - Phần 2: Triển khai
2020-02-23
Khám phá các và hàng đợi qua JavaScript
2020-02-23
Câu hỏi phỏng vấn JavaScript: Gotchas phổ biến
2020-02-21
Giới thiệu về danh sách được liên kết qua JavaScript - Phần 1: Tổng quan
2020-02-21
