十一个你值得关注的优秀 Javascript 库

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