[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