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