15 個有趣的 JavaScript 與 CSS 庫 詳情

在十一月份的前端技術列表中，我們整合了一些令人感到驚嘆的GitHub 項目，其中包含了新的CSS 框架、node.js套件管理器，以及用於實現圖標、加載效果、工具提示的純CSS 解決方案。

那麼，讓我們一起來看看吧。 Have Fun ！

1. Wing

Wing 是一個微型（壓縮後僅有4KB）響應式的CSS 框架，它提供了一個12 列響應式網格以及基礎的樣式組件集，可為你的建站工作打下堅實的基礎。當然，這個項目最酷的地方在於，它絕大多數的 HTML 元素都是自動樣式化的，而不需要任何額外的類別。希望你會喜歡！

HERE：Wing 專案位址

2. Shave

Shave 是一個零設定依賴、輕量級的JavaScript 插件，它能截斷多行文字，以適應基於好max的html 元素，並將原始文字字串儲存在隱藏的<span></span>元素中，以便你的文字能夠完整地保留在頁面中。 Shave 不依賴任何函式庫，同時它在 jQuery 中提供了一個獨立版本的插件。

HERE：Shave 專案位址

3. Cerebral

一個 JavaScript MVC 應用程式狀態管理器，並且它有獨立的偵錯器。在 Cerebral 中，應用程式的狀態儲存在單一的樹模型中，該模型管理所有伺服器端和用戶端的狀態。

而調試器具有對模型、控制器以及視圖的即時管理權限。

HERE：Cerebral 專案位址

4. Wenk

Wenk 是一個輕量級純 CSS 寫的文字工具提示庫。雖然它的壓縮版僅有700字節，但它依然能夠管理並提供一些客製化選項。諸如不同提示工具的大小、位置和文字對齊。

HERE：Wenk 專案位址

5. CSS Loader

CSS Loader 是一個非常有用載入器。它允許開發人員利用純 CSS 文件，以及一個空<p></p>元素便可以快速的建立載入指示器。

HERE：CSS Loader 專案地址

6. Yarn

相信近期 Facebook 推出的開源 Node.js 包器 Yarn，大家已經聞到了。它具備強大的快取系統，能夠大幅降低套件的安裝時間，並且能夠為參與一個專案的所有使用者維持相同的節點模組（node_modules）目錄結構，有助於減少難以追蹤的bug 和在多台機器上複製。

雖然，它與 NPM 產生背景不同，但使用 Yarn 幾乎可以等同於使用 NPM ，開發人員需要更快的了解它哦！

HERE：Yarn 專案地址

7. Canvas Gauges

Canvas Gauges 是一個利用純Java諸如機動車速度表、溫度計等類型的測量設備。

由於它的程式碼量很小，並且沒有依賴，同時適用於物聯網設備。你可以透過網站的範例來了解它。

HERE：Canvas Gauges 專案位址

8. CSS Icon

CSS Icon 是一個匯集了500+ 純 CSS 程式碼實作圖示的集網站。使用起來也十分簡單，當你點擊了某一個圖標，便會彈出圖標對應的 HTML 與 CSS 程式碼，同時你可以直覺的了解到 CSS 程式碼的什麼部分，實現了圖標的哪些元素。

如此棒的項目，是不是得給滿分呢？快來 Enjoy吧！

HERE：CSS Icon 專案地址

9. CurrencyFormatter.jsCurrencyFormatter.js 是一款簡單實用的純 JS 格式化貨幣庫。它支援 155 種不同國家的貨幣格式，以及超過 700 種不同語言的在地化設定。

此外，它還能處理某些不採用的貨幣格式，功能非常強大。

HERE：CurrencyFormatter.js 專案地址

10. KUTE.js

一款具有高效能的原生 JavaScript 動畫引擎：KUTE.js. 它的核心庫提供了所有基本的動畫方法，你可以添加許多插件來豐富 KUTE 的功能。同時，它還具備單獨的擴展，可以同時與jQuery、SVG、CSS屬性等一起工作。

HERE：KUTE.js 專案位址

11. Vue Material

Vue Material 是根據 Material Design 規範所建構的輕量級框架。它旨在提供一組可重複使用的高品質元件和一系列 UI 元素，透過 Vue2.0 支援現代的 Web 瀏覽器來建立應用程式。

該函式庫也很容易實現，除了 Vue.js 之外沒有任何依賴。

HERE：Vue Material 專案位址

12. Test Cafe

Test Cafe 是一個純 Node.js 編寫的用於測試 Web 應用程式端到端的解決方案。它基於 Node.js，並且不需要安裝 NPM 套件之外的任何東西——不需要瀏覽器插件以及編譯器。

一旦你寫了測試，運行 Test Cafe，它將為你進行瀏覽器測試、收集結果並建立報告。

HERE：Test Cafe 專案地址

13. Core.css

Core.css 是用於建立響應式網站的輕量級框架。它壓縮後僅有 1.3kb，同時它沒有預先設定的元素和內建動畫。所以適用於建置任何小型的 Web 專案。

HERE：Core.css 專案地址

14. Flv.js

B站相信大家不會陌生，而Flv.js播放器，純原生JavaScript 開發（ECMAScript 6 編寫） ，沒有用到Flash。

它的工作原理是 Flv.js 在 JavaScript 中串流解析 flv 檔案流，並即時轉封裝為 fmp4 ，透過 Media Source Extensions 餵給瀏覽器，實現了 FLV 格式視訊的播放。

HERE：Flv.js 專案位址

15. Next.js

Next.js 是一個基於 React 的通用 JavaScript 框架。它提供了一種便利的方式來創建新的 JavaScript Web 應用程式。開發人員不必在搭建 Webpack 或 Babel 的配置上花費太多的時間了。

HERE：Next.js 專案地址

譯者註：關於 Next.js 的詳細介紹可以看這裡。

以上就本文所有的分享，希望你能找到適合你專案的前端函式庫。

 以上就是15 個有趣的 JavaScript 與 CSS 函式庫 詳情的內容，更多相關內容請關注PHP中文網（www.php.cn）！