2020年不容錯過的十大JavaScript庫

現在，JavaScript 幾乎能夠完成任何任務，甚至可以在包括物聯網在內的衆多平臺及設備之上運行。而隨着近期 SpaceX 龍飛船項目的推動，JavaScript 也正式開啓了本身的太空探索之旅。

之因此如此流行，JavaScript 所依靠的一大優點正是豐富的框架與庫選項。與傳統的僅 JavaScript 開發環境相比，框架與庫生態的創建與壯大已經讓開發工做變得愈發輕鬆。

更重要的是，幾乎每一天都有新的庫方案出現。但過度豐富的選項也帶來新的負擔，致使咱們很難跟進每種庫的具體發展，更難結合自身需求作出正確選擇。

在本文中，咱們將瞭解目前最具人氣的 10 大 JS 庫，但願能爲你們的項目開發帶來啓發。

Leaflet

Leaflet

Leaflet 多是你們在應用程序當中提供用戶友好型交互式地圖功能的最佳開源庫。

這套庫體積小巧(僅爲 39 KB)，這使其成爲地圖庫選項中的理想解決方案。憑藉着良好的跨平臺運行效率與完善的 API，Leaflet 擁有着使人折服的一切。

下面來看建立 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 中，咱們須要提供一個平鋪圖層，由於其默認不設平鋪圖層。雖然相對不便，但這也讓咱們可以更靈活地從各類免費及高級圖層選項中作出選擇。感興趣的朋友能夠經過下方連接獲取各種免費平鋪圖層。

https://leaflet-extras.github.io/leaflet-providers/preview/

你們也能夠閱讀說明文檔或經過項目教程瞭解更多詳細信息。

• 說明文檔：https://leafletjs.com/reference-1.6.0.html
• 項目教程：https://leafletjs.com/examples.html

fullPage.js

這套開源庫可以幫助你們建立全屏滾動網站，如以上 GIF 動圖所示。其易於使用，且提供多種自定義選項。憑藉着這一系列優點，fullPage 獲得無數開發人員的青睞，並在 GitHub 上拿下超過 3 萬星。

下面來看 Codepen 演示：

您甚至能夠將其與各種流行框架配合使用，例如：

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

我是在大概一年以前接觸到這套庫的，如今它已經成爲個人心頭最愛，也是我幾乎在每一個項目都能使用的少數幾套庫之一。若是你們還沒試過，請給它個機會，您絕對不會失望。

anime.js

anime.js
Anime.js 是目前最好的動畫庫之一，擁有出色的靈活性與易用性。它可以幫助你們向項目中添加各類酷炫的動畫效果。

Anime.js 還能與 CSS 屬性、SVG、DOM 屬性以及 JavaScript 對象等良好結合，輕鬆集成至您的應用程序當中。

做爲開發人員，擁有良好的技能組合無疑很是重要。在這方面，Anime.js 的做用很是突出——它不只可以改善網站的總體觀感，也能體現您的實際技能，讓本來冷冰冰的業務能力瞬間變得生動起來。

請參考相關 Codepen 演示：

你們也能夠在 Codepen 上查看更多其餘出色項目，或者經過下方連接閱讀說明文檔。

https://animejs.com/documentation/

Screenfull.js

screenfull.js

有一次，我打算找一套能在項目中實現全屏功能的庫，screenfull.js 就這樣出如今個人生活裏。

對於各位但願實現全屏功能的朋友來講，我強烈建議你們選擇 screenfull.js(而非 Fullscreen API)，由於它擁有更好的跨瀏覽器執行效率。

另外，它的體積也很是小巧，小到你們甚至不會注意到——gzip 壓縮後僅爲 0.7 KB。

您能夠觀看演示或閱讀說明文檔以瞭解更多詳細信息。

• 演示地址：https://sindresorhus.com/screenfull.js
• 說明文檔：https://github.com/sindresorhus/screenfull.js

Moment.js

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

Moment.js 主頁
經過下方連接閱讀說明文檔：https://momentjs.com/

Hammer.js

Hammer.js 是一套輕量化的 JavaScript 庫，用於向 Web 應用程序中添加多點觸控手拋。

有了這套庫，你們的應用程序就能樂趣倍增。你們能夠經過示例體驗一番。

它可以識別出由觸控、鼠標以及 pointerEvents 實現的各類手勢。對於 jQuery 用戶，我建議你們使用 jQuery 插件。

$(element).hammer(options).bind("pan", myPanHandler);

經過下方連接閱讀說明文檔：http://hammerjs.github.io/getting-started/

Masonry

Masonry

Masonry 是一套 JavaScript 網格佈局庫。它表現出色，我在不少項目都用到過。它可以使用簡單的網格元素，並根據可用的垂直空間進行放置，有點像工程師們把石塊或磚砼鋪設在牆面上的感受。

您能夠利用這套庫，以不一樣方式展現本身的項目，包括配合卡片、圖像及模態等一同使用。

下面來看一個簡單示例，只須要放大網頁，佈局就會出現相應變化。

下面來看實現以上效果的代碼：

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

var msnry = new Masonry( '.grid');

再來看 Codepen 上的精彩演示：

查看相關項目：

• https://halcyon-theme.tumblr.com/
• https://tympanus.net/Development/GridLoadingEffects/index.html
• https://www.erikjo.com/work

D3.js

若是您對數據很是癡迷，那麼這套庫絕對不能錯過。我尚未找到其餘能像 D3 這樣高效處理數據的庫選項。它在 GitHub 上得到超過 9.2 萬星，也成爲衆多開發人員最喜好的數據可視化庫。

最近，我開始使用 D3 配合 React 對 COVID-19 以及約翰霍普金斯 CSSE 數據存儲庫進行可視化。這是個很是有趣的項目，若是你們有着相似的數據處理需求，強烈建議各位嘗試一下 D3.js。

你能夠經過下方連接閱讀說明文檔：https://github.com/d3/d3/wiki

slick

slick

Slick 擁有全響應式、滑動支持以及無限循環等出色功能。如項目網站首頁所述，它能知足用戶對於輪播庫的全部預期。

我使用這套庫已經有一段時間了，它爲我節約了不少時間。只須要幾行代碼咱們就能在輪播中添加諸多功能。

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

Autoplay 自動播放

經過下方連接觀看演示用例：https://kenwheeler.github.io/slick/

Popper.js

Popper.js

Popper.js 是一套大小約爲 3 KB 左右的輕量化 JavaScript 庫。這是一款零依賴關係的可靠、可擴展定位引擎，可以保證全部 popper 元素都被放置在正確的位置。

不少朋友不肯意投入心力配置 popper 元素，但正是這些細節區分開了普通開發者與優秀開發者。Popper.js 無疑是處理元素放置工做的好幫手，並且不會佔用多少空間。

經過下方連接閱讀說明文檔：https://popper.js.org/docs/v2/

總結

做爲開發人員，選擇正確的 JavaScript 很是重要。這不只可以提供您的工做效率，同時也會讓開發自己變得更加輕鬆便捷。固然，這裏要再次強調，具體庫選擇仍然取決於您的實際需求。

【編輯推薦】

1. 你如今可使用的10個JavaScript代碼段
2. 5 個 JS 數組技巧可提升你的開發技能
3. 99% 開發者都不知道的 JS 冷知識系列（一）
4. JavaScript 中 this 的錯誤認識、綁定規則、常見問題講解
5. 10個很受歡迎的代碼編輯器，讓開發效率翻倍

【責任編輯：趙寧寧 TEL：（010）68476606】