前端常用插件汇总

Plugins整理

项目文件结构

• detail/ 一些组件的详细说明，以及使用 Demo

目录

• 工具类
• 浏览器增强类
• 表单类
• 图片类
• 图标类
• UI 框架
• UI 组件类
• 用户体验增强
• 动画
• SVG
• 测试
• 其他类
• Bootstrap相关类
• JS Plugins仓库

工具类

• 方便操作对象，数组等的工具库
  • underscore.js
  • lo-dash 与underscore.js的api基本一致。与underscore比其优势是，效率高；可自定义构建
  • Sugar 在原生对象上增加一些工具方法
  • functional.js 提够了一些Curry的支持
  • Watch.js 监视对象或属性的变化
  • bacon.js 函数式编程，cool
  • streamjs 用流的方式来对数组，对象进行系列操作
• 异步流程控制
  • 发布订阅
    • eventproxy 朴灵出品
    • Arbiter.js 详细
  • q Promise风格的
  • Async.js
• mock
  • Mock.js 生成随机数据和mock Ajax 请求
  • jquery-mockjax mock ajax请求
• 时间库
  • moment
  • datejs
• 浏览器探测
  • Bowser 探测具体浏览器和版本
  • ua-parser-js 探测具体浏览器和版本，操作系统，设备类型等
• 调试
  • console-polyfill 能放心的使用 console.log()之类的console方法
  • log 让控制台输出的log有样式
  • Konsole.js 在页面的一个元素里输出log信息 详细
• uri.js uri操作
• cookie 增删改cookie的工具库
• director 前端路由库 详细
• BigDecimal.js 提高精度的数字操作
• JSDoc 根据javascript文件中注释的信息，生成API文档 详细
• hotkeys 键盘事件的封装
• MD5 用 MD5 的方式加密文件的库

浏览器增强类

让一些旧浏览器变牛逼的库

• Selectivizr 让IE 6-8一些的css3选择器
• ieBetter 让ie6-8有高级浏览器的特性
• ExplorerCanvas 让IE8-的浏览器支持canvas
• CSS3 Pie 让IE6-9支持border-radious,box-shadow,linear-gradient。 可以使用.htc文件（注意Mine type）或.js文件。在用Pie.js时，box-radious的元素有背景色时，不显示背景色。。。
• formFive 让旧的浏览器支持HTML5表单的一些特性，如 placeholder,autofocus
• https://github.com/anselmh/object-fit 让浏览器支持object-fit这css规则
• HTML5 Cross Browser Polyfills 一堆Polyfills
• flexibility 让旧的 IE 也支持 Flexbox

选择器增强

• Lining.js 让浏览器实现类似::nth-line(), ::nth-last-line()的效果

未归类

• prefixfree 用了它，写css时，就不需要加浏览器的前缀了

表单类

• jquery-file-upload 上传文件组件 详细
• zTree 文件树形视图控件
• Treed 树编辑器。感觉展示的感觉很像思维导图
• FileAPI 对文件选择框内的文件的一些处理

表单验证

• .Validate 详细
• jQuery-Validation-Engine

表单元素美化

• uniform 提供对下拉框，单，复选框，按钮等表单元素的美化
• select2 多选下拉框
• selectivity 和unfirom比较类似
• DropKick 下拉框，单，多选。外观比uniform好
• switchery ios7风格的开关组件
• nouislider 用滚动条来设置/控制（音量等）
• range.css 美化input[type=range]元素的外观

图片类

• holderjs 生成占位图片
• lazyload
• imagesLoaded 选取的图片都加载好后执行调回
• CSSgram 用CSS3的Filter实现Instagram滤镜的库

图标类

• Icon Font汇总
• SVG做的图标
  • svgicons
  • iconic
  • HYBICON 带交互效果。如 hover, click
• HTML字符实体图标
  • http://www.amp-what.com/
• transformicons 图标点击时，会有一些变换效果。如，加号变成叉号
• css3patterns css3 做的可平铺纹理。浏览器兼容性不好。

浏览图片

• fancybox 弹出查看图片，视屏等等 demo
• yoxview 弹出查看图片，图片尺寸缩放很自然

图片墙

• wookmark

UI 框架

• WeUI 由微信官方设计团队为微信 Web 开发量身设计。
• Framework7

UI 组件类

拖拽

• dragula 支持Draggable，Dropable和Sortable。感觉比jqueryUI的轻量级，好用的样子
• angular-dragula dragular 官方的 angular 版本

数据可视化(图表)

• Echarts 百度出品
• highcharts 功能强大。是收费的。
• Plottable.JS 基于D3的一个图表库
• flot 文档不给力
• chartJs 中文文档 demo很漂亮，很清晰。比较轻量级。
• ichartJs 中国的一个家伙搞的，感觉还不错。

时间选取组件

• foundation-datepicker
• DatePicker 一个简单的日历 详细
• full calendar 支持脱放的方式来改变待办事宜的时间
• Simple Events Calendar 外观很喜欢。收费 5$
• jQuery ui datepicker 经典，不是很好看
• pickadate 轻量级，手机友好的，漂亮。但貌似只能在弹出层中显示，而没有下拉这种方式显示。
• zebra-datepicker 可配置性很强。但貌似只能在弹出在右上方。。。
• bootstrap-datepicker bootstrap风格。
• dateRangePicker 选取时间段。bootstrap风格。该组件依赖Twitter Bootstrap, Moment.js和jQuery.

自定义滚动条

• perfect scrollbar 轻量级的滚动条。外观与mac上chrome的滚动条一样。
• iscroll 在移动设备上用不错

加载(Loding)效果

• CSS Spinners CSS做的
• Loaders.css CSS做的

表格组件

• jsGrid Data Grid。 详细
• backgrid 基于Backbone.js的DataGrid
• excellentexport 把表格的内容生成excel。兼容 Firefox, Chrome, IE6+
• datatables 表格可交互（对内容进行排序，删除等）
• handsontable 生成Excel外观的数据
• JSpreadsheets 表格数据的组件库

选取颜色

• Spectrum

分享到SNS

• JiaThis 生成分享代码。

编辑器

• ace 代码编辑器，可以用来做demo演示
• ckeditor
• ueditor 百度做的
• tinymce 对html内容进行实时的编辑
• summernote 在移动设备上用不错

通知组件

• notie.js

HTML5播放器

• jwplayer 被大量网站使用
• html5media 简单的h5player，轻量级
• jplayer 功能强太，可换肤

展示

• Impress.js 各种旋转，和奇特的体验
• fullPage 全屏显示。用滚轮来翻页 详细
• zepto.fullpage 专注于移动端的fullPage.js，依赖Zepto
• pagePiling 和fullPage类似
• turn.js 做一本书，带漂亮的翻页的效果

幻灯

• slidesjs 挺好用的，只是那幻灯导航的CSS都要自己写，呵呵 详细
• iSlider 无任何插件依赖的手机平台javascript滑动组件 详细
• bgstretcher 全屏幻灯，会随着页面大小的变化而变化。
• Swiper 开源、免费、强大的移动端触摸滑动插件 Swiper中文网
• coin-slider 兼容IE6。蛮好的~。不过其切换方式是一块块的。不能配置切换方式。。。
• wowslider 幻灯切换时各种很炫的效果。收费。
• cycle2 普通的幻灯，竟然不支持垂直滚动。。。
• jcarousel 普通的幻灯，不兼容IE6
• reveal 3d滚动。做ppt相当不错
• nodePPT 国人做的，做ppt也相当不错。有些方面比 reveal做的还好。但生成导出的html有些问题
• roundabout 3d切换，看的后面图片的边

弹出框

• Magnific-Popup 兼容PC，Mobile。还不错，有5k+的star
• layer 国人开发的，兼容ie6+。不喜欢其调用方式。

动画效果

• mixitup 用漂亮的动画效果来完成排序和筛选
• jQuery.Marquee 跑马灯效果
• quickflip 卡片翻转效果
• 卡片翻转效果2 兼容性可以。写的比较简单：1，只支持x方向翻转 2,类名都是规定好的 3，只能被调用一次。 需要改写一下。我的改进版见这里
• TheaterJS 模拟两个人在屏幕上对话
• midnight.js 文字颜色随着背景变，屌炸了
• color-animation jquery的颜色渐变动画插件。jquery的动画不支持颜色值的变化。改库提供了这个支持。
• transit 对元素进行css的变换
• tagcanvas 3D标签云效果 详细
• iconate 图片切换动画
• Snap.js 左/右侧导航的出现效果
• CSS shake 抖动动画
• ClickSpark.js 点击后的一些酷炫的效果

视觉差插件

• scrollorama 比较简单
• superscrollorama 能做的效果更多，但要用第三方Tween的库，使用起来比较复杂。
• scrolldeck

flash

• swfobj 能够自动检测PC、Mac机器上各种主流浏览器对Flash插件的支持情况。它使得插入Flash媒体资源尽量简捷、安全。而且它是非常符合搜索引擎优化的原则的。此外，它能够避免您的HTML、XHTML中出现object、embed等非标准标签，从而符合更加标准。 详细

抽奖

• wScratchPad 刮刮卡刮奖效果
• jqueryrotate 旋转插件。可以用来做转盘抽奖效果

用户体验增强类

• Intro.js 用来介绍网站的功能很不错。也可以做新手引导。
• blockUI Lolding组件。
• simple-hint 提示信息。用css做的。兼容性IE 9+。
• dotdotdot 文字溢出时，添加在文字末尾加省略号
• jQuery-menu-aim 二级菜单的切换如Amazon主页上一样迅速
• AnythingZoomer 放大镜功能
• 美化/高亮语法代码
  • google-code-prettify
  • DlHighlight 仅支持JavaScript、CSS、XML、HTML 这4语法高亮
• please 按要求随机舒服的颜色
• Awesomplete 输入的智能提示，自动补全
• proTip 提示。感觉比 Bootstrap 的 tip 好
• Hammerjs 手势库。封装了 Swipe, Tap, Pinch, Pan等手势

动画

• velocity 提高Jquery动画的性能。以及颜色动画之类的新特性。

SVG

• Snap.svg 操作 SVG 的 JS 库。号称 SVG 的 jQuery。demo
• walkway 以动画的方式，渐渐地画出 SVG 的路径。

测试

• Mocha
• Chai
• Should
• Snoion
• DeviceMock.js mock 设备。

其他类

• ZeroClipboard 将内容复制到剪切板兼容主流浏览器的解决方案 详细
• html2canvas html转化成canvas，可以用来做截图。详细
• Ink 响应式html邮件框架
• 性能测试
• 抓取，解析RSS内容（不能跨域，所以后台要做代理，所谓的解析Rss其实就是解析xml）
  • jFeed
  • jRss 简单版的jFeed
• scriptcam 与摄像头交互
• cylon.js 机器人框架，支持35个平台
• Masonry 一个瀑布流框架
• devices.css 移动设备边框的外观。做原型的时候用不错。

Bootstrap相关类

• Bootbox.js 对bootstrap的弹出框做的一些封装
• 免费皮肤
  • AdminLTE

JS Plugins仓库

JS Plugins仓库

• jQuery Cards 高质量的 jQuery 插件网站
• jster
• node modules
• npmrank Sort npm packages by page rank
• YOU MIGHT NOT NEED JQUERY PLUGINS 不依赖 jQuery 的 js 插件。
• awesome-nodejs
• Libraries.io 各种语言的库
• OniUI 去哪儿网做的一套基于Avalon的框架

 GitHub下载地址：https://github.com/iamjoel/front-end-plugins

————————————————————————————————————————————————————————

常用的移动端框架

zepto.js

语法与jquery几乎一样，会jquery基本会zepto~

最新版本已经更新到1.16

官网：http://zeptojs.com/

中文(非官网)：http://www.css88.com/doc/zeptojs_api/

常使用的扩展模块：

浏览器检测：https://github.com/madrobby/zepto/blob/master/src/detect.js

tap事件：https://github.com/madrobby/zepto/blob/master/src/touch.js

iscroll.js

解决页面不支持弹性滚动，不支持fixed引起的问题~

实现下拉刷新，滑屏，缩放等功能~

最新版本已经更新到5.0

官网：http://cubiq.org/iscroll-5

underscore.js

笔者没用过，不过听说好用，推荐给大家~

该库提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。

最新版本已经更新到1.8.2

官网：http://underscorejs.org/

滑屏框架

适合上下滑屏、左右滑屏等滑屏切换页面的效果

slip.js

iSlider.js

fullpage.js

swiper.js

flex布局

flex布局目前可使用在移动中，并非所有的语法都全兼容，但以下写法笔者实践过，效果良好~