迎來(lái)了金秋 9 月，在這收獲的季節(jié)，Tutorialzine 又為我們帶來(lái)了哪些新鮮、有趣的前端資源呢？前端開(kāi)發(fā)者們，一起來(lái)看看有木有你需要的前端庫(kù)。

1. DisplayJS

DisplayJS 是一個(gè)幫助你渲染 DOM 的簡(jiǎn)易框架。使用它，你可以更容易地將 JS 變量遍歷到特定的 HTML 元素中，類(lèi)似于 React 或 Vue.js 處理模版的方式。

項(xiàng)目地址：【 傳送門(mén) 】

2. React Beautiful DnD

這是由 Atlassian 開(kāi)源的用于制作拖拽組件的 React 庫(kù)。它提供了強(qiáng)大、易用的 API，以及豐富的定制選項(xiàng)和控件。它所生成的組件，也具備了平滑的 GPU 動(dòng)畫(huà)效果。當(dāng)元素被拾取或重新排序時(shí)，其效果將會(huì)展示出來(lái)。

項(xiàng)目地址：【 傳送門(mén) 】

3. R2

這是一個(gè)全新版的 Node.js Request 庫(kù)，它提供了一個(gè)更輕量的 HTTP 客戶(hù)端解決方案。與 Request 庫(kù)不同的是，它建立在原生瀏覽器 Fetch API 之上，可被應(yīng)用于 Node.js. 并且，R2 在壓縮后僅有 16KB 大小。

項(xiàng)目地址：【 傳送門(mén) 】

4. Primer CSS

Primer CSS 是由 GitHub 的前端設(shè)計(jì)師研發(fā)的 CSS 框架。為了便于安裝，它的 23 個(gè)包被劃分為 3 個(gè)核心的元包，每個(gè)包都可以通過(guò) NPM 進(jìn)行獨(dú)立版本的發(fā)布。

項(xiàng)目地址：【 傳送門(mén) 】

5. Puppeteer

Puppeteer 是一個(gè)用于操縱 Headless Chrome 的封裝庫(kù)，它由 Chrome DevTools 官方團(tuán)隊(duì)進(jìn)行維護(hù)。你也可以在我們的文章 《使用 Node.js 自動(dòng)化Google Chrome》 中，了解更多我們嘗試的一些功能。

項(xiàng)目地址：【 傳送門(mén) 】

6. Marko

這是一款與 React 和 Vue.js 類(lèi)似的新型 JS 框架。它可以幫助你將應(yīng)用程序分解為獨(dú)立的組件，并可隨時(shí)間的推移，以及響應(yīng)用戶(hù)操作的變化顯示程序視圖的變化。同時(shí)，Marko 可以在應(yīng)用中自動(dòng)更新 DOM 來(lái)反饋數(shù)據(jù)。

項(xiàng)目地址：【 傳送門(mén) 】

7. Redocx

Redocx 是一個(gè)用于生成 Word 文檔的 React 庫(kù)。你可以使用 React 組件對(duì)文檔進(jìn)行定義，并通過(guò)命令行將其渲染為 Word 文檔。同時(shí)，此庫(kù)也包含了表格、圖像、頁(yè)眉、頁(yè)腳等豐富的組件供你選擇。

項(xiàng)目地址：【 傳送門(mén) 】

8. Fuzzysort

這是一個(gè)用于構(gòu)建模糊搜索界面的 JS 庫(kù)，類(lèi)似 Sublime Text 中的界面樣式。該庫(kù)會(huì)根據(jù)搜索查詢(xún)的匹配度，計(jì)算出搜索匹配數(shù)與時(shí)長(zhǎng)。

項(xiàng)目地址：【 傳送門(mén) 】

9. Trowel

Trowel 是一個(gè) SASS 工具包，它提供了一種寫(xiě)入 SASS 變量的新方法，允許你將多個(gè)變量分組到單個(gè)對(duì)象中，讓你的 SASS 代碼更易編寫(xiě)，更易閱讀。

項(xiàng)目地址：【 傳送門(mén) 】

10. Vivify

Vivify 是由純 CSS 寫(xiě)的動(dòng)畫(huà)庫(kù)，該庫(kù)提供了超過(guò) 50 種動(dòng)畫(huà)效果供你選擇。你只需要將 Vivify 的類(lèi)添加到相應(yīng)的元素，即可使其產(chǎn)生動(dòng)畫(huà)效果，并且添加 infinite 類(lèi)后，動(dòng)畫(huà)就可以循環(huán)播放了。

項(xiàng)目地址：【 傳送門(mén) 】

11. Tons of Checkboxes

這是一個(gè) CSS 復(fù)選框組件合集，它由大小不一、樣式各異的復(fù)選框組成。同時(shí)，所有的復(fù)選框都具備 4 種不同的尺寸，并且兼容 IE9+ 和所有現(xiàn)代瀏覽器。

項(xiàng)目地址：【 傳送門(mén) 】

12. Push

Push 是一個(gè)通用的桌面通知框架。它基于強(qiáng)大的 Notification API ，可作為可靠的跨瀏覽器解決方案，如果用戶(hù)的瀏覽器不支持最新的 API，則會(huì)沿用老版 API 實(shí)現(xiàn)。

項(xiàng)目地址：【 傳送門(mén) 】

13. react-imgpro

react-imgpro 是一個(gè)用于圖像處理的 React 組件。它可以利用 filters 進(jìn)行圖像處理，并生成 base64 格式的圖像。它簡(jiǎn)單易用，你只需要指定一個(gè)圖像的 URL，選擇相應(yīng)的 filters，并填寫(xiě)輸出圖像的大小與格式即可。

項(xiàng)目地址：【 傳送門(mén) 】

14. Lozad.js

Lozad.js 是一個(gè)高性能、可配置的純 JS 實(shí)現(xiàn)的懶加載器。它基于 Intersection Observer API ，沒(méi)有任何依賴(lài)，支持動(dòng)態(tài)懶加載添加元素。 同時(shí)，它也是輕量級(jí)庫(kù)，在 Gzip 壓縮后只有 535 字節(jié)大小。

項(xiàng)目地址：【 傳送門(mén) 】

15. Semiotic

這是一個(gè)結(jié)合了 React 和 D3 的數(shù)據(jù)可視化框架。它提供了 3 種類(lèi)型的框架（XYFrame，ORFrame，NetworkFrame），可幫助你生成一些酷炫圖表。而顯示數(shù)據(jù)的方式，也可以通過(guò)調(diào)整框架中設(shè)置或者添加 CSS 樣式進(jìn)行定制。

項(xiàng)目地址：【 傳送門(mén) 】

來(lái)自：http://www.jianshu.com/p/ec9ff744eb20