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

MelodyCorso 7年前
   <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>