2020年不容錯過的十大JavaScript庫
如今，JavaScript 幾乎可以完成任何任務(wù)，甚至能夠在包括物聯(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)。但過分豐富的選項也帶來新的負擔，導(dǎo)致我們很難跟進每種庫的具體發(fā)展，更難結(jié)合自身需求做出正確選擇。
在本文中，我們將了解目前最具人氣的 10 大 JS 庫，希望能為大家的項目開發(fā)帶來啟發(fā)。
Leaflet
Leaflet
Leaflet 可能是大家在應(yīng)用程序當中提供用戶友好型交互式地圖功能的最佳開源庫。
這套庫體積小巧(僅為 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é)合，輕松集成至您的應(yīng)用程序當中。
作為開發(fā)人員，擁有良好的技能組合無疑非常重要。在這方面，Anime.js 的作用非常突出——它不僅能夠改善網(wǎng)站的整體觀感，也能體現(xiàn)您的實際技能，讓原本冷冰冰的業(yè)務(wù)能力瞬間變得生動起來。
請參考相關(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 能夠幫助大家輕松解決這些問題，一口氣搞定日期及時間的操作、驗證、解析以及格式化等任務(wù)。
其中提供多種超棒的方法，能夠為各類項目提供實際幫助。例如，我在自己的一個博客項目中就使用了.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 應(yīng)用程序中添加多點觸控手拋。
有了這套庫，大家的應(yīng)用程序就能樂趣倍增。大家可以通過示例體驗一番。
它能夠識別出由觸控、鼠標以及 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)相應(yīng)變化。
下面來看實現(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 擁有全響應(yīng)式、滑動支持以及無限循環(huán)等出色功能。如項目網(wǎng)站首頁所述，它能滿足用戶對于輪播庫的所有預(yù)期。
我使用這套庫已經(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)，具體庫選擇仍然取決于您的實際需求。
