在JavaScript前端开发中,经常需要处理诸如处理表单、图表、绘制动画等,另外还有DOM渲染、格式化文本、处理字符串等。本文为你推荐20个Github最流行最好用的JavaScirpt前端开发库,这些开源库可以帮助你快速完成项目开发,缩短开发时间。
一、Algolia Places表单地址自动填充
Algolia Places库可以将任何<input>转为地址自动填充,它专门处理地址。你甚至可以向搜索中添加地图并显示位置,这个功能非常强大,而且它非常准确,速度也很快,用户体验非常友好。
官网地址:https://community.algolia.com/places/
Github地址:https://github.com/algolia/places/
二、anime.js动画库
最近很流行动画和微交互,anime.js是一个轻量而强大的JavaScript动画库,可以添加一些运动的横线到你的网站,它也可以与CSS、单独的转换、SVG、DOM属性和JavaScript对象一起工作,也就是说它可以用于任何项目。你可以到anime.js的官网体验一下,可谓是相当的炫酷!
官网地址:https://animejs.com/
Github地址:https://github.com/juliangarnier/anime/
三、AOS滚动动画库
ASO可以在一个页面上实现多种多样的滚动效果,ASO滚动JavaScript动画库可以帮助你在用于滚动页面时添加一些可爱的动画,从渐变效果到静态锚定位置。该库支持自定义多种动画效果,为你提升用户的体验效果。
官网地址:https://michalsnik.github.io/aos/
Github地址:https://github.com/michalsnik/aos
四、Bideo.js全屏HTML5视频背景
想要在容器或body本身的背景中播放视频吗?这个插件将帮助你做到这一点。Bideo.js库可以为你的网页添加一个视频背景,并且支持友好地适配屏幕的大小,使用中的video元素将自动适应容器的尺寸,它还会随着浏览器窗口的大小调整大小。
官网地址:https://rishabhp.github.io/bideo.js/
Github地址:https://github.com/rishabhp/bideo.js
五、Chart.js图表绘制库
Chart.js是一个相当友好的JavaScript图表绘制库,它可以帮助设计师和开发人员实现非常漂亮的图表。另外它提供相当多不同类型的图表。Chart.js官网提供的例子中就有12大类型,你完全可以自定义使用你喜欢的类型,如果你需要图表绘制,那么Chart.js可以成为首选对象。
Github地址:https://github.com/chartjs/Chart.js
六、Choreographer-js CSS动画库
Choreographer-js是一个简单轻量的JavaScript动画库,用于CSS动画,它的使用非常用于。你可以使用Choreographer-js动画库添加一些复杂而炫酷的CSS动画效果到你的网站。
官网地址:https://christinecha.github.io/choreographer-js/
Github地址:https://github.com/christinecha/choreographer-js
七、Cleave.js格式化表单输入
你是否需要在你输入时格式化表单的内容?例如一个电话号码字段,将你的1234567890转换为(123)456-7890。Cleave.js是一个JavaScript格式化表单库,它可以将相同的功能添加到你的站点。Cleave.js的概念非常简单,但它会带来比较好的用户体验,并在进行表单提交时提供一致的数据。
例如Cleave.js支持信用卡数字、电话数字、日期数字和时间的格式化,同时它也支持自定义样式。
官网地址:https://nosir.github.io/cleave.js/
Github地址:https://github.com/nosir/cleave.js/
八、D3.js
D3.js是一个基于数据操作文档的JavaScript库,D3帮助你使用HTML、SVG和CSS来处理数据。D3对web标准的强调为你提供了现代浏览器的全部功能,而不需要将自己绑定到专用框架,它结合了强大的可视化组件和数据驱动的DOM操作方法。
官网地址:https://d3js.org/
Github地址:https://github.com/d3/d3
九、Glimmer
Glimmer是最快的DOM渲染引擎之一,为初始渲染和更新提供了卓越的性能。Glimmer的架构类似于一个虚拟机(VM),它将你的模板编译成低级的代码,这样它就可以在不牺牲易用性的前提下尽可能快的运行。
Glimmer不要浪费时间编译应用程序,Glimmer应用程序是用Ember CLI构建的,因此你可以在几秒钟内获得一个准备生产的构建管道。不需要繁琐的配置文件。
Github地址:https://github.com/glimmerjs/glimmer.js
十、Granim.js
Granim.js这个小javascript库可以创建流畅的交互式渐变动画。
官网地址:https://sarcadass.github.io/granim.js/
Github地址:https://github.com/sarcadass/granim.js
十一、Multiple.js
如果你正在尝试创建有趣的背景视觉效果,你一定要看看multiplej .js。它允许你使用CSS在多个元素之间共享背景图像,这可以创建一个非常有趣的视觉效果。网站上有一个很好的例子,你可以到官网上查看。
官网地址: https://multiple.js.org/
Github地址:https://github.com/NeXTs/Multiple.js/
十二、Omniscient
Omniscient是另一个超级实用的插件,它将使你的开发人员的开发起来更加容易。它是一个JavaScript库,但也是一种考虑构建项目的方式。可以将无所不知的组件看作无状态的React组件,但它稍微优化了一些,并且有更多的选项。
官网地址:https://omniscientjs.github.io/
Github地址:https://github.com/omniscientjs/omniscient
十三、Parsley
如果你的下一个项目需要合并表单,Parsley可以为你实现这个功能。这个JavaScript库专注于表单验证,它的效果非常好!
Github地址:https://github.com/guillaumepotier/Parsley.js/
十四、propper.js
这个JavaScript库可以创建非常友好的弹出窗口,如果你想知道popper是什么,你可以把它想象成从一个从元素中迸发出来的小泡泡。Propper.js提供了一些奇妙的方法来排列它们,使它们与元素相结合,并使它们在任何大小的屏幕上都能顺畅地运行。
Github地址:https://github.com/FezVrasta/popper.js
十五、ReactJS
这是一个非常好的JS库,你可能已经使用过或听过了,强烈推荐!ReactJS旨在帮助开发者构建用户界面。
官网地址:https://reactjs.org/
Github地址:https://github.com/facebook/react/
十六、Slick轮播插件
官网地址:https://kenwheeler.github.io/slick/
Github地址:https://github.com/kenwheeler/slick/
十七、TaffyDB数据库
TaffyDB是一个开源的JS数据库,它将数据库特性引入到JavaScript应用程序中。如果你把一组数据打包成一个数组你会得到一个很像数据库表的东西,TaffyDB为这个概念带来了强大的数据库功能,并迅速改进了在JavaScript中处理数据的方式。TaffyDB的速度非常快,查询强大,提供非常多的功能,如计数,更新,并插入强大的跨浏览器支持,轻松扩展,与任何DOM库(jQuery, YUI, Dojo等)兼容。
官网地址:http://taffydb.com/
Github地址:https://github.com/typicaljoe/taffydb
十八、TweenJS
这个简单的JavaScript库提供非常强大的调整和动画HTML5和JavaScript的功能,可以帮助你添加一些真正有趣的互动到你的网站,(你可以到官网上查看)。它是CreateJS套件的一部分,它提供了更漂亮的JavaScript工具。
官网地址:https://www.createjs.com/tweenjs
Github地址:https://github.com/CreateJS/TweenJS
十九、Three.js 3D绘制框架
Three.js是一个相当强大的3D绘制库,对于任何对3D设计感兴趣的人来说,Three.js是一个非常有趣的JavaScript库。它可以帮助你创造令人难以置信的项目,并把你的设计带到生活中来!它除了绘制前端的基本元素外,还可以用于游戏设计。
官网地址:https://threejs.org/
Github地址:https://github.com/mrdoob/three.js/
二十、Voca字符串处理库
在JavaScript中处理字符串有时真的很麻烦,但是Voca 这个JavaScript库可以帮助你轻松地操作它们以简化工作。它提供了一些有用的功能,如更改大小写、修剪、截断等等。另外,它是采用模块化设计构建的,允许你自由地加载整个库或单个函数。
官网地址:https://vocajs.com/
Github地址:https://github.com/panzerdp/voca/