英文 | https://javascript.plainenglish.io/10-awesome-javascript-libraries-you-should-try-out-in-2021-34ee431cd341
翻譯 | 楊小二
JavaScript 是網絡上最流行的語言之一。盡管它最初隻是為網頁開發而設計的語言，但在過去的 20 年中，它已經實作了指數級的增長。
現在，JavaScript 幾乎可以做任何事情，并且可以在包括物聯網在内的多個平台和裝置上運作。随着最近 SpaceX Dragon 的發射，JavaScript 甚至進入了太空。
它受歡迎的原因之一是大量架構和庫的可用性。與傳統的 Vanilla JS 開發相比，它們使開發變得更加容易。
幾乎任何東西都有相應的庫出來。但是，有如此多的庫可供選擇，是以，很難跟蹤每個庫以及如何根據你的需求對其進行專門定制。
在本文中，我們将分享10個最流行的 JS 庫，你可以使用它們來建構你的下一個項目。
1、Leafle
我認為 Leaflet 是将适合移動裝置的互動式庫，它的地圖添加到你的應用程式中會是一個比較酷的選擇。
它的檔案很小，隻有39kB，使其成為考慮其他地圖庫的絕佳替代方案。憑借跨平台的效率和文檔齊全的 API，它擁有讓你墜入愛河所需的一切。
下面是一些建立 Leaflet 地圖的示例代碼：
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")
}); 在 Leaflet 中，我們需要提供一個 tile 層，因為預設情況下沒有。但這也意味着我們可以從各種免費和進階層中進行選擇。你可以在此處探索各種免費地圖切片。位址：https://leaflet-extras.github.io/leaflet-providers/preview/。
閱讀文檔：https://leafletjs.com/reference-1.6.0.html
2、FullPage.js
這個開源庫可以幫助你建立全屏滾動網站，正如你在上面的看到的GIF動畫那樣。它易于使用并且有許多自定義選項，是以它被成千上萬的開發人員使用并在 GitHub 上擁有超過 3 萬Stars也就不足為奇了。
這是你可以在Codepen 示範：https://codepen.io/lelouchb/pen/WNrLvLG
你甚至可以将它與流行的架構一起使用，例如：
- react-fullpage
- vue-fullpage
- angular-fullpage
大約一年前我遇到了這個庫，從那時起它就成了我的最愛之一。這是你幾乎可以在每個項目中都可以使用的少數庫之一。如果你還沒有開始使用它，那就試試吧，不會讓你失望的。
3、Anime.js
作為最好的動畫庫之一，Anime.js 靈活且易于使用。它可以幫助你的項目添加一些非常酷的動畫。
Anime.js 适用于 CSS 屬性、SVG、DOM 屬性和 JavaScript 對象，并且可以輕松內建到你的應用程式中。
作為開發人員，擁有一個好的開發組合很重要。人們對你的組合的第一印象有助于決定他們是否會雇用你。還有什麼比這個庫更好的工具可以為你的投資組合帶來活力。它不僅可以增強你的網站，還有助于展示實際技能。
Codepen示範位址：https://codepen.io/lelouchb/pen/XWXoboE
4、Screenfull.js
我在尋找一種可以在項目中實作全屏功能的方法時遇到了這個庫。
如果你還想擁有全屏功能，我建議使用這個庫而不是 Fullscreen API，因為它可以實作跨浏覽器。
它非常小，這個庫壓縮後隻有0.7kB。你甚至都不會注意到它的存在。
示範位址：https://sindresorhus.com/screenfull.js/
閱讀文檔：https://github.com/sindresorhus/screenfull.js
5、Moment.js
處理日期和時間可能是很多開發者的痛苦，尤其是 API 調用、不同的時區、本地語言等。
Moment.js 可以幫助你解決所有這些問題，無論是操作、驗證、解析還是格式化日期或時間。
有很多很酷的實作方法對你的項目會非常有用。例如，我在我的一個部落格項目中使用了 .fromNow() 方法來顯示文章發表的時間。
const moment = require('moment');
relativeTimeOfPost = moment([2019, 07, 13]).fromNow();
// a year ago 雖然我不經常使用它，但我很喜歡它對國際化的支援。例如，我們可以使用 .locale() 方法自定義上述結果。
// 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 閱讀文檔：https://momentjs.com/
從2020 年 9 月開始，Moment.js進行維護與更新。
6、Hammer.js
Hammer.js 是一個輕量級的 JavaScript 庫，可讓你向 Web 應用程式添加多點觸控手勢。
我會推薦這個庫來為你的元件添加一些樂趣。你會覺得它非常有趣。
它可以識别由觸摸、滑鼠和pointerEvents 做出的手勢。對于 jQuery 使用者，我建議使用 jQuery 插件。
$(element).hammer(options).bind("pan", myPanHandler); 閱讀文檔：http://hammerjs.github.io/getting-started/
7、Masonry
Masonry 是一個 JavaScript 網格布局庫。它非常不錯，我将它用在了我的許多項目中。它可以采用簡單網格元素，并根據可用的垂直空間放置它們，有點像建房勞工，将石頭或砌塊裝入牆壁裡。
你可以使用此庫以不同的方式展示你的項目。将它與卡片、圖像、模态等一起使用。
這是一個簡單的例子，向你展示了它的魔力。好吧，這不是魔術，而是當你放大網頁時布局會發生變化。
這是上面的代碼：
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
itemSelector: '.grid-item',
columnWidth: 400
});
var msnry = new Masonry( '.grid'); 你還可以看看這些項目：
https://halcyon-theme.tumblr.com/
https://tympanus.net/Development/GridLoadingEffects/index.html
https://www.erikjo.com/work
8、D3.js
如果你是一個癡迷于資料的開發人員，那麼這個庫非常适合你。我還沒有找到一個可以像 D3 一樣高效和精美地處理資料的庫。D3 在 GitHub 上擁有超過 92k stars，是許多開發人員最喜歡的資料可視化庫。
我最近使用 D3 通過 React 和 GitHub 上的約翰霍普金斯 CSSE 資料存儲庫來可視化 COVID-19 資料。這是一個非常有趣的項目，如果你正在考慮做類似的事情，我建議您嘗試一下 D3.js。
閱讀文檔：https://github.com/d3/d3/wiki
9、Slick
Slick 具有完全響應、支援滑動、無限循環等功能。正如首頁上提到的，它确實是你需要的最後一個旋轉木馬。
我使用這個庫已經有一段時間了，它為我節省了很多時間。隻需幾行代碼，你就可以為你的輪播添加如此多的功能。
$('.autoplay').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
}); 示範與文檔：https://kenwheeler.github.io/slick/
10、Popper.js
Popper.js 是一個約 3 kB 的輕量級 JavaScript 庫，零依賴，它提供了一個可靠且可擴充的定位引擎，你可以使用它來確定所有 popper 元素都定位在正确的位置。
花時間配置 popper 元素似乎并不重要，但這些小事情會使你作為開發人員脫穎而出。它體積小，不占地方。
閱讀文檔：https://popper.js.org/docs/v2/
結論
作為開發人員，了解和學會使用正确的 JavaScript 庫很重要。它将使你的工作效率更高，并使開發變得更加容易和快捷。最後，你可以根據自己的需要選擇哪個庫。
以上就是今天我與你分享的 10 個 JavaScript 庫，你可以立即嘗試并開始在你的項目中使用它們。你還使用過哪些其他很酷的 JavaScript 庫？請在留言區與我一起來分享它。
感謝你的閱讀。
學習更多技能
請點選下方公衆号