英文 | https://javascript.plainenglish.io/42-good-javascript-libraries-and-frameworks-for-front-end-developer-5f110148e700

翻譯 | 楊小愛

01、React

地址：https://reactjs.org/

React 是一個開源 JavaScript 庫，用于為 Web 應(yīng)用程序構(gòu)建界面。它允許您從小的、獨(dú)立的和可重用的代碼段創(chuàng)建復(fù)雜的 UI。

此外，它由 Facebook 維護(hù)和開發(fā)，因此，您完全可以放心將這個庫用于您的項(xiàng)目中。有許多大公司在他們的網(wǎng)站上使用它，例如 Facebook、Twitter、Netflix、WhatsApp 等。

02、Vue.js

地址：https://vuejs.org/

Vue.js 是一個免費(fèi)且緊湊的開源庫，可幫助您快速構(gòu)建用戶界面（尤其是單頁 Web 應(yīng)用程序）。

它由 Evan You（Google 程序員）于 2014 年開發(fā)，在 2019 年前端 JavaScript 框架排名中獲得第 2 名。

在我看來，Vue 的一些好處是比其他的更容易學(xué)習(xí)和吸收框架，文檔非常詳細(xì)且易于理解。

03、AngularJS

地址：https://angular.io/

AngularJS 與上面的兩個框架一樣，使您可以輕松構(gòu)建 Web 和移動應(yīng)用程序。受到谷歌、福布斯、IBM、微軟等眾多大公司的信賴和使用。

04、jQuery

地址：https://jquery.com/

jQuery 是前端開發(fā)人員最常用的庫之一。它是一個小型、免費(fèi)、開源的庫，為網(wǎng)站開發(fā)提供了許多有用的功能，例如 AJAX、輕松操作 DOM（CSS、HTML）、處理事件、動畫效果等。

05、Lodash

地址：https://lodash.com/

Lodash 可以幫助您輕松處理 JavaScript 中與數(shù)組、字符串、數(shù)字、對象相關(guān)的問題。

06、Anime.js

地址：https://animejs.com/

Anime.js 是一個庫，通過使用 CSS 屬性、SVG、DOM 屬性、JavaScript 對象，可以輕松地為網(wǎng)頁構(gòu)建快速動畫。

07、AOS

地址：https://michalsnik.github.io/aos/

AOS 可幫助您在用戶滾動網(wǎng)頁時為網(wǎng)站元素創(chuàng)建動畫效果。

08、Popper?

地址：https://popper.js.org/

Popper 是一個用 JavaScript 編寫的庫，大小僅為 3kB 左右，可幫助您提高網(wǎng)站速度，同時，仍保留工具提示所需的功能。它常用于時下流行的庫，例如 Bootstrap、Foundation、Material-UI。在我看來，它幫助我們解決了工具提示中的一個常見問題，即確定元素的位置并在不同設(shè)備屏幕上盡可能地顯示它。

09、Owl Carousel 2

地址：https://owlcarousel2.github.io/OwlCarousel2/

Owl Carousel 2 是一個開源庫，可幫助您輕松構(gòu)建美觀的輪播效果。擁有超過 60 種不同類型的輪播，它支持手機(jī)上的觸摸和放下功能，以改善用戶體驗(yàn)。

它在許多不同的設(shè)備屏幕上具有響應(yīng)性，該庫分為許多小模塊，這有助于在項(xiàng)目中使用時減少不必要的插件。

我喜歡這個庫的地方在于它為每個函數(shù)提供了許多詳細(xì)的示例，使您可以輕松設(shè)置和構(gòu)建。

Carousel 適合我的 web 項(xiàng)目，具有自動播放功能、視頻可用性、可自定義的運(yùn)動效果等。

10、D3.js

地址：https://d3js.org/

D3.js 是一個 JavaScript 庫，用于通過 SVG、Canvas、HTML 進(jìn)行數(shù)據(jù)可視化和渲染。

它是開源的，每周通過 npm 下載超過 100 萬次。以上數(shù)據(jù)可以幫助我們在一定程度上了解其受歡迎程度。

此外，它還提供了許多內(nèi)置示例來幫助您學(xué)習(xí)如何將 D3.js 應(yīng)用于您的網(wǎng)站。但是，它也有一些限制，例如，初學(xué)者很難使用，或者它不能在 IE8 等較舊的瀏覽器上運(yùn)行。

11、DarkModeJS

地址：https://nickdeny.github.io/darkmode.js/

DarkModeJS 庫幫助我們隨著時間的推移自動進(jìn)行 UI 更改。可根據(jù)用戶要求切換模式。您可以創(chuàng)建自己的 CSS 文件，對比自己并通過 DarkModeJS 設(shè)置它們。

12、Chart.js

地址：https://www.chartjs.org/

Chart.js 庫可幫助您的網(wǎng)站創(chuàng)建漂亮的圖表。它有很多圖表，讓我們在使用庫時可以靈活處理傳遞給圖表的數(shù)據(jù)。它還定期更新新版本，并在許多不同的設(shè)備屏幕上做出響應(yīng)。

13、SweetAlert?

地址：https://sweetalert.js.org/

SweetAlert 是一個開源庫，可幫助您快速構(gòu)建具有高美學(xué)和許多漂亮運(yùn)動效果的網(wǎng)站通知。

將它用于我們的網(wǎng)站非常簡單，您只需要通過 CDN 調(diào)用 sweetalert.min.js 文件并定義消息的基本屬性，例如標(biāo)題（標(biāo)題）、文本（內(nèi)容）、圖標(biāo)。

此外，您可以添加屬性和其他功能，如按鈕、通過 Ajax 渲染、使用 modal 的 promise 等。

14、Highlight.js?

地址：https://highlightjs.org//

Highlight.js 是一個用 JavaScript 構(gòu)建的開源庫，可幫助您突出顯示網(wǎng)站上的代碼，并且可以在瀏覽器和服務(wù)器上運(yùn)行。

該庫的一些優(yōu)勢：它獨(dú)立于任何框架；能夠自動檢測您網(wǎng)站上的語言；支持超過 189 種流行的編程語言；為網(wǎng)頁上的代碼片段提供了 94 種以上的樣式。

我喜歡這個庫的一點(diǎn)是，您可以通過刪除在下載過程中不使用的編程語言來減少 highlight.js 的大小。

對于服務(wù)器端，您可以使用 yarn 或 npm 來安裝它。

15、VideoJS

地址：https://videojs.com/

VideoJS 是基于 HTML5 視頻平臺構(gòu)建的視頻播放器，支持多種格式，例如 YouTube 和 Vimeo 流媒體。

它是在 2010 年代中期開發(fā)的，數(shù)百名程序員為該項(xiàng)目做出了貢獻(xiàn)，超過 450,000 個網(wǎng)站正在使用該庫。

VideoJS的一些優(yōu)點(diǎn)：設(shè)計美觀，有多種主題可供選擇，適用于媒體播放器，可以在電腦和手機(jī)上運(yùn)行，提供100多個插件來幫助您輕松計算和添加新功能。

16、Moment.js?

地址：https://momentjs.com/

Moment.js 使使用 JavaScript 處理日期和時間變得容易。

17、PixiJS

地址：https://pixijs.com/

使用最快、最靈活的 2D WebGL 渲染器創(chuàng)建精美的數(shù)字內(nèi)容。

18、Webpack?

地址：https://webpack.js.org/

Webpack 是現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包工具。

19、fullPage.js

地址：https://alvarotrigo.com/fullPage/

fullPage.js 可幫助您為網(wǎng)站創(chuàng)建全屏滾動。

20、Howler.js

地址：https://howlerjs.com/

Howler.js 是一個開源 JavaScript 庫，大小只有 7KB 左右，可幫助您輕松創(chuàng)建和處理網(wǎng)頁音頻。

通過 API 和 HTML5 Audio 的結(jié)合，它可以運(yùn)行在許多不同的平臺和網(wǎng)絡(luò)瀏覽器上，包括 IE9 和 Cordova。

Howler.js 的一些優(yōu)點(diǎn)：它通過模塊化架構(gòu)很容易擴(kuò)展，支持大多數(shù)文件類型，如 MP3、MPEG、OPUS、OGG、OGA、WAV、AAC、CAF、M4A 等，它的自動緩存有助于提高網(wǎng)站的性能以及服務(wù)器的帶寬。

此外，它還為您提供了許多屬性來微調(diào)媒體播放器以適應(yīng)網(wǎng)站，例如確定初始音量、自動播放選項(xiàng)、動態(tài)歌曲重復(fù)等。

21、Masonry

地址：https://masonry.desandro.com/

它是一個庫，可以輕松為您的網(wǎng)站（尤其是圖像）創(chuàng)建復(fù)雜的網(wǎng)格布局。

22、Screenfull?

地址：https://sindresorhus.com/screenfull.js/

Screenfull 有助于將元素或網(wǎng)頁轉(zhuǎn)換為全屏模式。

23、Particles.js?

地址：https://vincentgarreau.com/particles.js/

Particles.js 是一個免費(fèi)的開源庫，可讓您為網(wǎng)站創(chuàng)建和優(yōu)化漂亮的背景。

24、Leaflet

地址：https://leafletjs.com/

Leaflet 是一個開源 JavaScript 庫，用于與移動設(shè)備上的地圖進(jìn)行交互。

25、SortableJS

地址：https://sortablejs.github.io/Sortable/

SortableJS 是一個 JavaScript 庫，可為 HTML5 添加拖放功能。

26、clipboard.js

地址：https://clipboardjs.com/

剪貼板可以快速將網(wǎng)頁內(nèi)容復(fù)制到剪貼板。

27、Underscore.js

地址：http://underscorejs.org/

Underscore.js 是一個 JavaScript 庫，可為您提供有用的函數(shù)來解決常見的編程問題。

28、Cleave.js

地址：https://nosir.github.io/cleave.js/

當(dāng)用戶輸入信息時，Cleave 可以很容易地重新格式化輸入元素。

29、Share

地址：https://estevanmaito.github.io/sharect/

共享庫使用戶可以在網(wǎng)頁中選擇他們想要的文本并立即將其共享到 Facebook 或 Twitter。它的大小只有8KB左右。

30、Chardin.js

地址：https://heelhook.github.io/chardin.js/

Chardin.js 庫幫助我們在網(wǎng)頁上顯示組件的說明。有助于對組件功能進(jìn)行更多的解釋，讓用戶更容易理解和使用。

31、Flip

地址：https://pqina.nl/flip/

Flip 是一個插件，可讓您快速輕松地創(chuàng)建具有翻轉(zhuǎn)效果的計數(shù)器。如果您需要創(chuàng)建事件計時器、促銷活動、籌款活動，我認(rèn)為這是最適合您的庫。

32、Image Compare Viewer

地址：https://image-compare-viewer.netlify.app/

Image Compare Viewer 是一個用 JavaScript 構(gòu)建的開源庫，它允許您直接在網(wǎng)頁上比較兩個圖像。常用于對比編輯前后的圖像，幫助用戶有直觀的觀感，區(qū)分更清晰。

33、Notyf

地址：https://carlosroso.com/notyf/

Notyf 是一個 JavaScript 庫，大小僅為 3KB 左右，可以創(chuàng)建網(wǎng)頁Toast 通知。

它響應(yīng)式地顯示在許多不同的設(shè)備屏幕上，并且易于與當(dāng)今流行的 JS 框架（如 React、Angular、Aurelia、Vue 和 Svelte）一起使用。

34、Dinero.js

地址：https://dinerojs.com/

Dinero.js 是一個 JavaScript 庫，它提供了許多功能來幫助您工作和解決問題。與貨幣相關(guān)的主題在網(wǎng)站上。

35、SimpleParallax.js

地址：https://simpleparallax.com/

simpleParallax.js 是一個體積小巧的開源 JavaScript 庫。它將幫助您為網(wǎng)站圖像創(chuàng)建簡單易行的視差效果。

36、Duet Date Picker?

地址：https://duetds.github.io/date-picker/

Duet Date Picker 是由 Duet Design Systems 開發(fā)的開源代碼。它允許您為您的網(wǎng)站輕松構(gòu)建日期選擇器組件，而無需任何額外的使用或任何額外的庫。

我喜歡這個庫中的一些功能是深色和淺色主題。您可以設(shè)置允許用戶選擇的時間間隔，按地區(qū)設(shè)置日期等。

37、Print.js

地址：https://printjs.crabbly.com/

Print.js 是一個緊湊的 JavaScript 庫，它允許您直接在網(wǎng)頁上打印文件而不會出現(xiàn)任何問題。無需重定向或使用嵌入。它支持多種格式的打印，例如 PDF、HTML（例如表單）、圖像、JSON 等。

此外，它還可以在最流行的瀏覽器上運(yùn)行，例如 Google Chrome、Firefox、Safari、Edge 和 Opera。

38、Mathjs

地址：https://mathjs.org/

Mathjs 是一個開源數(shù)學(xué)庫，在 Github 上為 JavaScript 和 Node.js（在服務(wù)器端運(yùn)行）擁有超過 10.5k 顆星。

它使您可以靈活地計算和處理許多不同的數(shù)據(jù)類型，例如數(shù)字、大數(shù)、復(fù)數(shù)、分?jǐn)?shù)、單位和矩陣。

39、PROGRESSBAR

地址：https://kimmobrunfeldt.github.io/progressbar.js/

PROGRESSBAR 是一個使用 JavaScript 構(gòu)建的開源庫，可以輕松地使用不同類型的形狀顯示基于條形的進(jìn)度。

如今，它在許多流行的設(shè)備上都具有響應(yīng)性。您還可以通過 npm、bower 或下載輕松設(shè)置它以供使用。

此外，它還有一整頁關(guān)于我們可以在這個庫中使用的功能的說明和一個帶有預(yù)寫代碼的演示頁面，使您可以更輕松地將其應(yīng)用于您的網(wǎng)站。

40、Quill

地址：https://quilljs.com/

Quill 是一個開源編輯器，因此您可以隨意將其用于所有類型的商業(yè)網(wǎng)站或非商業(yè)網(wǎng)站。它內(nèi)置了許多功能，例如，添加鏈接、圖像、視頻等。

我喜歡 Quill 的地方在于，它可以輕松地在所有現(xiàn)代和響應(yīng)式 Web 瀏覽器的多個設(shè)備屏幕上進(jìn)行設(shè)置和顯示，并提供有關(guān)使用時常見問題的詳細(xì)教程。

41、VALIDATE.JS

地址：https://validatejs.org/

VALIDATE.JS 是一個開源庫，可讓您檢查網(wǎng)站上的 JavaScript 對象。它的主要目標(biāo)是以 JSON 形式設(shè)置驗(yàn)證并使它們可在瀏覽器和服務(wù)器之間共享。

它為我們提供了很多驗(yàn)證方法，例如日期、電子郵件、格式、對象類型檢查等。VALIDATE.JS 可以在兩種環(huán)境中運(yùn)行——瀏覽器和服務(wù)器（Node.js）。

您可以在演示頁面上看到更多示例和用法。

42、Mocha

地址：https://mochajs.org/

Mocha 是一個廣泛用于 Web 編程的框架，它支持后端（Node.js）和前端。它可以幫助您簡單輕松地執(zhí)行異步測試。

此外，它還擁有龐大的程序員支持社區(qū)，以及許多詳細(xì)的說明和示例。公司以及大型網(wǎng)站都信任并使用它。

總結(jié)

我希望這篇文章能為您提供用于網(wǎng)頁設(shè)計和開發(fā)的有用的 JavaScript 庫。如果您有任何問題，請在留言區(qū)給我留言，我會盡快回復(fù)。

感謝您的閱讀，希望能再次見到你。

祝你今天過得愉快！

學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號

分享 42 個面向前端開發(fā)的 JS 庫和框架

學(xué)習(xí)更多技能請點(diǎn)擊下方公眾號

學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號