常用前端开发插件总结清单,日常前端开发的时候,尤其在使用一些常用的功能的时候,例如:表单,,动画效果,时间选择,文件上传,下拉框等功能。直接用插件可以让自己节省更多的开发时间,更多的去关心业务,自己封装还要更多的去解决各种兼容性问题。为此总结一些常用的插件,方便日后开发的时候,可以拿来就用。
插件集合代码仓库:https://gitee.com/SteveRocket/practice_fronted
_注意:_ 此处插件库排序按照字母排序。
Paypal 出品的 Video 播放器。
轻量级的数字、货币转换库。
Git地址 下载地址
Ace(基于浏览器的编辑器)是透过JavaScript所开发的线上程序语言编辑器插件,无论功能和性能都类似一般编辑器(Sublime、Vim和TextMate等),导入进任何网页或JavaScript应用程序都相当容易。值得一提的是Ace是由Cloud9 IDE的团队维护,并且是Mozilla Skywriter(Bespin)项目的延伸品,品质值得信赖。
特点:
Git地址
Ace Admin是一款轻量且功能丰富的管理模板,干净且易于使用。
特点:
Github地址: https://github.com/fabien-d/alertify.js.git
alertify.js是为了美化通知信息而生的JavaScript框架。
仅仅依靠 border-width 和 background-position 实现的各种动态效果。
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
GitHub地址: https://github.com/CSS-Tricks/AnythingZoomer/
放大镜功能。
发布订阅。
GitHub地址: https://github.com/caolan/async/
异步流程控制。
GitHub地址: https://github.com/jackmoore/autosize
让文本域(textarea) 的高度随着文字内容的变高而变高。
输入的智能提示,自动补全。非常轻型的一个自动补全 JS 库, 没有任何依赖, 配置简单, 美观
支持浏览器和Node.js 的HTTP请求工具。axios不支持jsonp。
强大的前端 MVC 库,鼻祖级前端库,最初为了配合 Rails 来模块化前端应用,兼容性良好 (兼容到 IE6),插件丰富,性能良好。
GitHub地址: https://github.com/baconjs/bacon.js/
函数式编程,是一个小型 JavaScript 函数式响应编程库。
基于LocalStorage的资源加载器,可以用来缓存script和css, 手机端使用速度快于浏览器直接缓存。
文档 在PC上使用时的推荐配置: {scrollbar:true,mouseWheel: {speed: 20,invert: false}}
全屏幻灯,会随着页面大小的变化而变化。
提高精度的数字操作。
jQuery的一个插件, 用于实现大背景(视频、图片)效果。
Lolding组件。
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 [email protected]
探测具体浏览器和版本
Javascript 编写的 Browser (浏览器)。
基于D3的图表库。
官网:Chosen Github:chosen
Chosen是一个jQuery的插件,目的是让又长又笨重的下拉式选单变得更友善。
表单栏位格式化工具
点击后的一些酷炫的效果
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。
对各种对象的深度复制。
兼容IE6,不过其切换方式是一块块的。不能配置切换方式。
jquery的颜色渐变动画插件。jquery的动画不支持颜色值的变化。改库提供了这个支持。
滑块/Range。背景是渐变色的按钮。hover 时有动画效果。
指南针。只有在手机浏览器上才能用。
调试能放心的使用 console.log()之类的console方法。
增删改cookie的工具库。
将视频截取为 gif 的前端 JavaScript 类库。
苹果上唱片封面的效果(Apple Cover Flow UI effect)。
抖动动画。
加载(Loding)效果,CSS做的。
css3 做的可平铺纹理。浏览器兼容性不好。
用CSS3的Filter实现Instagram滤镜的库。
普通的幻灯,竟然不支持垂直滚动。
“数据驱动文档”,是一个基于数据操作 DOM 的Javascript库。理解起来,D3跟jQuery 很像,不过D3是面向数据可视化的,数据驱动操作DOM;而jQuery是面向web开发的,直接操作 DOM。
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、免费开源。
库下载地址:http://datatables.net/releases/DataTables-1.10.12.zip
官网地址:https://datatables.net/
DataTables中文网:http://datatables.club/
现代时间库。
datedropper是微型但功能强大的jQuery时间选择器。内建风格相当活泼可爱,可增加网站的活力。
和 Moment.js 一样的API。只有2KB。
深度合并数组和对象。
一个可以检测设备类型的工具,可以让我们根据不同的设备来为其定制响应的Javascript和CSS。
http://editor.md.ipandao.com/
一款基于LLVM, 可以将C/C++转换成Javascript的工具,使得Javascript可以近乎Native的速度。
浏览器版的 EventEmitter。
一个矢量图库,提供Ruby/Node等支持。
一个用于放大缩小图片、Web 内容或者多媒体元素的库,优雅大方。
GitHub地址: https://github.com/mailru/FileAPI
对文件选择框内的文件的一些处理。前端用户处理文件(拖放、多文件上传等)。
导入拖拽上传档案,跨浏览器、原生JavaScript又加上免费开源,只要载入JavaScript就可以开始运行,不依赖其他程序。
Firefox 在浏览器端的实现 —— HTML 版的 Firefox。
Flat-UI: Bootstrap的一款主题,简洁美观。
一款能够漂亮的网页元素翻转效果库。
一个用来检测 Javascript 语法错误的库, Facebook 出品。
页面上内嵌图片的放大缩小效果,类似于 Medium 中的效果。
是页面上一个元素高亮的库。
另一款前端模版框架,类似于 Bootstrap。
前端框架,是开发人员可以基于web技术构建IOS7程序。
提够了一些Curry的支持。
是一套基于可视化编码的图形语法,以数据驱动,具有高度的易用性和扩展性,用户无需关注各种繁琐的实现细节,一条语句即可构建出各种各样的可交互的统计图表。
生成gif文件。
用于生成 Github 信息卡片的库。
是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件。
基于Mustache的模板引擎。
下载地址:https://s3.amazonaws.com/builds.handlebarsjs.com/handlebars.min-v4.7.7.js
或安装
npm install handlebars
多项针对链接、按钮、Logo、SVG和图片的移入CSS3特效。
用于创建 基于 HTML5 的 演示文稿。
一款漂亮的 Checkbox 插件。
是jQuery一个用来实现无限滚动的插件。滚动加载,滚动到最下到自动加载。
一个适用于现代浏览器的,用于处理 手势、拖放、缩放等的库。
可以用来过滤、排列布局,实现美观的动态布局切换效果。
Javascript 实现的各种算法集合。
用于辅助创建手机端的Web应用,支持主题、Zepto.js等。
jQuery 动画库的一个增强,用于现代浏览器。
jQuery 团队开发的用于辅助手机端web app开发的库,基于HTML5。
是一个基于html5的用户界面系统,旨在使所有智能手机、平板电脑和桌面设备合集都能访问到响应性的网站和应用程序。
单页应用中一个用于处理导航栏的库。
GitHub地址: https://github.com/jeromeetienne/jquery-qrcode
生成二维码图片的jQuery 插件,很好用。该插件是基于 QR Code Generator 开发的。
jQuery 团队开发的 UI 相关的前端库,功能强大。
jQuery 的一个插件,用于校验 Form 表单。
jQuery 倒计时插件。
jQuery插件,用于绑定热键。
GitHub地址: https://github.com/flesler/jquery.scrollTo
在页面上以一个元素为起始以动画的方式移动(ScrollTo)到另一个元素, 支持回退等。
能够使得定位的时候更有体验感。
jQuery 插件,用于将 form 表单序列化成JSON数据。
smartbanner 是从 IOS6 开始支持的一个新特性, 这个插件提供了对早期 IOS4/5 和 Android 的支持。
是GSGD的插件,可提供高级的宽松选项。 当从一个幻灯片过渡到另一个幻灯片时,我们将使用它来添加良好的缓动运动。
另一款可以根据文本生成流程图的库,类似于 Markdown 的语法。
Javascript 实现的 javascript JIT。
自定义的滚动条,让所有浏览器都显示一样的滚动条。
与服务器端交互。
前端 MVVM 框架,用于开发富前端应用。
类似于 underscore, 但是会延迟执行,某些场景下,性能会有很大的提升。
官网:Lazy Load 延伸:Vanilla JavaScript Lazy Load Plugin
Lazy Load帮助高度较长的网页进行延迟载入图片,尚未浏览到该部分时,不会载入视角外的图片,提高效率。
功能强大的图片延迟加载工具,可以首先加载一个低质量的图片,然后再加载高质量的图片。
官网:JQuery lightSlider Github:sachinchoolur/lightslider
JQuery lightSlider是一个轻量且响应式的跑马灯/幻灯片,附有缩图导览。另外还有相本功能、垂直跑马灯,应用层面广泛。
与underscore.js的api基本一致。与underscore比其优势是,效率高;可自定义构建。
几种Loading效果,基于SVG。
Mozilla 出品,用于离线存储,基于IndexedDB, WebSQL 或者 localStorage, 提供一致的接口。
新型 Markdown 解析器,快速,支持插件。
Masonry常用于瀑布流布局的插件。
2D 物理效果引擎,碰撞、弹跳等。
可以根据文本生成流程图,类似于 Markdown 的语法。
基于 D3 的图表库,简洁、高效,Mozilla 出品。
轻量型前端 MVC 框架,部分使用场景下性能优于 Angular.js 和 React。
基于angularjs和bootstrap的web app开发框架。
一个用来检测 HTML5 和 CSS3 支持情况的库
轻量级专门解析、验证、操作、格式化日期的JavaScript函数库,Moment.js是为浏览器和Node.js而设计,所有组件都可以在这两个环境下运行。
轻量级货币转换库,web 和 node 皆可用。
基于 CSS3 的前端动画框架。
用于 Javascript 中的多行文本,类似于 Ruby 的 HERE Doc。
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
Github地址: https://github.com/ai/nanoid/
生成 uuid。
用于生成 Github 信息卡片的库。
提供类似于 iPhone6 展示页类似的效果,适用于单页应用,兼容到 IE8。
一个用于响应智能手机 orientation 的库。
前后端通用的一个并行库。
验证参数的格式。
JS 的一个图片展示库。
日期/时间选择器。
一个由 Javascript 实现的Shell, 将互联网当做一个大的文件系统, 通过 cd/ls/cat……等命令, 可以访问 Facebook/Twitter/Google Drive等网络服务。
轻量, 小巧, 美观的 HTML5 视频播放器。
代码高亮对于开发者的博客来说,是非常必要的,这款插件具有强大的代码高亮支持功能。
简洁美观的进度条,扁平化。
各种语言的二维码生成工具。
GitHub地址: https://github.com/davidshimjs/qrcodejs
QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。
Quill是当下高兼容性、强大、丰富且具有扩展性的文字编辑器。对于移动设备的支持度高。
实现部分物理效果,Facebook出品。
用于生成 正则表达式 的可视化流程图。
类似于Solr, 但是用于浏览器上的全文搜索引擎,可以为 JSON 创建索引,离线也可以使用。
正则工具库。
正则工具库。
全屏插件,支持各大浏览器。
神奇的滚动交互效果插件,可以在滚动的过程中设置各种各样的动态效果。
前端插件用来监控元素的滚动事件(进入、退出等),性能很好。
动态显示内容,使元素以非常酷帅的方式进入画布 (Viewpoint)。
ScrollToFixed能够让网页的导航或表头等固定在顶部或底部,用户更方便的操作或查看信息。除了导航和表头,也可以固定其他内容,比如广告、返回顶部等。
前端模块加载器,解决模块化、依赖等问题。
在智能移动设备浏览器上,通过HTML5的api使用移动设备的功能。定位、运动、倾斜等。
GitHub地址: https://github.com/Prinzhorn/skrollr
是一款轻量级且强大的js库,实现异步滚动的开源库。
功能异常强大的一个图片滑动切换效果库。
一个非常美观的侧滑菜单。
一个通过滑动或者拖拽来操控列表的库。
一个利用Javascript和CSS transform的animation库。
漂亮的社交按钮。
现代浏览器上用于实现元素拖拽排序的功能,支持 Meteor, AngularJS, React,不依赖 jQuery。
Sortable可以对HTML对象做拖拽移动清单的JavaScript函数库,支持移动设备且不依赖jQuery等其他第三方,并兼容Bootstrap等CSS框架。
Js实现的颜色选择器 (Colorpicker)。
GitHub地址: https://github.com/markdalgleish/stellar.js
视差滚动效果,前端用于实现异步滚动效果的库,现已不再维护。可轻松创建视差滚动站点。
用流的方式来对数组,对象进行系列操作。
字符串操作库。它为各种实用程序、格式选项和字符串转换,提供了超过 60 种实用的方法。
在原生对象上增加一些工具方法。
WYSIWYG 富文本编辑器。
一个非常美观的用于替换浏览器默认 alert 的库。
jQuery 插件,用于处理移动端的触摸事件。
GitHub地址: https://github.com/nolimits4web/swiper/
Swiper中文网
IOS 7上Switch的JS实现, 支持 IE8 及以上浏览器。
一个用于页签的jQuery插件,轻量级且操作容易。
由Twitter推出,灵活扎实的建议列表函数库。
GitHub地址: https://github.com/Zhouzi/TheaterJS
一个用于模拟人输入状态的JS库。
易于使用且轻量级3D函数库,提供canvas、SVG、CSS3 3D和WebGL渲染器。
基于 HTML5 & CSS3 时间表。
TinyMCE是功能齐全且轻量级的HTML编辑器,但需要在IE11以上才可以运行。
toastr是一个提示信息JavaScript函数库,必须载入jQuery,宗旨是利用简单的程序函数库来做定制化跟扩展。toastr提供一个范例页面toastr examples,方便自订效果跟产生源码,类似Customize and download · Bootstrap的效果,方便使用者加快流程,先前介绍的ALERTIFY JS整体层面比toastr好很多,无论原生JavaScript以及整体文件大小和功能延展性,但toastr简单使用的操作模式,如果有旧项目是在jQuery的环境下,要做一些定制化功能,或许就是不错的选择。
GitHub地址: https://github.com/tscanlin/tocbot/releases
根据文章的标题级别自动生成目录对一篇文章来说是一个比较实用的功能。
分别基于 AngularJS/EmberJS/Backbone等实现的 TODO List, 帮助开发者选择前端 MVC 库
一个产生工具列的jQuery插件。
稳定的跨浏览器测试工具。
Touch.js是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具。
Basecamp 公司出品的富文本编辑器,简洁小巧。
由Twitter推出,灵活扎实的建议列表函数库。
中文文档:https://www.underscorejs.cn/
GitHub地址: https://github.com/jashkenas/underscore
可以动态描绘 SVG 的 JS 库, 支持多种动画。
监视对象或属性的变化。
Github地址: https://github.com/imakewebthings/waypoints
一个jQuery插件,每当您滚动到某个元素时,该插件都会执行一个函数。这使站点上的导航可以根据滚动条的位置突出显示我们正在播放的幻灯片。
下载 https://github.com/imakewebthings/waypoints/zipball/latest
或安装
npm install waypoints
Javascript 实现的 Web Animation API。
jQuery 的一个插件,可以用来实现瀑布流的效果。
富文本编辑器,适用于现代浏览器。
用于现代浏览器的兼容jQuery的库。
Zepto的设计目的是提供 jQuery 的类似的API,但并不是100%覆盖 jQuery。是一个轻量级的针对现代高级浏览器的JavaScript库,与JQuery有着类似的API。Zepto设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API,所以能把主要的精力放到应用开发上。
jQuery 插件,用来处理浏览器缩放。
https://treejs.cn/v3/main.php#_zTreeInfo
文件树形视图控件
插件集合代码仓库:https://gitee.com/SteveRocket/practice_fronted (持续更新…)