前端组件整理（持续更新中。。。）

目录

• 工具类
• 浏览器增强类
• 表单类
• 图片类
• 通用UI组件类
• 专用工具类
• 移动端框架
• 其他类
• JS Plugins仓库

工具类

• 方便操作对象，数组等的工具库
  • underscore.js提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象
  • immutable facebook的，持久化JS的集合数据
  • lo-dash 与underscore.js的api基本一致。与underscore比其优势是，效率高；可自定义构建
  • Sugar 在原生对象上增加一些工具方法
  • functional.js 提够了一些Curry的支持
  • bacon.js 函数式编程，cool
  • streamjs 用流的方式来对数组，对象进行系列操作
  • jsonSelect 像CSS3选择器一样去查询Json数据
• 异步流程控制
  • 发布订阅
    • eventproxy 朴灵出品
    • Arbiter.js
  • q Promise风格的
  • Async.js
• 时间库
  • moment
  • datejs
• 浏览器探测
  • Bowser 探测具体浏览器和版本
  • ua-parser-js 探测具体浏览器和版本，操作系统，设备类型等
• 调试地图
  • JavaScript Debug 对console.log的简单封装，当浏览器不支持console.log时，输出在一个页面元素里
  • log 让控制台输出的log有样式
• uri.js uri操作
• cookie 增删改cookie的工具库
• BigDecimal.js 提高精度的数字操作
• big.js提高精度的数字操作
• 前端数据库
  • taffydb 像操作mongo一样
  • 其他 真不少，选择一款自己的哦

浏览器增强类

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

• 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的元素有背景色时，不显示背景色。。。
• https://github.com/anselmh/object-fit 让浏览器支持object-fit这css规则
• HTML5 Cross Browser Polyfills 一堆Polyfills

选择器增强

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

未归类

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

表单类

上传组件

• jquery-fileapi 上传裁剪图片，上传多张文件，拖拽上传，视频webcam上传
• AjaxFileUpload ajax上传
• jQuery File Upload 多文件、拖拽上传、进度条、验证、预览图片、音频视频、跨域，客户端图片重新调整等功能
• multiple-file-upload 多文件上传
• uploadify 需要flash

树组件

• zTree 文件树形视图控件

表单验证

• jquery-validation
• jQuery-Validation-Engine
• parsleyjs jQuery >= 1.8才能使用

表单元素美化

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

图片类

• holderjs 生成占位图片
• jquery_lazy.load 图片延迟加载
• imagesLoaded 选取的图片都加载好后执行调回

浏览图片

• fancybox 弹出查看图片，视屏等等 demo
• yoxview 弹出查看图片，图片尺寸缩放很自然
• FlexSlider 2响应式幻灯片，切换视频/切换图片
• bxslider 响应式幻灯片
• lightbox2
• Lightbox for Bootstrap 3 基于bootstrap3的modal做的幻灯片
• photoswipe 有分享按钮的响应式图片浏览组件
• coin-slider 兼容IE6。蛮好的~。不过其切换方式是一块块的。不能配置切换方式。。。
• wowslider 幻灯切换时各种很炫的效果。收费。
• cycle2 普通的幻灯，竟然不支持垂直滚动。。。
• jcarousel 普通的幻灯，不兼容IE6

图片墙(瀑布流)

• wookmark
• waterfall 堆糖瀑布流图片墙，国人的,自适应
• masonry
• Grid-A-Licious 自适应
• blocksit 自适应

裁剪图片

• Jcrop

通用UI组件类

时间选取组件

• jQuery ui datepicker 经典，不是很好看
• pickadate 轻量级，手机友好的，漂亮。但貌似只能在弹出层中显示，而没有下拉这种方式显示。
• zebra-datepicker 可配置性很强。但貌似只能在弹出在右上方。。。
• bootstrap-datepicker bootstrap风格。
• dateRangePicker 选取时间段。bootstrap风格。该组件依赖Twitter Bootstrap, Moment.js和jQuery.
• My97 DatePicker 谁用谁知道，炒鸡好用，好多网站和企业系统用，貌似12306也用
• mobiscroll移动端日期选择器，该公司的组件其他是收费的，日期免费

滚动条组件

• perfect scrollbar 轻量级的滚动条。外观与mac上chrome的滚动条一样。
• iscroll 在移动设备上用不错
• jQuery slimScroll 监听scroll事件，隐藏显示滚动条
• jquery-scrollspy
• bootstrap-scrollspy

###提示组件

• opentip 漂亮的提示组件，各种方向
• simple-hint 提示信息。用css做的。兼容性IE 9+。

表格组件

• datatables 表格可交互（对内容进行排序，删除等）
• backgrid 各种功能，带分页，可编辑表格内容。很棒。
• JqGrid jqGrid相关的几个表格组件,jqGrid，treeGrid
• excellentexport 把表格的内容生成excel。兼容 Firefox, Chrome, IE6+

排序组件

• Sortable 拖拽排序，包括文字、图片等都可以排序

菜单组件

• Sidr 响应式的侧边菜单栏
• flexnav 响应式菜单栏
• smartmenus 响应式菜单栏

###进度条

• nprogress github 9k+ stars google,youtube都在用啊
• pacejs 7k+ 个人认为很不错的一款
• nanobar 轻量款
• cprogress 转轮式进度条

选取颜色

• Spectrum

编辑器

• ace 代码编辑器，可以用来做demo演示
• codemirror 代码编辑器，可以用来做在线代码编辑器，可代码高亮，语法检查等
• ckeditor 个人感觉比较重，自己曾经二次开发过，也改过其源码
• kindeditor 国人做的，好些网站也用
• ueditor 百度做的
• tinymce 对html内容进行实时的编辑
• summernote 在移动设备上用不错

###代码高亮

• syntaxhighlighter 好多网站使用此组件
• highlightjs 也很不错
• google-code-prettify
• DlHighlight仅支持JavaScript、CSS、XML、HTML 这4语法高亮
• 其他

HTML5播放器

• jwplayer 被大量网站使用
• html5media 简单的h5player，轻量级
• jplayer 功能强太，可换肤
• jQueryMedia 网页插入多媒体文件

弹出框

• Magnific-Popup 可以做图片查看/兼容PC，Mobile。还不错，有6k+的star
• layer 国人开发的，兼容ie6+。不喜欢其调用方式。

自适应textarea高度

• AutoSize 自适应textarea高度

动画效果

• mixitup 用漂亮的动画效果来完成排序和筛选
• jQuery.Marquee 跑马灯效果
• quickflip 卡片翻转效果
• 卡片翻转效果2 兼容性可以。写的比较简单：1，只支持x方向翻转 2,类名都是规定好的 3，只能被调用一次。 需要改写一下。改进版见这里
• TheaterJS 模拟两个人在屏幕上对话，像打字聊天
• midnight.js 文字颜色随着背景变，屌炸了
• color-animation jquery的颜色渐变动画插件。jquery的动画不支持颜色值的变化。改库提供了这个支持。
• transit 对元素进行css的变换
• velocity 动画加速

视觉差插件

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

###分页组件

• jQuery Pagination
• 11款分页

###小组件

• Widgster小的jQuery插件，提供简单的方式处理像伸缩、关闭、异步刷新、全屏的效果
• flippant仅仅关注于翻转效果的组件
• Intro.js 用来介绍网站的功能很不错。也可以做新手引导。
• blockUI Lolding组件。
• dotdotdot 文字溢出时，添加在文字末尾加省略号
• AnythingZoomer 放大镜功能
• please 按要求随机舒服的颜色

flash

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

专用工具类

数据可视化(图表)

• Echarts 百度出品
• highcharts 功能强大。是收费的。
• Plottable.JS 基于D3的一个图表库
• flot 文档不给力
• chartJs 中文文档 demo很漂亮，很清晰。比较轻量级。
• ichartJs 中国的一个家伙搞的，感觉还不错。
• jQuery Sparklines 星波图
• rickshaw 交互式时间序列图
• D3 让数据富有生命，并绚丽夺目
• Two 二维绘制图API

待办事宜日历

• full calendar 支持脱放的方式来改变待办事宜的时间
• Simple Events Calendar 外观很喜欢。收费 5$

展示

• Impress.js 各种旋转，和奇特的体验
• fullPage 全屏显示。用滚轮来翻页
• pagePiling 和fullPage类似
• turn.js 做一本书，带漂亮的翻页的效果
• appshowcase 展示app页面的组件，效果很炫，做app宣讲用很不错
• remark 网页幻灯片，做PPT，做书都行
• reveal 3d滚动。做ppt相当不错
• nodePPT 国人做的，做ppt也相当不错。有些方面比 reveal做的还好。但生成导出的html有些问题

###地图处理

• openlayer 个人用过OpenLayer2，新版是OpenLayer3
• mapbox 定制化的地图，没试过，但看页面很炫
• jQuery Mapael 在地图上建立漂亮的可视化数据模型

压缩文件

• jszip 建立，读取，编辑zip文件

拖拽组件

• jQueryEventDragDrop 不错的拖拽组件

移动端框架

• App Framework
• jQuery Mobile

其他类

• Ink 响应式html邮件框架
• 性能测试
• 抓取，解析RSS内容（不能跨域，所以后台要做代理，所谓的解析Rss其实就是解析xml）
  • jFeed
  • jRss 简单版的jFeed
• scriptcam 与摄像头交互

JS Plugins仓库

• jster
• awesome-nodejs

####部分参考[前端整理]：(https://github.com/iamjoel/front-end-plugins)