JavaScript là một trong những ngôn ngữ phổ biến nhất trên web. Mặc dù ban đầu nó được phát triển chỉ dành cho các trang web, nhưng nó đã chứng kiến sự tăng trưởng 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 lần 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 khung và thư viện. Chúng làm cho việc phát triển dễ dàng hơn nhiều so với phát triển Vanilla JS truyền thống.
Có các thư viện cho hầu hết mọi thứ và nhiều thứ khác đang ra mắt gần như mỗi ngày. Nhưng với rất nhiều thư viện để lựa chọn, việc theo dõi từng thư viện và cách nó có thể được điều chỉnh cụ thể theo nhu cầu của bạn trở nên khó khăn.
Trong bài viết này, chúng ta sẽ thảo luận về 10 thư viện JS 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.
Tôi nghĩ Tờ rơi là thư viện nguồn mở tốt nhất để 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 sự thay thế tuyệt vời để xem xét 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.
Đây là một số mã mẫu tạo bản đồ Tờ rơi:
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")
});Trong Tờ rơi, chúng tôi cần cung cấp một lớp ô xếp vì không có lớp này theo mặc định. Nhưng điều đó cũng có nghĩa là có thể chọn từ nhiều lớp miễn phí và cao cấp. Bạn có thể khám phá các lớp gạch miễn phí khác nhau tại đây.
Đọc Tài liệu hoặc làm theo Hướng dẫn để tìm hiểu thêm.
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 ảnh GIF ở trên. Nó rất 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 nhà phát triển sử dụng và có hơn 30 nghìn sao trên GitHub.
Đây là bản demo Codepen mà bạn có thể thử:
Bạn thậm chí có thể sử dụng nó với các khung phổ biến như:
Tôi tình cờ thấy 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. Nếu bạn chưa bắt đầu sử dụng thì hãy dùng thử, bạn sẽ không thất vọng.
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. Đây là công cụ hoàn hảo để giúp bạn thêm một số hình ảnh động 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, thuộc tính DOM và Đối tượng JavaScript và có thể dễ dàng tích hợp vào các ứng dụng của bạn.
Là một nhà phát triể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ế.
Hãy xem Codepen này để tìm hiểu thêm:
Bạn cũng có thể xem qua tất cả các dự án thú vị khác trên Codepen hoặc Đọc Tài liệu tại đây.
Tôi tình cờ thấy 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ó một 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ì API toàn màn hình 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 dựa trên tính nă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 bằng gzip.
Hãy thử Bản trình diễn hoặc đọc Tài liệu để tìm hiểu thêm.
Làm việc với ngày và giờ có thể là một vấ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ả các 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 tháng hoặc thời gian.
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 .fromNow() trong một trong các dự án blog của tôi để 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
Mặc dù tôi không sử dụng nó thường xuyên, nhưng tôi rất thích sự hỗ trợ quốc tế hóa của nó. Ví dụ: chúng ta có thể tùy chỉnh kết quả trên bằng cách sử dụng .locale() phương pháp.
// 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ño
Đọc Tài liệu tại đây.
Cập nhật tháng 9 năm 2020: Moment.js đã vào chế độ bảo trì. Đọc thêm về nó ở đây. Bạn có thể muốn khám phá các lựa chọn thay thế như Day.js hoặc date-fns.
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 này để thêm một số điều thú vị cho các thành phần của bạn. Đây là một ví dụ để chơi vớ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 ra các cử chỉ được thực hiện bằng các sự kiện chạm, chuột và con trỏ. Đối với người dùng jQuery, tôi khuyên bạn nên sử dụng plugin jQuery.
$(element).hammer(options).bind("pan", myPanHandler);Đọc Tài liệu tại đây.
Masonry là một thư viện bố cục lưới JavaScript. Nó siêu 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 thành phần 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 nhà thầu lắp đá hoặc khối vào 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 sự kỳ diệu trong hành động. Chà, không chính xác là phép thuật, nhưng bố cục thay đổi như thế nào khi bạn phóng to trên trang web.
Và đây là mã cho ở trên:
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
itemSelector: '.grid-item',
columnWidth: 400
});
var msnry = new Masonry( '.grid');
Đây là một bản demo thú vị trên Codepen:
Kiểm tra các dự án này
Nếu bạn là một nhà phát triển bị ám ảnh bởi dữ liệu thì thư viện này là dành cho bạn. Tôi chưa tìm được thư viện thao tác dữ liệu nào hiệu quả và đẹp như D3. Với hơn 92 nghìn 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 nhà phát triển.
Gần đây, tôi đã sử dụng D3 để trực quan hóa dữ liệu COVID-19 bằng 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.
Đọc thêm về nó ở đây.
Slick hoàn toàn đáp ứng, hỗ trợ thao tác vuốt, lặp vô hạn, v.v. Như đã đề cập trên trang chủ, đây 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 mã, 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,
});
Kiểm tra các bản demo ở đây.
Popper.js là một thư viện JavaScript nhẹ ~3 kB không phụ thuộc, 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 đặt đúng chỗ.
Việc dành thời gian định cấu hình các yếu 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 trở nên nổi bật với tư cách là một nhà phát triển. Và với kích thước nhỏ như vậy, nó không chiếm nhiều không gian.
Đọc Tài liệu tại đây.
Là một nhà phát triể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ẽ làm cho bạn làm việc hiệu quả hơn và sẽ làm cho sự phát triển dễ dàng và nhanh hơn nhiều. Cuối cùng, tùy thuộc vào bạn thích thư viện nào dựa trên nhu cầu của bạn.
Đâ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 viết như thế này? tiếng riu ríu và cho tôi biết.
