15 個有趣的 JavaScript 與 CSS 庫
在十一月份的前端技術列表中,我們整合了一些令人感到驚歎的 GitHub 專案,其中包含了新的 CSS 框架、node.js包管理器,以及用於實現圖示、載入效果、工具提示的純 CSS 解決方案。
那麼,讓我們一起來看看吧。Have Fun !
1. Wing
Wing 是一個微型(壓縮後僅有4KB)響應式的 CSS 框架,它提供了一個 12 列響應式網格以及基礎的樣式元件集,可為你的建站工作打下堅實的基礎。當然,這個專案最酷的地方在於,它絕大多數的 HTML 元素都是自動樣式化的,而不需要任何額外的類。希望你會喜歡!
HERE:Wing 專案地址
2. Shave
Shave 是一個零依賴、輕量級的 JavaScript 外掛,它能截斷多行文字,以適應基於 max-height 設定好的 html 元素,並將原始文字字串儲存在隱藏的<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 檔案,以及一個空<div>
元素便可以快速的建立載入指示器。
HERE:CSS Loader 專案地址
6. Yarn
相信近期 Facebook 推出的開源 Node.js 包管理器 Yarn,大家已經有所耳聞了。它具備強大的快取系統,能夠大大降低包的安裝時間,並且能夠為參與一個專案的所有使用者維持相同的節點模組(node_modules)目錄結構,有助於減少難以追蹤的 bug 和在多臺機器上覆制。
雖然,它與 NPM 產生背景不同,但使用 Yarn 幾乎可以等同於使用 NPM ,開發人員需要更快的瞭解它哦!
HERE:Yarn 專案地址
7. Canvas Gauges
Canvas Gauges 是一個利用純 JavaScript 和 HTML5 Canvas(畫布)打造的可完全自定義的儀表,你可以用它來建立諸如機動車速度表、溫度計等型別的測量裝置。
由於它的程式碼量很小,並且沒有依賴,同時適用於物聯網裝置。你可以通過網站的示例來了解它。
HERE:Canvas Gauges 專案地址
8. CSS Icon
CSS Icon 是一個匯聚了500+ 純 CSS 程式碼實現的圖示集網站。使用起來也十分簡單,當你點選了某一個圖示,便會彈出圖示對應的 HTML 與 CSS 程式碼,同時你可以直觀的瞭解到 CSS 程式碼的什麼部分,實現了圖示的哪些元素。
如此棒的專案,是不是得給滿分呢?快來 Enjoy吧!
HERE:CSS Icon 專案地址
9. CurrencyFormatter.js
CurrencyFormatter.js 是一款簡單實用的純 JS 格式化貨幣庫。它支援 155 種不同國家的貨幣格式,以及超過 700 種不同語言的本地化設定。
此外,它還能處理某些不採用的貨幣格式,功能非常強大。
10. KUTE.js
一款具有高效能的原生 JavaScript 動畫引擎:KUTE.js. 它的核心庫提供了所有基本的動畫方法,你可以新增許多外掛來豐富 KUTE 的功能。同時,它還具備單獨的擴充套件,可以同時與jQuery、SVG、CSS屬性等一起工作。
HERE:KUTE.js 專案地址
11. Vue Material
Vue Material 是一個根據 Material Design 規範構建的輕量級 Vue.js 框架。它旨在提供一組可重用的高品質元件和一系列 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 就是由 bilibili 網站開源的 HTML5 Flash 視訊(FLV)播放器,純原生 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個有趣的JS和CSS庫(2018.7)JSCSS
- 推薦15個 JavaScript 和 CSS 庫JavaScriptCSS
- 2018 年 3 月 15 個有意思的 JavaScript 和 CSS 庫JavaScriptCSS
- 有趣的cssCSS
- CSS幾個有趣的屬性分享CSS
- 15個很有趣的開源專案推薦
- 【譯】10個有趣的JSCSS庫(2018.10)JSCSS
- [譯] 10 個有趣的 JSCSS 庫(2018.11)JSCSS
- 有趣:RAGapp等本週15個Github專案APPGithub
- 有趣的CSS彈跳動畫CSS動畫
- 15個本週Github上大模型等有趣專案Github大模型
- css3有趣的transform形變CSSS3ORM
- 15個本週Github有趣專案如Experts.js等GithubJS
- 【譯】React Native 常用的 15 個庫React Native
- JavaScript 有趣的冷知識:模板字串JavaScript字串
- 那些有趣/有用的 Python 庫Python
- 那些有趣/用的 Python 庫Python
- css15 CSS MarginsCSS
- 深度有趣 | 15 淺談中文分詞中文分詞
- 有趣的css—簡單的下雨效果2.0版CSS
- 有趣的css—隱藏元素的7種思路CSS
- JavaScript 有趣的冷知識:tagged template literalsJavaScript
- 6個有趣的Linux命令Linux
- JavaScript 設定CSS與注意事項JavaScriptCSS
- 有個開發者總結這 15 優雅的 JavaScript 個技巧JavaScript
- [分享] 最流行的 10 個 JavaScript 庫JavaScript
- 我遇見的哪些 CSS 中有趣的尺寸、寬高CSS
- 一些有趣的 CSS 魔法和佈局(下)CSS
- 一些有趣的 CSS 魔法和佈局(上)CSS
- 有趣的8個IT冷知識
- 一個有趣的this指向問題
- 一個有趣的鎖問題
- 11 個最好的 JavaScript 動態效果庫JavaScript
- CSS 佈局與“倉庫管理”的關係CSS
- 15個高效的MySQL資料庫查詢小技巧MySql資料庫
- 淺析HTML、CSS、JavaScript之間的聯絡與區別!HTMLCSSJavaScript
- 記一個有趣的數學題
- JavaScript獲取css的值JavaScriptCSS
- 最好的 3 個開源 JavaScript 圖表庫JavaScript