常用前端开发插件总结清单

日常前端开发的时候，尤其在使用一些常用的功能的时候，例如：表单，，动画效果，时间选择，文件上传，下拉框等功能。直接用插件可以让自己节省更多的开发时间，更多的去关心业务，自己封装还要更多的去解决各种兼容性问题。为此总结一些常用的插件，方便日后开发的时候，可以拿来就用。

插件集合代码仓库：https://gitee.com/SteveRocket/practice_fronted

_注意：_ 此处插件库排序按照字母排序。

accessible-html5-video-player
Paypal 出品的 Video 播放器。

accounting.js
轻量级的数字、货币转换库。

ace
Git地址 下载地址
Ace(基于浏览器的编辑器)是透过JavaScript所开发的线上程序语言编辑器插件，无论功能和性能都类似一般编辑器（Sublime、Vim和TextMate等），导入进任何网页或JavaScript应用程序都相当容易。值得一提的是Ace是由Cloud9 IDE的团队维护，并且是Mozilla Skywriter（Bespin）项目的延伸品，品质值得信赖。

特点：

超过120种语言的语法突出显示（可导入TextMate/Sublime/.tmlanguage 文件）。
超过20个主题（可导入TextMate/Sublime/.tmtheme文件）。
自动缩进和突出。
可选的命令行。
处理大量文件（最后检查，4,000,000 行是上限）。
完全可定制的键绑定，包括VIM和Emacs模式。
搜索并替换正则表达式。
突出显示匹配的括号。
在软标签和真实标签之间切换。
显示隐藏的字符。
使用鼠标拖放文本。
换行。
代码折叠。
多个游标和选择。
实时语法检查器（目前是 JavaScript / CoffeeScript / CSS / XQuery）。
剪切，复制和粘贴功能。
Ace admin
Git地址
Ace Admin是一款轻量且功能丰富的管理模板，干净且易于使用。

特点：

4种不同的皮肤。
基于Bootstrap 3的响应式设计（特别是3.1.1）。
使用Javascript和CSS构建器来构建您自己的最小文件。
在页面帮助中，您可以轻松选取任何元素并查看其工作原理。
自定义元素和插件。
Bootstrap，jQuery UI和第三方插件和元素。
alertify.js
Github地址： https://github.com/fabien-d/alertify.js.git

alertify.js是为了美化通知信息而生的JavaScript框架。

amp-what HTML字符实体图标
animatable
仅仅依靠 border-width 和 background-position 实现的各种动态效果。

Animate.css
Github地址： https://github.com/daneden/animate.css 预设了很多动画。
这款插件能让你的网页端拥有更加丰富的动画。纯CSS制作的动画效果的CSS集合，无需JavaScript，支持多浏览器的动画特效，即插即用。
animate.css把不同的动画绑定到了不同的类里，所以想要使用哪种动画，只需要把通用类animated和相应的类添加到元素上就行了。
主要包括Attention(晃动效果)、bounce(弹性缓冲效果)、fade(透明度变化效果)、flip(翻转效果)、rotate(旋转效果)、slide(滑动效果)、zoom(变焦效果)、special(特殊效果)这8类

下载https://raw.githubusercontent.com/daneden/animate.css/master/animate.css
或安装
npm install animate.css

AnythingZoomer
GitHub地址： https://github.com/CSS-Tricks/AnythingZoomer/

放大镜功能。

Arbiter.js
发布订阅。

Async.js
GitHub地址： https://github.com/caolan/async/

异步流程控制。

autosize
GitHub地址： https://github.com/jackmoore/autosize

让文本域(textarea) 的高度随着文字内容的变高而变高。

Awesomplete
输入的智能提示，自动补全。非常轻型的一个自动补全 JS 库, 没有任何依赖, 配置简单, 美观

axios
支持浏览器和Node.js 的HTTP请求工具。axios不支持jsonp。

backbone
强大的前端 MVC 库，鼻祖级前端库，最初为了配合 Rails 来模块化前端应用，兼容性良好 (兼容到 IE6)，插件丰富，性能良好。

bacon.js
GitHub地址： https://github.com/baconjs/bacon.js/
函数式编程，是一个小型 JavaScript 函数式响应编程库。

basket.js
基于LocalStorage的资源加载器，可以用来缓存script和css, 手机端使用速度快于浏览器直接缓存。

better scroll
文档 在PC上使用时的推荐配置： {scrollbar:true,mouseWheel: {speed: 20,invert: false}}

bgstretcher
全屏幻灯，会随着页面大小的变化而变化。

BigDecimal.js
提高精度的数字操作。

BigVideo.js
jQuery的一个插件, 用于实现大背景(视频、图片)效果。

blockUI
Lolding组件。

bootstrap
Github地址： https://github.com/twbs/bootstrap.git

Bootstrap，来自Twitter，是一个用于快速开发 Web 应用程序和网站的前端框架，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的，它简洁灵活，使得Web开发更加快捷。

下载https://github.com/twbs/bootstrap/archive/v5.3.0-alpha1.zip
或安装
npm i bootstrap@5.3.0-alpha1

Bowser
探测具体浏览器和版本

breach_core
Javascript 编写的 Browser (浏览器)。

c3
基于D3的图表库。

china-area-data
chosen
官网：Chosen Github：chosen
Chosen是一个jQuery的插件，目的是让又长又笨重的下拉式选单变得更友善。

Cleave.js
表单栏位格式化工具

ClickSpark.js
点击后的一些酷炫的效果

clipboard.js
GitHub地址： https://github.com/zenorocha/clipboard.js
Modern copy to clipboard. No Flash. Just 3kb gzipped.
下载地址：https://github.com/zenorocha/clipboard.js/archive/master.zip
复制内容到剪切板的小工具，不依赖Flash或任何臃肿的框架，大小只要3KB。

clone.js
对各种对象的深度复制。

coin-slider
兼容IE6，不过其切换方式是一块块的。不能配置切换方式。

color-animation
jquery的颜色渐变动画插件。jquery的动画不支持颜色值的变化。改库提供了这个支持。

Colorion
滑块/Range。背景是渐变色的按钮。hover 时有动画效果。

compass.js
指南针。只有在手机浏览器上才能用。

console-polyfill
调试能放心的使用 console.log()之类的console方法。

Cookie
增删改cookie的工具库。

core-video-to-gif
将视频截取为 gif 的前端 JavaScript 类库。

coverflow
苹果上唱片封面的效果（Apple Cover Flow UI effect）。

CSS shake
抖动动画。

CSS Spinners
加载(Loding)效果，CSS做的。

css3patterns
css3 做的可平铺纹理。浏览器兼容性不好。

CSSgram
用CSS3的Filter实现Instagram滤镜的库。

cycle2
普通的幻灯，竟然不支持垂直滚动。

d3.js
“数据驱动文档”，是一个基于数据操作 DOM 的Javascript库。理解起来，D3跟jQuery 很像，不过D3是面向数据可视化的，数据驱动操作DOM；而jQuery是面向web开发的，直接操作 DOM。

datatables
DataTables是jQuery的JavaScript函数库，目的是强化表格操作（如搜索、排序），并自动加入组件引入表格中，使用非常灵活简便。

特点：

1、Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
2、分页，即时搜索和排序。
3、几乎支持任何数据源：DOM，javascript，Ajax 和 服务器处理。
4、支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation。
5、各式各样的扩展: Editor, TableTools, FixedColumns….
6、丰富多样的option和强大的API。
7、支持国际化。
8、免费开源。
1
2
3
4
5
6
7
8
库下载地址：http://datatables.net/releases/DataTables-1.10.12.zip
官网地址：https://datatables.net/
DataTables中文网：http://datatables.club/

date-fns
现代时间库。

datedropper
datedropper是微型但功能强大的jQuery时间选择器。内建风格相当活泼可爱，可增加网站的活力。

datejs
day.js
和 Moment.js 一样的API。只有2KB。

deepmerge
深度合并数组和对象。

device.js
一个可以检测设备类型的工具，可以让我们根据不同的设备来为其定制响应的Javascript和CSS。

echarts
一个基于 JavaScript 的开源可视化图表库。
企业级图表库，百度开发。
editor_md
http://editor.md.ipandao.com/

emscripten
一款基于LLVM, 可以将C/C++转换成Javascript的工具，使得Javascript可以近乎Native的速度。

EventEmitter
浏览器版的 EventEmitter。

evil-icons
一个矢量图库，提供Ruby/Node等支持。

fancyBox
一个用于放大缩小图片、Web 内容或者多媒体元素的库，优雅大方。

FileAPI
GitHub地址： https://github.com/mailru/FileAPI
对文件选择框内的文件的一些处理。前端用户处理文件（拖放、多文件上传等）。

Fine Uploader
导入拖拽上传档案，跨浏览器、原生JavaScript又加上免费开源，只要载入JavaScript就可以开始运行，不依赖其他程序。

firefox.html
Firefox 在浏览器端的实现 —— HTML 版的 Firefox。

flatui
Flat-UI: Bootstrap的一款主题，简洁美观。

flexible.js
阿里团队开源的一个库。使用flexible.js轻松搞定各种不同的移动端设备兼容自适应问题。
flexible.js实现了rem自适应，有了flexible.js，就不必再为移动端各种设备兼容烦恼。
flexible.js是如何通过rem实现自适应的呢？通过rem与px的换算，可以把设计稿从px转到rem。再也不用为各种设备横行而担忧。rem是相对于根元素，这样就意味着，只需要在根元素确定一个px字号，则可以来算出元素的宽高。1rem=16px(浏览器html的像素，可以设定这个基准值），假如浏览器的html设为64px，则下面的元素则1rem=64px来运算。
flippant.js
一款能够漂亮的网页元素翻转效果库。

flow
一个用来检测 Javascript 语法错误的库， Facebook 出品。

Fluidbox
页面上内嵌图片的放大缩小效果，类似于 Medium 中的效果。

focusable
是页面上一个元素高亮的库。

foundation
另一款前端模版框架，类似于 Bootstrap。

Framework7
前端框架，是开发人员可以基于web技术构建IOS7程序。

functional.js
提够了一些Curry的支持。

G2
是一套基于可视化编码的图形语法，以数据驱动，具有高度的易用性和扩展性，用户无需关注各种繁琐的实现细节，一条语句即可构建出各种各样的可交互的统计图表。

gif.js
生成gif文件。

github-cards
用于生成 Github 信息卡片的库。

greensock
Hammer.js
是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件。

handlebarsjs
基于Mustache的模板引擎。

下载地址：https://s3.amazonaws.com/builds.handlebarsjs.com/handlebars.min-v4.7.7.js
或安装
npm install handlebars

hightchart
hover_css
多项针对链接、按钮、Logo、SVG和图片的移入CSS3特效。

hyhyhy
用于创建 基于 HTML5 的 演示文稿。

iCheck
一款漂亮的 Checkbox 插件。

infinite-scroll
是jQuery一个用来实现无限滚动的插件。滚动加载，滚动到最下到自动加载。

interact.js
一个适用于现代浏览器的，用于处理 手势、拖放、缩放等的库。

iScroll.js
iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。它可以在桌面，移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设备上提供最顺畅的体验。
功能强大，支持各种事件，不依赖任何的库，且插件丰富。
isotope
可以用来过滤、排列布局，实现美观的动态布局切换效果。

javascript-algorithms
Javascript 实现的各种算法集合。

jQTouch
用于辅助创建手机端的Web应用，支持主题、Zepto.js等。

jQuery-Animate-Enhanced
jQuery 动画库的一个增强，用于现代浏览器。

jquery-mobile
jQuery 团队开发的用于辅助手机端web app开发的库，基于HTML5。
是一个基于html5的用户界面系统，旨在使所有智能手机、平板电脑和桌面设备合集都能访问到响应性的网站和应用程序。

jQuery-One-Page-Nav
单页应用中一个用于处理导航栏的库。

jquery-qrcode
GitHub地址： https://github.com/jeromeetienne/jquery-qrcode
生成二维码图片的jQuery 插件，很好用。该插件是基于 QR Code Generator 开发的。

jquery-ui
jQuery 团队开发的 UI 相关的前端库，功能强大。

jquery-validation
jQuery 的一个插件，用于校验 Form 表单。

jQuery.countdown
jQuery 倒计时插件。

jquery.hotkeys
jQuery插件，用于绑定热键。

jquery.scrollTo（平滑滚动）
GitHub地址： https://github.com/flesler/jquery.scrollTo
在页面上以一个元素为起始以动画的方式移动(ScrollTo)到另一个元素， 支持回退等。
能够使得定位的时候更有体验感。

jquery.serializeJSON
jQuery 插件，用于将 form 表单序列化成JSON数据。

jquery.smartbanner
smartbanner 是从 IOS6 开始支持的一个新特性, 这个插件提供了对早期 IOS4/5 和 Android 的支持。

jQuery easing
是GSGD的插件，可提供高级的宽松选项。 当从一个幻灯片过渡到另一个幻灯片时，我们将使用它来添加良好的缓动运动。

js-sequence-diagrams
另一款可以根据文本生成流程图的库，类似于 Markdown 的语法。

js.js
Javascript 实现的 javascript JIT。

jScrollPane
自定义的滚动条，让所有浏览器都显示一样的滚动条。

jsonp
与服务器端交互。

kendo
knockout
前端 MVVM 框架，用于开发富前端应用。

lazy.js
类似于 underscore, 但是会延迟执行，某些场景下，性能会有很大的提升。

LazyLoad
官网：Lazy Load 延伸：Vanilla JavaScript Lazy Load Plugin
Lazy Load帮助高度较长的网页进行延迟载入图片，尚未浏览到该部分时，不会载入视角外的图片，提高效率。

lazysizes
功能强大的图片延迟加载工具，可以首先加载一个低质量的图片，然后再加载高质量的图片。

lightSlider
官网：JQuery lightSlider Github：sachinchoolur/lightslider
JQuery lightSlider是一个轻量且响应式的跑马灯/幻灯片，附有缩图导览。另外还有相本功能、垂直跑马灯，应用层面广泛。

lo-dash
与underscore.js的api基本一致。与underscore比其优势是，效率高；可自定义构建。

loading
几种Loading效果，基于SVG。

localForage
Mozilla 出品，用于离线存储，基于IndexedDB, WebSQL 或者 localStorage, 提供一致的接口。

lunr.js
magicbox_tencent
markdown-it
新型 Markdown 解析器，快速，支持插件。

Masonry_js
Masonry常用于瀑布流布局的插件。

matter-js
2D 物理效果引擎，碰撞、弹跳等。

mermaid
可以根据文本生成流程图，类似于 Markdown 的语法。

metrics-graphics
基于 D3 的图表库，简洁、高效，Mozilla 出品。

mithril.js
轻量型前端 MVC 框架，部分使用场景下性能优于 Angular.js 和 React。

mobile-angular-ui
基于angularjs和bootstrap的web app开发框架。

Modernizr
一个用来检测 HTML5 和 CSS3 支持情况的库

moment.js
轻量级专门解析、验证、操作、格式化日期的JavaScript函数库，Moment.js是为浏览器和Node.js而设计，所有组件都可以在这两个环境下运行。

money.js
轻量级货币转换库，web 和 node 皆可用。

move.js
基于 CSS3 的前端动画框架。

multiline
用于 Javascript 中的多行文本，类似于 Ruby 的 HERE Doc。

mustache
Github地址： https://github.com/janl/mustache.js/
下载地址：https://codeload.github.com/janl/mustache.js/zip/refs/tags/v4.2.0
GitHub示例：https://github.com/mustache/mustache.github.com

前端模板渲染引擎。
如果希望像传统模板引擎一样可以有函数和参数处理等等的功能，那么Mustache就不是好的选择。
Nano ID
Github地址： https://github.com/ai/nanoid/
生成 uuid。

octocard
用于生成 Github 信息卡片的库。

onepage-scroll
提供类似于 iPhone6 展示页类似的效果，适用于单页应用，兼容到 IE8。

pagination.js 分页
parallax.js
一个用于响应智能手机 orientation 的库。

parallel.js
前后端通用的一个并行库。

parameter
验证参数的格式。

PhotoSwipe
JS 的一个图片展示库。

pickadate.js
日期/时间选择器。

pigshell
一个由 Javascript 实现的Shell, 将互联网当做一个大的文件系统, 通过 cd/ls/cat……等命令, 可以访问 Facebook/Twitter/Google Drive等网络服务。

plyr
轻量, 小巧, 美观的 HTML5 视频播放器。

Prism（代码高亮）
代码高亮对于开发者的博客来说，是非常必要的，这款插件具有强大的代码高亮支持功能。

progressbar.js
简洁美观的进度条，扁平化。

qrcode-generator
各种语言的二维码生成工具。

qrcode.js（二维码生成）
GitHub地址： https://github.com/davidshimjs/qrcodejs
QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

Quill
Quill是当下高兼容性、强大、丰富且具有扩展性的文字编辑器。对于移动设备的支持度高。

rebound-js
实现部分物理效果，Facebook出品。

regexp-frequent正则工具库。
regulex
用于生成 正则表达式 的可视化流程图。
类似于Solr, 但是用于浏览器上的全文搜索引擎，可以为 JSON 创建索引，离线也可以使用。

rewrap
正则工具库。

rewrap-patch
正则工具库。

screenfull.js
全屏插件，支持各大浏览器。

ScrollMagic
神奇的滚动交互效果插件，可以在滚动的过程中设置各种各样的动态效果。

scrollMonitor
前端插件用来监控元素的滚动事件(进入、退出等)，性能很好。

scrollReveal.js
动态显示内容，使元素以非常酷帅的方式进入画布 (Viewpoint)。

ScrollToFixed
ScrollToFixed能够让网页的导航或表头等固定在顶部或底部，用户更方便的操作或查看信息。除了导航和表头，也可以固定其他内容，比如广告、返回顶部等。

seajs
前端模块加载器，解决模块化、依赖等问题。

sensor.js
在智能移动设备浏览器上，通过HTML5的api使用移动设备的功能。定位、运动、倾斜等。

skrollr
GitHub地址： https://github.com/Prinzhorn/skrollr
是一款轻量级且强大的js库，实现异步滚动的开源库。

slick
功能异常强大的一个图片滑动切换效果库。

slideout
一个非常美观的侧滑菜单。

slip
一个通过滑动或者拖拽来操控列表的库。

snabbt.js
一个利用Javascript和CSS transform的animation库。

SocialButtons
漂亮的社交按钮。

Sortable
现代浏览器上用于实现元素拖拽排序的功能，支持 Meteor, AngularJS, React，不依赖 jQuery。

Sortable
Sortable可以对HTML对象做拖拽移动清单的JavaScript函数库，支持移动设备且不依赖jQuery等其他第三方，并兼容Bootstrap等CSS框架。

Spectrum
Js实现的颜色选择器 (Colorpicker)。

stellar.js
GitHub地址： https://github.com/markdalgleish/stellar.js
视差滚动效果，前端用于实现异步滚动效果的库，现已不再维护。可轻松创建视差滚动站点。

streamjs
用流的方式来对数组，对象进行系列操作。

strman
字符串操作库。它为各种实用程序、格式选项和字符串转换，提供了超过 60 种实用的方法。

Sugar
在原生对象上增加一些工具方法。

summernote
WYSIWYG 富文本编辑器。

sweetalert
一个非常美观的用于替换浏览器默认 alert 的库。

swipebox
jQuery 插件，用于处理移动端的触摸事件。

swiper
GitHub地址： https://github.com/nolimits4web/swiper/
Swiper中文网

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
PPT动态播放效果。幻灯片/跑马灯插件，使用效能高，并可运用在移动设备上及混合式App上，不但在最新版本的IOS上运行良好，在Android、Windows Phone 8和PC设备上一样表现优秀。要注意的是，Swiper并不兼容所有平台设备，而是专注于当下主流平台设备的兼容性和效能上。
同时Swiper也是Framework7和Ionic Framework的组件的一部分。
支持硬件加速。性能良好。
switchery
IOS 7上Switch的JS实现, 支持 IE8 及以上浏览器。

Tabslet
一个用于页签的jQuery插件，轻量级且操作容易。

textillate_js
由Twitter推出，灵活扎实的建议列表函数库。

TheaterJS
GitHub地址： https://github.com/Zhouzi/TheaterJS
一个用于模拟人输入状态的JS库。

three_js
易于使用且轻量级3D函数库，提供canvas、SVG、CSS3 3D和WebGL渲染器。

timesheet.js
基于 HTML5 & CSS3 时间表。

TinyMCE-HTML编辑器
TinyMCE是功能齐全且轻量级的HTML编辑器，但需要在IE11以上才可以运行。

toastr
toastr是一个提示信息JavaScript函数库，必须载入jQuery，宗旨是利用简单的程序函数库来做定制化跟扩展。toastr提供一个范例页面toastr examples，方便自订效果跟产生源码，类似Customize and download · Bootstrap的效果，方便使用者加快流程，先前介绍的ALERTIFY JS整体层面比toastr好很多，无论原生JavaScript以及整体文件大小和功能延展性，但toastr简单使用的操作模式，如果有旧项目是在jQuery的环境下，要做一些定制化功能，或许就是不错的选择。

Tocbot（目录生成）
GitHub地址： https://github.com/tscanlin/tocbot/releases
根据文章的标题级别自动生成目录对一篇文章来说是一个比较实用的功能。

todomvc
分别基于 AngularJS/EmberJS/Backbone等实现的 TODO List, 帮助开发者选择前端 MVC 库

Toolbar_js
一个产生工具列的jQuery插件。

totoro
稳定的跨浏览器测试工具。

Touch.js
Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护，也是在百度内部广泛使用的开发工具。

手势库专为移动设备设计，请在Webkit内核浏览器中使用。
原生出色的加速度感知与缓动效果，优秀的单指旋转手势。
无侵入设计，与现有代码与框架共存。
基于原生事件，支持事件代理, 性能更好。
极简的API，秒速上手，玩转手势。
trix
Basecamp 公司出品的富文本编辑器，简洁小巧。

typeahead_js
由Twitter推出，灵活扎实的建议列表函数库。

underscore.js
中文文档：https://www.underscorejs.cn/
GitHub地址： https://github.com/jashkenas/underscore

一个 JavaScript 实用库，提供了一整套函数式编程的实用功能，但是没有扩展任何 JavaScript 内置对象。
Underscore 提供了100多个函数,包括常用的: map, filter, invoke — 当然还有更多专业的辅助函数,如:函数绑定, JavaScript 模板功能,创建快速索引, 强类型相等测试, 等等.
Underscore 是 DocumentCloud 的一个开源组件。
vivus
可以动态描绘 SVG 的 JS 库, 支持多种动画。

Watch.js
监视对象或属性的变化。

Waypoints（滚动侦测）
Github地址： https://github.com/imakewebthings/waypoints

一个jQuery插件，每当您滚动到某个元素时，该插件都会执行一个函数。这使站点上的导航可以根据滚动条的位置突出显示我们正在播放的幻灯片。

能够侦测滚动时，现在正显示的内容，可以根据需要改变组件的显示与隐藏。
当滚动到某个元素时，Waypoints是触发函数的最简单方法。
下载 https://github.com/imakewebthings/waypoints/zipball/latest
或安装
npm install waypoints

web-animations-js
Javascript 实现的 Web Animation API。

Wookmark-jQuery
jQuery 的一个插件，可以用来实现瀑布流的效果。

wysihtml
富文本编辑器，适用于现代浏览器。

Zepto.js
用于现代浏览器的兼容jQuery的库。
Zepto的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery。是一个轻量级的针对现代高级浏览器的JavaScript库，与JQuery有着类似的API。Zepto设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API，所以能把主要的精力放到应用开发上。

zoomooz
jQuery 插件，用来处理浏览器缩放。

zTree – jQuery 树插件
https://treejs.cn/v3/main.php#_zTreeInfo
文件树形视图控件