[TOC] ***** # 相關文章 [騰訊 AlloyTeam 出品－簡單、高效的幀動畫生成工具](https://github.com/gkajs) [Tencent AlloyTeam 2018](http://alloyteam.github.io/) [2017 年用于 UI 設計的 9 大 JavaScript 動畫庫](https://coyee.com/article/compare/12174-the-top-9-animation-libraries-for-ui-designers-in-2017-sitepoint) [CSS3 動畫卡頓性能優化解決方案](http://web.jobbole.com/93965/) # 框架 https://framework7.io/docs/dom7.html https://discourse.aurelia.io/ # 流行庫 dayjs # [Mediaelement.js](http://www.mediaelementjs.com) Mediaelement.js是一款HTML5視頻和音頻統一的框架，支持IE，Firefox，Opera，Safari，Chrome和iPhone，ipad、Andriod等移動端。支持MP4，OGG，MP3，WMV，WebM，WAV，WMA文件格式以及與websrt文件標題。 # rough 手繪出粗略草圖的效果 ## [Axios](https://saucelabs.com/u/axios) Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。 Features 從瀏覽器中創建 [XMLHttpRequests](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) 從 node.js 創建 [http](http://nodejs.org/api/http.html) 請求 支持 [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) API 攔截請求和響應 轉換請求數據和響應數據 取消請求 自動轉換 JSON 數據 客戶端支持防御 [XSRF](http://en.wikipedia.org/wiki/Cross-site_request_forgery) 使用 cdn: ~~~ <script src="https://unpkg.com/axios/dist/axios.min.js"></script> ~~~ ## [Pressure.js](https://github.com/stuyam/pressure/) 一款用于處理 force touch, 3D touch 和 pointer pressure 的 JS 庫。它擁有和大多數瀏覽器兼容的簡潔 API，內置壓感設備識別工具。它還支持多指觸控。 ## [Filepond](https://pqina.nl/filepond/) Filepond 是一個用于文件上傳的極小的 JavaScript 庫。它提供很多種上傳方式：你可以拖拽、復制粘貼文件，瀏覽文件系統，或者，去用一用這個庫的 API，內置圖片優化和自動圖片尺寸調整。 ## [Nerv](https://github.com/NervJS/nerv/) Nerv 是一款快速的、基于 virtual-dom 的 JavaScript 庫，可用作 React 的替代品。它十分輕量，兼容 IE8 和 React 16，且提供客戶端和服務端同構渲染。它支持很多 React 16 的特性，比如 Error Boundaries、Portals 以及許多其他的特性。 ## [List](https://github.com/funkia/list) 這個庫提供了一個快速的函數替代數組。它是不可變的，這使它成為那些正在嘗試函數式編程的人的最佳選擇。List 是在 TypeScript 中編寫的，并實現了所有 JavaScript 數組方法，還有其他一些額外的方法。 # 工具 ## [Flow](https://flow.org/) 為JS提供靜態檢驗，從這“TypeScript vs Flow”，可以看到一些很有用的信息，包括針對這兩者客觀的比較。值得一提的是，我在使用Flow去給IDE做反饋的時候遇到了一些困難，甚至都用到了Nuclide。 ## [Tern.js](ternjs.net/) 一個為JavaScrip設計的代碼分析引擎，也是我目前這一類中最喜歡的，它省略了編輯的步驟和注釋請求。我已經不再使用別的類似工具，因為Tern.js自身已經足夠好了，并且它幾乎可以毫無成本的為JS使用靜態系統。 ## [Prompts](https://github.com/terkelg/prompts) Prompts 是一款十分容易上手的，致力于為命令行應用和工具創建漂亮的提示輸入的JS 庫。它十分輕量，所有實現代碼均包含在庫中，無任何外部依賴。該庫專門使用了 promise 化接口，搭配async/await使用起來更棒。 # 爬蟲 ## [Headless Chrome Crawler](https://github.com/yujiosaka/headless-chrome-crawler) 這是一款用 Headless Chrome 開發的 web 爬蟲。它簡單的 API 能讓你很方便地創建并發、重試和延時方法。它支持深度優先和廣度優先爬蟲算法，支持插件式緩存存儲，例如 Redis，支持導出 CVS 和 JSON 格式。 ## [cheerio](https://github.com/cheeriojs/cheerio) cheerio是nodejs的抓取頁面模塊，為服務器特別定制的，快速、靈活、實施的jQuery核心實現。適合各種Web爬蟲程序。 # 動畫 ## [Kute.js](github.com/thednp/kute.js/) ## [popmotion](https://hub.fastgit.org/popmotion/popmotion) ## [Loaders.css](https://github.com/ConnorAtherton/loaders.css) 一個有趣的純 css 加載動畫集合。它使用和自定義起來都非常簡單方便。它包含多種動畫，例如變形、旋轉、淡入等等。動畫兼容所有現代瀏覽器，包括 IE9+。 ## [anime.js](http://animejs.com/) Javript動畫引擎anime.js 是一個靈活的輕型JavaScript動畫庫。 它與CSS，個別變換，SVG，DOM屬性和JS對象。 ## [AniJS.js](http://anijs.github.io/) 基于 CSS3 的動畫庫 ## [Velocity.js](http://velocityjs.org/) Velocity 是一個 JS 類庫，它是用來做頻繁動畫用的。Velocity 的 js 動畫“速度”是非常快的。它比JQuery 快，甚至比 CSS 動畫還要快。Velocity 的 API 和 $.fn.animate 很像，都是通過$()來操作。velocity()是另一種方法，相比 $().animate()。總而言之，你應該使用一致的animate效果，包括 fadeIn 和 fadeOut 方法（譯者：Velocity 提供了 fadeIn 和 fadeOut 方法）。 ## [Rocket](http://minimamente.com/example/rocket/) 當一個元素被移動到另一個元素時，Rocket 會創建一個動畫。 ## [bouncejs](http://bouncejs.com) Bounce.js 是一個漂亮的關鍵幀動畫生成工具和類庫，基于 CSS3 實現 ## [mo.js](http://mojs.io/) 挺有趣的一個動畫的圖形庫 mo.js，頁面效果真是酷炫 ## [ScrollReveal.js](https://scrollrevealjs.org/) ScrollReveal.js 用于創建和管理元素進入可視區域時的動畫效果，幫助你的網站增加吸引力 ## [gka.js](https://gka.js.org) 一款高效、高性能的幀動畫生成工具 # SVG 動畫庫 ## [vivus.js](https://github.com/maxwellito/vivus/) Vivus 是一個能動畫js類庫，它能夠給SVG圖像顯示出被畫出來的過程。Vivus是沒有其他類庫依賴的（比如jQuery)。你僅僅需要在頁面中加入這個.js文件，然后傳入需要被用來動畫的SVG部分就行。同時通過指定一些配置，它能夠在頁面加載后直接顯示動畫效果。 ## [Bonsai](http://bonsaijs.org/) Bonsai 是一個功能豐富的 JS 類庫，你能夠用它來畫和 animate 動態內容在網站上。這些內容包括了 HTML5 video、變化的 Canvas 和 SVG。通過 Bonsai 框架，你能畫一個簡單的矩形、甚至一段矩形，如果你喜歡甚至可以畫一個豐富的多人卡通游戲進去。 ## [Raphael](http://raphaeljs.com/) RaphaelJS 也通常是用來在網頁上畫SVG圖和動畫的。它兼容各種windows瀏覽器一直到IE6，因為如此，Raphael成為了市面上最受信賴的js（svg）類庫。有了它，你可以制作分析圖表、地圖、游戲就像在廚房做飯一樣。 ## [Snap](http://snapsvg.io/) SnapSVG 是另一個知名 JS 類庫，它是由 Dmitry Baranovskiy 開發的（Raphael 同樣也是）。同樣它也是 Adobe Web Software Group 來維護。和 Raphael 不同的是，它只提供了 ie 最新版支持。這使得 SnapSVG 在體積上小了許多（相比 Raphel）以實現相同的功能（比如 trim）和支持最新的功能。 ## [SVG.js](http://svgjs.com/) SVG.js 是一個輕量級的操作和動畫 SVG 類庫。你能夠操作變化方向、位置和顏色。這還沒完，你甚至可以自己實現插件等一些其他功能。這個實例可以attach一些插件，比如svg.filter.js，他可以為你的圖片實現 Gaussian blur, desaturase, compare, sepia 等等功能。 ## [Chartlist.js](http://gionkunz.github.io/chartist-js/) Chartist.js 是一個簡單的容易被接受的圖標庫，它是通過SVG繪制的。Chartist的宗旨是提供一個簡單的，輕量級的，非侵入式的圖表庫。你需要提供一些javascript配置對象做一些自定義配置，要不然它會使用默認的配置，即已經默認是排序過后的。 Chartist是通過 inline-SVG繪制的，所以它對DOM操作影響很小，相對于它提供的功能來說。而且意味著Chartist不會提供個人控制、水印、行為等等一些你能夠通過簡單的HTML, JavaScript and CSS實現的。 ## [Walkway](https://github.com/ConnorAtherton/walkway) Walkway 支持3種方式, path, line 和 用polyline來畫的svg線。它提供了一個很好的例子，繪制了一個PlayStation 的集合動畫。 # 視覺差 ## [parallax.js](http://matthew.wagerfield.com/parallax/) Parallax.js 是一款功能非常強大的 JavaScript 視覺差特效引擎插件。通過這個視覺差插件可以制作出非常炫酷的視覺差特效，可以檢測智能設備的方向。 ## [BasicScroll](https://github.com/electerious/basicScroll) 這款插件讓你能在你的設計中添加視差滾動動效。你可以直接在 CSS 中使用相應的變量或屬性，或者在 JS 中使用以獲得更好的動畫效果。它運行起來非常順滑，而且沒有任何框架依賴，能很好地應用在桌面和移動設備上，并且支持觸控事件。 # 跨平臺的桌面應用 ## [proton-native](https://github.com/kusti8/proton-native) proton-native 是一個結合了 node, libui, react 的一個產物，使用 node 的環境， react 的語法和 libui 的跨平臺調用 ui 控件的能力。proton-native 可用于構建跨平臺的桌面應用，構建方式簡單，構建的包輕量。 ## [Electron](https://github.com/electron/electron) Electron是一款利用Web技術開發跨平臺桌面應用的框架。electron 相對來說比 nw.js 靠譜。 ## [react-native-macos](https://github.com/ptmt/react-native-macos) React Native for macOS是使用Cocoa編寫桌面應用程序的實驗性工具 # 轉譯器 ## jsweet http://www.jsweet.org/ A transpiler from Java to TypeScript/JavaScript