Top 10 thư viện JavaScript bạn nên dùng qua ít nhất 1 lần

Top 10 thư viện JavaScript bạn nên dùng qua ít nhất 1 lần

Có các thư viện JavaScript cho hầu hết mọi thứ và hơn thế nữa đang được ra mắt hầu như mỗi ngày. Nhưng với rất nhiều thư viện JavaScript để lựa chọn, thật khó để theo dõi từng thư viện và làm thế nào để bạn có thể chọn được thư viện cho phù hợp với nhu cầu của bạn.

JavaScript là một trong những ngôn ngữ phổ biến nhất trên web. Mặc dù ban đầu nó chỉ được phát triển, lập trình cho các trang web, nhưng nó đã chứng kiến ​​sự phát triển theo cấp số nhân trong hai thập kỷ qua.

Giờ đây, JavaScript có khả năng làm hầu hết mọi thứ và hoạt động trên một số nền tảng và thiết bị bao gồm cả IoT. Và với sự ra mắt SpaceX Dragon gần đây, JavaScript thậm chí còn ở trong không gian.

Một trong những lý do cho sự phổ biến của nó là sự sẵn có của một số lượng lớn các frameworks và thư viện. Chúng giúp việc lập trình dễ dàng hơn nhiều so với việc lập trình Vanilla JS truyền thống.

Top 10 thư viện JavaScript bạn nên dùng qua ít nhất 1 lần

Trong bài viết này, chúng tôi sẽ thảo luận về 10 thư viện JavaScript phổ biến nhất mà bạn có thể sử dụng để xây dựng dự án tiếp theo của mình.

1. Leaflet

Top 10 thư viện JavaScript bạn nên dùng qua ít nhất 1 lần

Tôi thấy Leaflet là thư viện mã nguồn mở tốt nhất cho việc thêm bản đồ tương tác thân thiện với thiết bị di động vào ứng dụng của bạn.

Kích thước nhỏ của nó (39kB) làm cho nó trở thành một lựa chọn thay thế tuyệt vời để cân nhắc hơn so với các thư viện bản đồ khác. Với hiệu quả đa nền tảng và API được ghi chép đầy đủ, nó có mọi thứ bạn cần để khiến bạn yêu thích.

Dưới đây là một số code mẫu tạo một Leaflet map:

var map = new L.Map("map", {
    center: new L.LatLng(40.7401, -73.9891),
    zoom: 12,
    layers: new L.TileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png")
});Code language: JavaScript (javascript)

Trong Leaflet, bạn cần cung cấp một lớp xếp vì không có một lớp nào theo mặc định. Nhưng điều đó cũng có nghĩa là bạn có thể chọn từ một loạt các lớp từ miễn phí đến trả phí cao cấp hơn.

2. fullPage.js

Top 10 thư viện JavaScript bạn nên dùng qua ít nhất 1 lần

Thư viện mã nguồn mở này giúp bạn tạo các trang web cuộn toàn màn hình như bạn có thể thấy trong GIF ở trên. Nó dễ sử dụng và có nhiều tùy chọn để tùy chỉnh, vì vậy không có gì ngạc nhiên khi nó được hàng nghìn lập trình viên sử dụng và có hơn 30 nghìn sao trên GitHub.

Bạn thậm chí có thể sử dụng nó với các khuôn khổ phổ biến như:

  • react-fullpage
  • vue-fullpage
  • angular-fullpage

Tôi đã xem qua thư viện này khoảng một năm trước và kể từ đó nó đã trở thành một trong những mục yêu thích của tôi. Đây là một trong số ít thư viện mà bạn có thể sử dụng trong hầu hết mọi dự án của mình. Nếu bạn chưa bắt đầu sử dụng thì cứ thử đi, bạn sẽ không thất vọng đâu.

3. anime.js

Top 10 thư viện JavaScript bạn nên dùng qua ít nhất 1 lần


Một trong những thư viện hoạt hình tốt nhất hiện có, Anime.js rất linh hoạt và dễ sử dụng. Nó là công cụ hoàn hảo để giúp bạn thêm một số hoạt ảnh thực sự thú vị vào dự án của mình.

Anime.js hoạt động tốt với các thuộc tính CSS, SVG, DOM, và các JavaScript Objects và có thể dễ dàng tích hợp vào các ứng dụng của bạn.

Là một lập trình viên, điều quan trọng là phải có một danh mục đầu tư tốt. Ấn tượng đầu tiên mà mọi người có về danh mục đầu tư của bạn giúp quyết định xem họ có thuê bạn hay không. Và còn công cụ nào tốt hơn thư viện này để mang lại sức sống cho danh mục đầu tư của bạn. Nó sẽ không chỉ nâng cao trang web của bạn mà còn giúp thể hiện các kỹ năng thực tế.

4. Screenfull.js

Top 10 thư viện JavaScript bạn nên dùng qua ít nhất 1 lần

Tôi đã xem qua thư viện này khi đang tìm cách triển khai tính năng toàn màn hình trong dự án của mình.

Nếu bạn cũng muốn có tính năng toàn màn hình, tôi khuyên bạn nên sử dụng thư viện này thay vì Fullscreen API vì tính hiệu quả trên nhiều trình duyệt của nó (mặc dù nó được xây dựng trên nền tảng đó).

Nó nhỏ đến mức bạn thậm chí sẽ không nhận ra nó – chỉ khoảng 0,7kB được nén lại.

5. Moment.js

Top 10 thư viện JavaScript bạn nên dùng qua ít nhất 1 lần

Làm việc với ngày và giờ có thể là một khó khăn lớn, đặc biệt là với các lệnh gọi API, các múi giờ khác nhau, ngôn ngữ địa phương, v.v. Moment.js có thể giúp bạn giải quyết tất cả những vấn đề đó cho dù đó là thao tác, xác thực, phân tích cú pháp hay định dạng ngày hoặc giờ.

Có rất nhiều phương pháp thú vị thực sự hữu ích cho các dự án của bạn. 

Ví dụ: tôi đã sử dụng phương pháp .fromNow() này trong một trong những dự án blog của mình để hiển thị thời gian bài báo được xuất bản.

const moment = require('moment'); 

relativeTimeOfPost = moment([2019, 07, 13]).fromNow(); 
// a year ago
Code language: JavaScript (javascript)

Mặc dù tôi không sử dụng nó thường xuyên, nhưng tôi rất hâm mộ sự ủng hộ của nó đối với việc quốc tế hóa. 

Ví dụ, bạn có thể tùy chỉnh kết quả trên bằng phương pháp .locale() này.

// French
moment.locale('fr');
relativeTimeOfPostInFrench = moment([2019, 07, 13]).fromNow(); 
//il y a un an

// Spanish
moment.locale('es');
relativeTimeOfPostInSpanish = moment([2019, 07, 13]).fromNow(); 
//hace un añoCode language: JavaScript (javascript)

6. Hammer.js

Top 10 thư viện JavaScript bạn nên dùng qua ít nhất 1 lần

Hammer.js là một thư viện JavaScript nhẹ cho phép bạn thêm các cử chỉ đa chạm vào Ứng dụng web của mình.

Tôi muốn giới thiệu thư viện JavaScript này để thêm một số thú vị cho các thành phần của bạn. Đây là một ví dụ để bạn tập chơi khi rảnh rỗi. Chỉ cần chạy bút và nhấn hoặc nhấp vào div màu xám.

Nó có thể nhận dạng các cử chỉ được thực hiện bằng cách chạm, dùng chuột và pointerEvents. Đối với người dùng jQuery, tôi khuyên bạn nên sử dụng jQuery plugin.

$(element).hammer(options).bind("pan", myPanHandler);Code language: JavaScript (javascript)

7. Masonry

Top 10 thư viện JavaScript bạn nên dùng qua ít nhất 1 lần

Masonry là một thư viện bố cục lưới JavaScript. Nó thật tuyệt vời và tôi sử dụng nó cho nhiều dự án của mình. Nó có thể lấy các phần tử lưới đơn giản của bạn và đặt chúng dựa trên không gian thẳng đứng có sẵn, giống như cách các anh thợ xây đang đặt đá hoặc gạch để tạo thành một bức tường.

Bạn có thể sử dụng thư viện này để hiển thị các dự án của mình theo một cách khác. Sử dụng nó với thẻ, hình ảnh, phương thức, v.v.

Đây là một ví dụ đơn giản để cho bạn thấy điều kỳ diệu trong hành động. Chà, không chính xác là ma thuật, mà là cách bố cục thay đổi khi bạn phóng to trên trang web.

Top 10 thư viện JavaScript bạn nên dùng qua ít nhất 1 lần

Và đây là code cho phần trên:

var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
  itemSelector: '.grid-item',
  columnWidth: 400
});

var msnry = new Masonry( '.grid');Code language: JavaScript (javascript)

8. D3.js

Top 10 thư viện JavaScript bạn nên dùng qua ít nhất 1 lần

Nếu bạn là một lập trình viên mê dữ liệu thì thư viện này là dành cho bạn. Tôi vẫn chưa tìm thấy một thư viện thao tác dữ liệu hiệu quả và đẹp mắt như D3. Với hơn 92k sao trên GitHub, D3 là thư viện trực quan hóa dữ liệu yêu thích của nhiều lập trình viên hiện nay.

Gần đây tôi đã sử dụng D3 để trực quan hóa dữ liệu COVID-19 với React và Kho lưu trữ dữ liệu CSSE của Johns Hopkins trên GitHub . Đó là một dự án thực sự thú vị, và nếu bạn đang nghĩ đến việc làm điều gì đó tương tự, tôi khuyên bạn nên thử D3.js.

9. slick

Top 10 thư viện JavaScript bạn nên dùng qua ít nhất 1 lần

Slick hoàn toàn đáp ứng, hỗ trợ vuốt, vòng lặp vô hạn và hơn thế nữa. Như đã đề cập trên trang chủ, nó thực sự là băng chuyền cuối cùng mà bạn cần.

Tôi đã sử dụng thư viện này được một thời gian, và nó đã giúp tôi tiết kiệm rất nhiều thời gian. Chỉ với một vài dòng code, bạn có thể thêm rất nhiều tính năng vào băng chuyền của mình.

$('.autoplay').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
});Code language: JavaScript (javascript)

Popper.js

Top 10 thư viện JavaScript bạn nên dùng qua ít nhất 1 lần

Popper.js là một thư viện JavaScript nhẹ ~ 3 kB với không phụ thuộc hay cung cấp một công cụ định vị đáng tin cậy và có thể mở rộng mà bạn có thể sử dụng để đảm bảo tất cả các phần tử popper của bạn được định vị ở đúng vị trí.

Việc dành thời gian định cấu hình các phần tử popper có vẻ không quan trọng, nhưng những điều nhỏ nhặt này lại là thứ khiến bạn nổi bật với tư cách là một lập trình viên. Và với kích thước nhỏ như vậy nó không chiếm nhiều diện tích.

Kết luận

Là một lập trình viên, việc có và sử dụng các thư viện JavaScript phù hợp là rất quan trọng. Nó sẽ giúp bạn làm việc hiệu quả hơn và sẽ giúp cho việc lập trình trở nên dễ dàng và nhanh chóng hơn nhiều. Cuối cùng, tùy theo nhu cầu của bạn mà chọn thư viện nào.

Đây là 10 thư viện JavaScript mà bạn có thể thử và bắt đầu sử dụng trong các dự án của mình ngay hôm nay. Bạn sử dụng thư viện JavaScript thú vị nào khác? Bạn có muốn một bài báo khác như thế này không? Hãy bình luận ben dưới cho chúng tôi biết nhé!

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG

Bình luận