2022 年我們用於構建應用程序的 JavaScript 庫

JavaScript 庫讓構建複雜的應用程序不再繁瑣。以下是 2021/2022 年使用的一些最有用的庫。

從“Hello World! 畢業後 ' 並了解 JavaScript 的工作原理後，您可能會想要深入構建更有用的東西——網站、服務或移動應用程序。

這些都有很多活動部件 – 用戶可以登錄的身份驗證、存儲數據的數據庫支持、用戶可以將貓的照片存儲在數據庫中的文件上傳——所有這些都是需要時間和精力開發的複雜系統。

無論您要構建哪種應用程序，它們都非常相似。 購物網站的登錄系統與社交媒體網站的登錄系統並沒有什麼不同。他們要求輸入用戶名和密碼並讓您登錄。

這就是庫 進來吧。它們為所有無聊的東西提供了功能，因此您可以花時間實際構建您的項目。

以下是我們在 2021 年的項目中一直在使用的一些 JavaScript 庫（並將繼續使用到 2022 年）。它們為我們節省了數小時的開發時間，因此值得一試！

Node.js 身份驗證 - Passport.js

https://www.passportjs.org/

Passport.js 將身份驗證添加到 Node.js 應用程序。與 Express.js Web 框架搭配使用，您可以通過可驗證的網站或 Web 服務立即啟動並運行。

Node.js 數據庫/ORM – 續集

https://sequelize.org/

Sequelize 不僅僅將您的 Node.js 應用程序連接到數據庫 - 它還提供 ORM（對象關係映射）功能。

做空；它使處理數據庫記錄變得超級容易。一切都從原始 SQL 查詢中抽像出來——相反，您定義模型，將它們鏈接到表，然後處理代碼中的模型。創建、更新和刪除對象，所做的更改將反映在數據庫中。

使用 ORM 是複雜應用程序的必備條件。

映射 – Leaflet.js

https://leafletjs.com/

Leaflet.js 與多個在線地圖服務集成。它可以查詢這些服務的地址或坐標，然後顯示地圖。使用簡單的 API 添加點、按鈕或導航。

如果需要額外的功能，它是輕量級的，並且支持許多插件。

評論 – 評論

https://commento.io/

Commento 允許您將評論系統綁定到幾乎任何網頁上。託管評論服務器，將 JavaScript 放入您需要評論框的位置，然後就完成了。

付款 - 條紋

https://stripe.com/docs/libraries

Stripe 讓在線支付變得異常簡單。它們以開發者為中心，提供將支付集成到您的服務或應用所需的所有工具。

文檔很紮實，涵蓋了各種平台的用法，包括 JavaScript（客戶端和服務器端）。

輔助函數 - Lodash &Underscore.js

https://lodash.com/

https://underscorejs.org/

Lodash 和 Underscore.js 都為 Javascript 提供了一堆額外的功能。

它們可以節省時間，或者只是非常有用——例如：

• 用於搜索和匯總數組的函數
• 去抖輸入
• 生成隨機輸入和唯一 ID
• 檢查變量類型
• 還有更多

兩個庫都做類似的事情，所以你可能不需要兩者——根據你的需要選擇一個。

動畫——anime.js

https://animejs.com/

Anime.js 是讓事物在屏幕上移動的庫。動畫任何東西——圖形、移動文本、圖像——任何屏幕上的元素都可以移動、拉伸、縮放和旋轉。

用戶輸入 - Cleave.js

https://nosir.github.io/cleave.js/

用戶不可靠。他們搗碎鍵，在應該有數字的地方鍵入單詞。混亂。

Cleave.js 將用戶輸入強制轉換為 HTML 表單輸入。

不希望用戶在數字輸入中輸入字母？ Cleave.js 將忽略任何不是數字的輸入。

想要閱讀電子郵件地址？ Cleave.js 將確保用戶已包含 @ 符號。

漂亮。

界面構建——Vue.js

Vue

Vue.js 是一個前端庫和框架，用於使用 HTML、CSS 和 JavaScript 向頁面添加交互性。

基本上，它允許您更改 HTML 頁面的內容而無需重新加載它。這可用於動態加載內容，對於構建單頁應用程序至關重要——這些應用程序可以無休止地滾動內容或從縮略圖加載圖像，而無需導航到不同的 URL 或刷新頁面。

Vue.js 很棒，因為您可以隨心所欲地依賴它。 在 Vue 中構建您的整個 Web 應用程序，或者只是在您想要添加一些動態內容的地方使用它。

時間和日期 - Moment.js

https://momentjs.com/

傳統上，處理日期、時間、時區和處理區域日期/時間格式是一場噩夢。

Moment.js 讓這一切變得簡單。跨時區轉換時間，從一種日期格式轉換為另一種日期格式，或根據用戶的位置向用戶顯示時間。

它會為您節省一些皺紋。

圖像平鋪/砌體 - macy.js

http://macyjs.com/

在屏幕上放置成排的不同大小的圖片看起來很簡單，但事實並非如此。

不同的屏幕尺寸、調整窗口大小、改變屏幕方向——在試圖讓圖像以整齊的網格顯示時都會帶來挑戰。

macy.js 優雅地解決了這個問題。還有其他選擇，但我發現這個是最輕鬆的。

圖像輪播 - 光滑

https://kenwheeler.github.io/slick/

“你永遠需要的最後一個旋轉木馬”——同意。

圖像全屏查看器

https://dimsemenov.com/plugins/magnific-popup/

在全屏彈出窗口中顯示圖像，並帶有縮放和圖庫導航。有很多 這樣做的圖書館，我認為這是最好的。

彈出窗口 - SweetAlert2

https://sweetalert2.github.io/

擺脫那些醜陋的原生 JavaScript 瀏覽器彈出窗口/警報，改用 Sweetalert2。

（通過彈出窗口，我不是指煩人的廣告——我是指用於顯示通知、成功消息和警報的模式）

WYSIQWYG 用戶輸入 - Summernote

https://summernote.org/

您可能希望您的用戶能夠輸入的不僅僅是純文本。否則博客文章會很無聊。

Summernote 提供了一個完整的所見即所得的富文本編輯器——輸出 HTML 以保存在後端。

可以使用全範圍的 HTML 文本格式——從粗體/斜體/下劃線文本到使用不同的字體、上標、下標等。

嵌入的 youtube 和 Vimeo 視頻、圖像、表格和其他元素使其成為讓您的用戶提交豐富內容的最佳選擇。

用戶輸入-下拉菜單-選擇2

https://select2.org/

下拉菜單很棒，但一旦選項列表超過十幾個左右，它們就不是真的有用了。像下拉菜單這樣簡單的操作讓用戶選擇他們的國家很不方便——有很多東西需要滾動。

Select2 通過提供可搜索的、可定制的選擇框來解決這個問題，甚至可以根據用戶輸入的內容從遠程服務器檢索選項列表。整潔！

日期和時間輸入 - Flatpickr

https://flatpickr.js.org/

允許您的用戶從日曆界面中選擇日期/時間。看起來很專業，避免用戶因地區差異而無意中選擇錯誤的日期或時間。

可以指定所選日期/時間的格式以匹配您的後端，也讓您的生活更輕鬆。

佈局 - 引導

https://getbootstrap.com/

Bootstrap 主要是一個 CSS 庫——它包含按鈕和邊框等元素，以及網格佈局和文本格式——但它也有一個 JavaScript 組件，可以添加模態彈出窗口和下拉菜單等內容。

如果您現在想要一個好看的應用程序並且想在以後擔心您的品牌，這是必須的。