2017年超棒前端相关工具类库大荟萃

关注「实验楼」，每天分享一个项目教程

在这篇文章中，我将介绍一组个人觉得非常实用并且有益的工具和类库，希望对大家的工作也可以有比较大的帮助。

正文共：2035字

预计阅读时间：5分钟

又到了新的一年，在过去的2017年，我相信大家都在工作和开发中遇到了很多有趣的前端代码工具或者是类库， 希望在来到的2018年， 我们依然能够找到更多有用的辅助前端工具及其类库。在这篇文章中，我将介绍一组个人觉得非常实用并且有益的工具和类库，希望对大家的工作也可以有比较大的帮助， 当然，如果你也有自己收集的类库或者前端工具， 请不吝赐教， 给我留言哈~KUTE.js

作为一个javascript的动画类库来说， 并没有什么非常有新鲜感的地方， 但是它最大的特色在于：性能突出。 在现在的web动画中， 我们无法避免的会遇到性能上的问题， 我们必须去应对和解决移动设备或者连接缓慢的问题。

访问以上网站，你可以看到一系列的复杂动画效果， 但动画效果流畅并且没有卡顿， 不信的话，大家可以尝试一下， 另外两个加分点：

非常专业的API

非常好的callback系统设计

使用非常简单，如下：

varel=document.querySelector(".box");

vartween=KUTE.fromTo(

el,

{translateX:,rotateX:},

{translateX:100,rotateX:25},

{perspective:100,duration:2000}

);

tween.start();

ScrollDir

scrolldir是一个非常简单，迷你和创意十足的js工具，可以帮助你做一些相关滚动检测的功能。

使用这个迷你的js，你不需要使用javascript，只需要使用css即可控制页面布局，代码如下：

[data-scrolldir="down"].header-banner{

top:-100px;

}

[data-scrolldir="up"].footer-banner{

bottom:-100px;

}

CodeSandBox

越来越多的公司开始使用vue和react来开发web应用， 因此出现了很多不同的IDE， 用来帮助开发人员使用特定类库或者框架来开发web相关应用，CodesandBox就是其中的一个， 它可以用来开发react，vue，preact和Svelte。codesandbox的一个非常不错的特性就是添加npm包到左边的边栏， 叫依赖关系。 这里有个添加包，允许你搜索相关的包。

如果你的应用缺少了依赖， 这个工具也会提示出错，并且提示添加新的包。更多功能，大家可以看看工具主站，工具不错，大家可以体验一下。

AmplitudeJS

这是一个不依赖任何类库的现代HTML5音频播放器。相信很多音乐制作爱好者会非常欣赏这个web应用。

这个播放器允许你创建自定义设计和布局， 这有个例子：

Amplitude.init({

songs:[

{

name:"Song Name One",

artist:"Artist Name",

album:"Album Name",

url:"/path/to/song.mp3",

cover_art_url:"/path/to/artwork.jpg"

},

{

name:"Song Name Two",

artist:"Artist Name Two",

album:"Album Name Two",

url:"/path/to/song.mp3",

cover_art_url:"/path/to/artwork.jpg"

},

{

name:"Song Name Three",

artist:"Artist Name Three",

album:"Album Name Three",

url:"/path/to/song.mp3",

cover_art_url:"/path/to/artwork.jpg"

}

]

});

更多超棒的类库

BunnyJS一个基于ES6的前端框架， 广告词儿如下：如jQuery般简单， 比jQuery UI更优越， 和React一样强大Keyframe-tool一个将CSS动画转化成keyframe对象的命令行工具， 以便适用于web animation APIsvgi一个命令行工具，可以用来检查SVG文件内容， 提供svg文件相关信息，例如， 节点数量， 路径， 容器，形状， 树状层次等等以上就是我们收集的一些超棒的类库，希望大家能够喜欢， 有任何其它类库推荐，给我们留言哈~~

作者：FT姥爷

出处：igeekbar

链接：http://igeekbar.com/igeekbar/post/924.htm

学习更多：

备受好评的 楼+「 Python实战 」、「Linux运维与Devops实战 」正在优惠报名中——

实验楼CEO、CTO、高级工程师亲自上阵，通过直播、录播、全程助教、作业挑战等方式，带你12周内打通Python、Linux的任督二脉，成为拥有真正工作能力的IT工程师！