2020年不容錯過的十大JavaScript庫
如今，JavaScript 幾乎可以完成任何任務，甚至能夠在包括物聯(lián)網(wǎng)在內(nèi)的眾多平臺及設(shè)備之上運行。而隨著近期 SpaceX 龍飛船項目的推進，JavaScript 也正式開啟了自己的太空探索之旅。
之所以如此流行，JavaScript 所依靠的一大優(yōu)勢正是豐富的框架與庫選項。與傳統(tǒng)的僅 JavaScript 開發(fā)環(huán)境相比，框架與庫生態(tài)的建立與壯大已經(jīng)讓開發(fā)工作變得愈發(fā)輕松。
更重要的是，幾乎每一天都有新的庫方案出現(xiàn)。但過分豐富的選項也帶來新的負擔，導致我們很難跟進每種庫的具體發(fā)展，更難結(jié)合自身需求做出正確選擇。
在本文中，我們將了解目前最具人氣的 10 大 JS 庫，希望能為大家的項目開發(fā)帶來啟發(fā)。
Leaflet
Leaflet
Leaflet 可能是大家在應用程序當中提供用戶友好型交互式地圖功能的最佳開源庫。
這套庫體積小巧(僅為 39 KB)，這使其成為地圖庫選項中的理想解決方案。憑借著良好的跨平臺運行效率與完善的 API，Leaflet 擁有著令人折服的一切。
下面來看創(chuàng)建 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 中，我們需要提供一個平鋪圖層，因為其默認不設(shè)平鋪圖層。雖然相對不便，但這也讓我們能夠更靈活地從各種免費及高級圖層選項中做出選擇。感興趣的朋友可以通過下方鏈接獲取各類免費平鋪圖層。
https://leaflet-extras.github.io/leaflet-providers/preview/
大家也可以閱讀說明文檔或通過項目教程了解更多詳細信息。
- 說明文檔：https://leafletjs.com/reference-1.6.0.html
- 項目教程：https://leafletjs.com/examples.html
fullPage.js
這套開源庫能夠幫助大家創(chuàng)建全屏滾動網(wǎng)站，如以上 GIF 動圖所示。其易于使用，且提供多種自定義選項。憑借著這一系列優(yōu)勢，fullPage 得到無數(shù)開發(fā)人員的青睞，并在 GitHub 上拿下超過 3 萬星。
下面來看 Codepen 演示：
您甚至可以將其與各類流行框架配合使用，例如：
- react-fullpage
- vue-fullpage
- angular-fullpage
我是在大概一年之前接觸到這套庫的，現(xiàn)在它已經(jīng)成為我的心頭最愛，也是我?guī)缀踉诿總€項目都能使用的少數(shù)幾套庫之一。如果大家還沒試過，請給它個機會，您絕對不會失望。
anime.js
Anime.js 是目前最好的動畫庫之一，擁有出色的靈活性與易用性。它能夠幫助大家向項目中添加各種酷炫的動畫效果。
Anime.js 還能與 CSS 屬性、SVG、DOM 屬性以及 JavaScript 對象等良好結(jié)合，輕松集成至您的應用程序當中。
作為開發(fā)人員，擁有良好的技能組合無疑非常重要。在這方面，Anime.js 的作用非常突出——它不僅能夠改善網(wǎng)站的整體觀感，也能體現(xiàn)您的實際技能，讓原本冷冰冰的業(yè)務能力瞬間變得生動起來。
請參考相關(guān) Codepen 演示：
大家也可以在 Codepen 上查看更多其他出色項目，或者通過下方鏈接閱讀說明文檔。
https://animejs.com/documentation/
Screenfull.js
screenfull.js
有一次，我打算找一套能在項目中實現(xiàn)全屏功能的庫，screenfull.js 就這樣出現(xiàn)在我的生活里。
對于各位希望實現(xiàn)全屏功能的朋友來說，我強烈建議大家選擇 screenfull.js(而非 Fullscreen API)，因為它擁有更好的跨瀏覽器執(zhí)行效率。
另外，它的體積也非常小巧，小到大家甚至不會注意到——gzip 壓縮后僅為 0.7 KB。
您可以觀看演示或閱讀說明文檔以了解更多詳細信息。
- 演示地址：https://sindresorhus.com/screenfull.js
- 說明文檔：https://github.com/sindresorhus/screenfull.js
Moment.js
Moment.js
日期與時間使用起來往往非常麻煩，特別是通過 API 調(diào)用不同時區(qū)、本地語言等時，往往更令人頭大。Moment.js 能夠幫助大家輕松解決這些問題，一口氣搞定日期及時間的操作、驗證、解析以及格式化等任務。
其中提供多種超棒的方法，能夠為各類項目提供實際幫助。例如，我在自己的一個博客項目中就使用了.fromNow() 方法來顯示文章的發(fā)布時間。
- const moment = require ( 'moment' );
- relativeTimeOfPost = moment ([ 2019 , 07 , 13 ]). fromNow ();
- // a year ago
雖然使用頻率不高，但我還是很喜歡它帶來的國際化功能。例如，我們可以使用.locale() 方法對以上結(jié)果進行自定義。
- // 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/
Hammer.js
Hammer.js 是一套輕量化的 JavaScript 庫，用于向 Web 應用程序中添加多點觸控手拋。
有了這套庫，大家的應用程序就能樂趣倍增。大家可以通過示例體驗一番。
它能夠識別出由觸控、鼠標以及 pointerEvents 實現(xiàn)的各種手勢。對于 jQuery 用戶，我建議大家使用 jQuery 插件。
- $(element).hammer(options).bind("pan", myPanHandler);
通過下方鏈接閱讀說明文檔：http://hammerjs.github.io/getting-started/
Masonry
Masonry
Masonry 是一套 JavaScript 網(wǎng)格布局庫。它表現(xiàn)出色，我在很多項目都用到過。它能夠使用簡單的網(wǎng)格元素，并根據(jù)可用的垂直空間進行放置，有點像工程師們把石塊或磚砼鋪設(shè)在墻面上的感覺。
您可以利用這套庫，以不同方式展示自己的項目，包括配合卡片、圖像及模態(tài)等一同使用。
下面來看一個簡單示例，只需要放大網(wǎng)頁，布局就會出現(xiàn)相應變化。
下面來看實現(xiàn)以上效果的代碼：
- var elem = document.querySelector('.grid');
- var msnry = new Masonry( elem, {
- itemSelector: '.grid-item',
- columnWidth: 400
- });
- var msnry = new Masonry( '.grid');
再來看 Codepen 上的精彩演示：
查看相關(guān)項目：
- https://halcyon-theme.tumblr.com/
- https://tympanus.net/Development/GridLoadingEffects/index.html
- https://www.erikjo.com/work
D3.js
如果您對數(shù)據(jù)非常癡迷，那么這套庫絕對不能錯過。我還沒有找到其他能像 D3 這樣高效處理數(shù)據(jù)的庫選項。它在 GitHub 上獲得超過 9.2 萬星，也成為眾多開發(fā)人員最喜愛的數(shù)據(jù)可視化庫。
最近，我開始使用 D3 配合 React 對 COVID-19 以及約翰霍普金斯 CSSE 數(shù)據(jù)存儲庫進行可視化。這是個非常有趣的項目，如果大家有著類似的數(shù)據(jù)處理需求，強烈建議各位嘗試一下 D3.js。
你可以通過下方鏈接閱讀說明文檔：https://github.com/d3/d3/wiki
slick
slick
Slick 擁有全響應式、滑動支持以及無限循環(huán)等出色功能。如項目網(wǎng)站首頁所述，它能滿足用戶對于輪播庫的所有預期。
我使用這套庫已經(jīng)有一段時間了，它為我節(jié)約了很多時間。只需要幾行代碼我們就能在輪播中添加諸多功能。
- $ ( '.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 庫。這是一款零依賴關(guān)系的可靠、可擴展定位引擎，能夠保證所有 popper 元素都被放置在正確的位置。
很多朋友不愿意投入心力配置 popper 元素，但正是這些細節(jié)區(qū)分開了普通開發(fā)者與優(yōu)秀開發(fā)者。Popper.js 無疑是處理元素放置工作的好幫手，而且不會占用多少空間。
通過下方鏈接閱讀說明文檔：https://popper.js.org/docs/v2/
總結(jié)
作為開發(fā)人員，選擇正確的 JavaScript 非常重要。這不僅能夠提供您的工作效率，同時也會讓開發(fā)本身變得更加輕松便捷。當然，這里要再次強調(diào)，具體庫選擇仍然取決于您的實際需求。
