近些年来,诞生了不少优秀的前端开发工具(类库)。JS的库和框架能简化工作流程、提供开发效率并更好地进行响应式设计。
鉴于 JavaScript 的库实在太多了,就算你花很多时间和精力,也不一定能找到优秀而且适用(于项目)的库。 (之前)我们已经讨论过了 优秀的 JavaScript 框架 ,而今天我们会根据 Github 上 star 的增长数,筛选出出一些最好的 JavaScript 库。 你很可能已经听说过 jQuery 或者 React 的大名了,二者都是非常有用的 JavaScript 库。当然,还有其他很多优秀的类库。
其中一些库几乎是每个项目都会引入的,其他的一些(库)则是专注于某些方面,当你的应用需要支持特殊的功能时就可以引入它们。为了更好地说明,我们按照类型整理出最好的 JavaScript 库,现在就让我们进入正题吧。
图表 & 图形
一、D3.js:https://d3js.org/
D3.js (Data-Driven Documents (译者注:即数据驱动文档)) 被誉为是在开源项目中最强大的数据可视化 JavaScript 库。它拥有完善的生态,基于 D3.js ,你能使用海量的插件与库。同时,社区的支持与大量的参考资料能使你轻易入门 D3.js 。
D3.js遵从 W3C 标准,几乎支持所有的现代浏览器。尽管它没有预建任何图表,无法开箱即用,但它提供了非常多的例子与非常有用的特性,如:enter 与 exit 的选择,能让你非常容易定位 bug 与绘制图表。
二、Chart.js:http://www.chartjs.org/
Chart.js 是一个为小型项目提供绘制图表功能的开源类库。如果你需要简单快速地绘制一个图表,那个 Chart.js 可以帮到你。它拥有8种图表类型,也可以组合使用,并提供强大的动画功能。若你希望快速开展项目,我们推荐这个类库,尽管它的功能并不多。Chartist.js 的特性都是类似的功能,它是基于 SVG 构建的,而 Chart.js 是基于 canvas。
三、FusionCharts:http://www.fusioncharts.com/
FusionCharts 被认为是目前最好的 Javascript 制图库。它是最全面的绘制图表解决方案,包含超过90种表格与1000种图,远胜于Google Charts 和 MetricsGraphics。
如今,FusionCharts 可以自豪地说,它的使用者超过24,000,不乏来自白宫、Oracle, IBM, Microsoft, Google 及其他大公司的客户。作为最流行的 JavaScript 库之一,FusionCharts 的扩展性良好,支持各种浏览器与设备,包括 IE6,7,8等。然而,在非商业项目与个人项目中,可以使用含有水印的版本,但若要使用不包含水印的版本,则需要购买许可。
四、Google Charts:https://developers.google.com/chart/
Google Charts 允许你构造任何东西,从普通线图到复杂的树状图都毫无问题。它配备了大量的预制图表、各种数据展示方式与多种自定义选项。(Google Charts)基于 HTML5 与 SVG 绘制图表,因而可以确保不同浏览器与平台之间的兼容性,为了兼顾老旧的 IE 版本,它还包含了 VML。
Google Charts 拥有详尽的文档与代码注释,并提供了渐进式的指导工具,能使任何想要使用 JavaScript 绘制图表的开发者都可以很好地入门 Google Charts 。然而,由于文件都是由 Google 的服务器发送给你的应用,你必须在线才能看到绘制的图表。
动画
五、GSAP:https://greensock.com/gsap
GSAP (GreenSock Animation Platform)是一个为大型企业便利地生成出色动画的优秀框架。超过两百万的网站使用(GSAP),其中包括福特、耐克、 Adobe 、微软、三星等大企业。
GSAP 在不同平台(译者注:PC端与移动端)和不同浏览器之间都有着良好的兼容性。它的特性基于 SVG 构建,能高效地完成 DOM 元素的拖动、旋转、翻页等。GSAP 也支持旋转、3D转换、按需加载等功能。
六、Bounce.js:http://bouncejs.com/
Bounce.js 是一个基于 CSS3 构建的精巧 JavaScript 动画库,(通过使用它)你能轻易地让创造出令人印象深刻的动画。它预设了10款动画,如rotate, swoosh, jelly, road runner(译者注:我没用过这个东东、不好翻译、有使用经验的同学麻烦告诉我一下应该如何翻译)等,(通过使用它们)可以创造出流畅的动画,你可以在任何项目中使用 Bounce.js 。
这个库是 MIT 许可而且完全免费,当你不需要太多动画类型、进行实验项目或只是想尝试一下使用动画的时候,它是一个非常好的选择。
七、Animate.css:https://daneden.github.io/animate.css/
Animate.css 是一个允许你对特定对象添加精巧动画的 CSS 库。它使用 CSS3 预设了超过50种动画,可添加到文本、表单、对象和图片中。由于 Animate.css 体积很小且跨浏览器支持,使得它在移动端项目、滑动条、首页等应用场景中大放异彩。
时间 & 日期
八、Moment.js:https://momentjs.com/
Moment.js 是一个轻量级的日期库,使得解析、操作、格式化日期和时间变得精确且简单。它提供了多语言支持、持续时间(统计)、日历表等,同时通过各种插件可以支持时区(切换)、整合 Twitter 等功能。但最重要的还是它可以让你避免直接操作原生的 JavaScript Date 对象(译者注:Date对象还真是挺反人类的,曾在国际项目中吃过大亏),其次是可以省略复杂的(时间)解析过程且减少(你分析时间的)代码量。
九、Date-fns:https://github.com/date-fns/date-fns
Date-fns 是一个能在浏览器和 Node.js 中操作时间和日期的先进工具。Date-fns 拥有超过140种的特性,得益于 API 的简洁设计,它们使用起来十分简单。由于 Date-fns 是模块化构建的,你在项目中可以只使用你需要的那一部分功能(而不必加载全部)。
其他
十、Math.js:http://mathjs.org/
Math.js 是一个为浏览器、Node.js及其他 JavaScript 引擎提供数学运算的开源库。它配备了许多(运算)功能与常量,能灵活地解析表达式,也提供了大数,单元,字符串,分数,矩阵,数组和符号的计算支持。
十一、Handsontable:https://handsontable.com/
Handsontable 是一个可轻松地为 Web 应用提供表格的 JavaScript 表格库。它通过不同的插件能实现不同的延伸。Handsontable 基于模块化构造,入门简单且社区活跃。这个表格库在免费版本中包含了超过30特性,专业版本则额外增加十多种功能。目前, Handsontable 常用于销售报告,人力资源规划,数据合并,数据库编辑等领域。
小结
JavaScript 库对于程序员或设计师而言,都是十分有用的工具。它们能为你的 Web 应用和网站添加很多强大的功能或提供更好的外观,这些都能提高用户体验。由于新的 JavaScript 库不断诞生,未来这篇文章会加入更多的推荐。