迎來了金秋 9 月，在這收獲的季節(jié)，Tutorialzine 又為我們帶來了哪些新鮮、有趣的前端資源呢？前端開發(fā)者們，一起來看看有木有你需要的前端庫。
1.DisplayJS
DisplayJS 是一個(gè)幫助你渲染 DOM 的簡易框架。使用它，你可以更容易地將 JS 變量遍歷到特定的 HTML 元素中，類似于 React 或 Vue.js 處理模版的方式。
項(xiàng)目地址：【傳送門】
2.React Beautiful DnD
這是由 Atlassian 開源的用于制作拖拽組件的 React 庫。它提供了強(qiáng)大、易用的 API，以及豐富的定制選項(xiàng)和控件。它所生成的組件，也具備了平滑的 GPU 動(dòng)畫效果。當(dāng)元素被拾取或重新排序時(shí)，其效果將會(huì)展示出來。
項(xiàng)目地址：【傳送門】
3.R2
這是一個(gè)全新版的 Node.js Request 庫，它提供了一個(gè)更輕量的 HTTP 客戶端解決方案。與 Request 庫不同的是，它建立在原生瀏覽器 Fetch API 之上，可被應(yīng)用于 Node.js. 并且，R2 在壓縮后僅有 16KB 大小。
項(xiàng)目地址：【傳送門】
4.Primer CSS
Primer CSS 是由 GitHub 的前端設(shè)計(jì)師研發(fā)的 CSS 框架。為了便于安裝，它的 23 個(gè)包被劃分為 3 個(gè)核心的元包，每個(gè)包都可以通過 NPM 進(jìn)行獨(dú)立版本的發(fā)布。
項(xiàng)目地址：【傳送門】
5.Puppeteer
Puppeteer 是一個(gè)用于操縱 Headless Chrome 的封裝庫，它由 Chrome DevTools 官方團(tuán)隊(duì)進(jìn)行維護(hù)。你也可以在我們的文章《使用 Node.js 自動(dòng)化Google Chrome》中，了解更多我們嘗試的一些功能。
項(xiàng)目地址：【傳送門】
6.Marko
這是一款與 React 和 Vue.js 類似的新型 JS 框架。它可以幫助你將應(yīng)用程序分解為獨(dú)立的組件，并可隨時(shí)間的推移，以及響應(yīng)用戶操作的變化顯示程序視圖的變化。同時(shí)，Marko 可以在應(yīng)用中自動(dòng)更新 DOM 來反饋數(shù)據(jù)。
項(xiàng)目地址：【傳送門】
7.Redocx
Redocx 是一個(gè)用于生成 Word 文檔的 React 庫。你可以使用 React 組件對(duì)文檔進(jìn)行定義，并通過命令行將其渲染為 Word 文檔。同時(shí)，此庫也包含了表格、圖像、頁眉、頁腳等豐富的組件供你選擇。
項(xiàng)目地址：【傳送門】
8.Fuzzysort
這是一個(gè)用于構(gòu)建模糊搜索界面的 JS 庫，類似 Sublime Text 中的界面樣式。該庫會(huì)根據(jù)搜索查詢的匹配度，計(jì)算出搜索匹配數(shù)與時(shí)長。
項(xiàng)目地址：【傳送門】
9.Trowel
Trowel 是一個(gè) SASS 工具包，它提供了一種寫入 SASS 變量的新方法，允許你將多個(gè)變量分組到單個(gè)對(duì)象中，讓你的 SASS 代碼更易編寫，更易閱讀。
項(xiàng)目地址：【傳送門】
10.Vivify
Vivify 是由純 CSS 寫的動(dòng)畫庫，該庫提供了超過 50 種動(dòng)畫效果供你選擇。你只需要將Vivify的類添加到相應(yīng)的元素，即可使其產(chǎn)生動(dòng)畫效果，并且添加infinite類后，動(dòng)畫就可以循環(huán)播放了。
項(xiàng)目地址：【傳送門】
11.Tons of Checkboxes
這是一個(gè) CSS 復(fù)選框組件合集，它由大小不一、樣式各異的復(fù)選框組成。同時(shí)，所有的復(fù)選框都具備 4 種不同的尺寸，并且兼容 IE9+ 和所有現(xiàn)代瀏覽器。
項(xiàng)目地址：【傳送門】
12.Push
Push 是一個(gè)通用的桌面通知框架。它基于強(qiáng)大的 Notification API ，可作為可靠的跨瀏覽器解決方案，如果用戶的瀏覽器不支持最新的 API，則會(huì)沿用老版 API 實(shí)現(xiàn)。
項(xiàng)目地址：【傳送門】
13.react-imgpro
react-imgpro 是一個(gè)用于圖像處理的 React 組件。它可以利用 filters 進(jìn)行圖像處理，并生成 base64 格式的圖像。它簡單易用，你只需要指定一個(gè)圖像的 URL，選擇相應(yīng)的 filters，并填寫輸出圖像的大小與格式即可。
項(xiàng)目地址：【傳送門】
14.Lozad.js
Lozad.js 是一個(gè)高性能、可配置的純 JS 實(shí)現(xiàn)的懶加載器。它基于 Intersection Observer API，沒有任何依賴，支持動(dòng)態(tài)懶加載添加元素。 同時(shí)，它也是輕量級(jí)庫，在 Gzip 壓縮后只有 535 字節(jié)大小。
項(xiàng)目地址：【傳送門】
15.Semiotic
這是一個(gè)結(jié)合了 React 和 D3 的數(shù)據(jù)可視化框架。它提供了 3 種類型的框架（XYFrame，ORFrame，NetworkFrame），可幫助你生成一些酷炫圖表。而顯示數(shù)據(jù)的方式，也可以通過調(diào)整框架中設(shè)置或者添加 CSS 樣式進(jìn)行定制。
項(xiàng)目地址：【傳送門】
感謝你的閱讀。若你有所收獲，歡迎點(diǎn)贊與分享。
注：
- 本文版權(quán)歸原作者所有，僅用于學(xué)習(xí)與交流；
- 如需轉(zhuǎn)載譯文，煩請(qǐng)按下方注明出處信息，謝謝！
英文原文：15 Interesting JavaScript and CSS Libraries for September 2017
作者：Danny Markov
譯者：IT程序獅
譯文地址：http://m.itdecent.cn/p/ec9ff744eb20
更多文章：
