15個有趣的JS和CSS庫，快來看看吧
在每個月，我們都會為大家分享一些***、有趣的前端庫，希望它們中的一些會對你的項目有所幫助。當然，如果你也發(fā)現(xiàn)了一些有趣、實用的庫，框架或是工具，也歡迎留言與大家一同分享。
1.Currency
currency.js 是一個用于處理貨幣值的輕量級 JavaScript 庫，它解決了 JS 中的浮點問題，你無須擔(dān)心 Decimal 這類精準的數(shù)據(jù)類型，就可以直接進行基本的算數(shù)運算。同時，它也適合不同類型的數(shù)據(jù)輸入，例如字符串、數(shù)字和貨幣對象。
項目地址：https://github.com/scurker/currency.js
2.Lass
你可以使用 Lass 搭建基于 Node.js 的腳手架工具。它易于安裝，你只需要在終端上運行npm install -g lass即可，并且它還提供了豐富的功能，如使用 ava 進行單元測試，利用 prettier 自動格式化代碼，自動 git init，自動 Markdown 語法轉(zhuǎn)化以及使用 Remark 進行代碼檢查等。
項目地址：https://github.com/lassjs/lass
3.Fastify
Fastify 是一個現(xiàn)代的 Node.js 框架，靈感源自 Hapi 和 Express 等項目。除了要成為最快的 Node 框架之一，它還具備對開發(fā)者友好、完全異步以及完全可擴展（通過其 hooks、插件和裝飾器）等優(yōu)點。
項目地址：https://github.com/fastify/fastify
4.Draggable
Draggable 是一個輕量級、響應(yīng)式的 JS 拖放庫，由 Shopify 出品。它提供了高級的拖放功能，能夠快速進行 DOM 重新排序，并且擁有清晰的 API 和訪問標記。同時，它也附帶了一些額外的模塊，便于你進行擴展。
項目地址：https://shopify.github.io/draggable/
5.Mousetrap
Mousetrap 是一個簡單、輕量的 JavaScript 庫，可用于捕獲和處理鍵盤事件。它支持 keypress、keydown 和 keyup 等鍵盤事件，適用于國際鍵盤布局和數(shù)字小鍵盤。
項目地址：https://craig.is/killing/mice
6.src2png
使用這個庫，你可以將源碼生成為語法高亮的圖片進行展示。你還可以了解下它的工作流程：src2png 啟動 Poi dev 服務(wù)程序，并使用 Puppeteer 運行 Headless Chrome 實例，完成渲染、裁剪后，最終保存截圖。
項目地址：https://github.com/mplewis/src2png
7.Stencil
Stencil 是一個簡單的 Web 組件編譯器。它結(jié)合了流行框架的設(shè)計理念，通過使用 TypeScript、JSX、虛擬 DOM，Reactive 數(shù)據(jù)綁定和異步渲染（類似于 React Fiber）來生成 Web 組件。
項目地址：https://stenciljs.com/docs/intro/
8.Words To Numbers
Words To Numbers 是一個有趣的 JS 庫，它能夠識別單詞并轉(zhuǎn)化為數(shù)字。如果傳遞的字符串為數(shù)字，它就會返回相應(yīng)的數(shù)值，否則它將返回初識字符串。你還可以使用 Jaro distance 進行模糊文本的***匹配，即使字符串中出現(xiàn)了拼寫有誤的單詞，也不影響匹配的結(jié)果。
項目地址：https://github.com/finnfiddle/words-to-numbers
9.Mail for Good
Mail for Good 是一個開源的電子郵件營銷管理軟件，可用于通過 Amazon 的 AWS 簡易郵件服務(wù)進行發(fā)送。它提供了電子郵件發(fā)送與管理的眾多功能，例如發(fā)送***制容量大小的電子郵件，導(dǎo)入 CSV 格式的電子郵件，創(chuàng)建模板，以及追蹤?quán)]件跳出率等。
項目地址：https://github.com/freeCodeCamp/mail-for-good
10.Devices.css
Devices.css 是一個使用純 CSS 實現(xiàn)移動設(shè)備的庫。它包含了一些目前主流的移動設(shè)備，如 iPhone X，Google Pixel 2 XL 和三星Galaxy S8。由于其高品質(zhì)的設(shè)計，可用于著陸頁面或者網(wǎng)頁快照。
項目地址：https://github.com/picturepan2/devices.css
11.AR.js
想在移動設(shè)備上體驗增強現(xiàn)實嗎？那么，AR.js 將會幫你完成體驗之旅。它完全基于 Web，可在使用 webgl 和 webrtc 的手機上流暢運行。
如果你也想嘗試一下，可以先打開這個演示：首先，在你的電腦瀏覽器中打開標記為 Hiro 的圖像，然后在手機的瀏覽器中打開 AR Web APP ，并將其轉(zhuǎn)到你的電腦屏幕上即可。
項目地址：https://github.com/jeromeetienne/AR.js
12.SentinelJS
SentinelJS 是一個小型 JavaScript 庫，可讓你使用 CSS 選擇器檢測新的 DOM 節(jié)點。當添加新的 DOM 節(jié)點時，它會使用 CSS 動畫效果之@keyframes規(guī)則，將其添加至瀏覽器的 animationstart 事件。
項目地址：https://github.com/muicss/sentineljs
13.Luma.GL
Luma.GL 是一個用于 GPU 數(shù)據(jù)計算與可視化的 WebGL2 框架。它提供了一種使用高性能的 WebGL2 在瀏覽器中展示大量數(shù)據(jù)的方法，并且它還引導(dǎo)了一個高級的 API 庫 – deck.gl
項目地址：https://github.com/uber/luma.gl
14.Zoomove
這是一個讓你在移動鼠標時動態(tài)縮放圖像的 jQuery 插件。它易于安裝與使用，提供了設(shè)置圖像url、縮放大小、光標指針等諸多屬性，并且兼容 Chrome 42+，F(xiàn)irefox 41+，Safari 9+，Opera 29+ 和 IE 9+。
如果想深入了解其使用方式，這還有一篇教程供你參考與學(xué)習(xí)。
項目地址：http://emersonthompson.com.br/zoomove/
15.Scrollanim
Scrollanim 是一個用于創(chuàng)建滾動動畫的輕量級 CSS3 + JS 庫。它是一個開源庫，且易于使用。由于使用了 Animate.css 以及擁有豐富的內(nèi)置 CSS3 動畫，所以你可以選擇淡入、淡出等動畫效果。
項目地址：http://scrollanim.kissui.io/
