Link: https://juejin.im/post/5aa77040518825556e5dc057
后端人员常用的插件库
前端组件库
搭建web app常用的样式/组件等收集列表(移动优先)
8. 路由和链接(Routing And URLs)
History.js – gracefully supports the HTML5 History/State APIs
jquery-pjax – pushState+ajax
jquery-address – Deep Linking
page.js – Micro client-side router
crossroads.js
hash.js
path.js
director.js – 前端路由库(通过#符号进行路径组织,结合vue的component可进行单页的局部模块刷新)
URI.js
Roadcrew.js
SpeakingURL
uparams – An URL params parser
StateMan – 一个处理深层次单页系统的路由库
10. 表单处理
10.1 表单验证(Form Validator)/表单提示
Validator
Parsley
jquery.form.js – jQuery Form Plugin
Validform
validator.js
jquery-validation – jQuery Validation Plugin
formvalidator.js
Fort.js – 表单填写进度提示
mailcheck – 用于检测email地址的域名
Floatlable.js – 输入时显示placeholder文本
jQuery Label Better
validator.js
10.2 < input > 相关
cleave.js – 格式化你的输入内容
10.3 < select > 相关
Chosen
Select2
bootstrap-select
10.4 单选框/复选框相关
iCheck – 增强复选框和单选按钮
Switchery – iOS 7 style switches for your checkboxes
10.5 上传组件
jQuery File Upload Plugin
百度 Web Uploader
uploadify
Plupload
Fine Uploader
arale-upload – 轻量级 iframe and html5 file uploader
Dropzone.js – 文件上传库(可获取文件mime, 文件大小等; 针对图片可生成缩略图,获取图片宽度,高度)
flow.js
localResizeIMG – 前端本地客户端压缩图片，兼容IOS，Android，PC
simple-uploader
10.6 日期选择
Both Date and Time picker widget based on twitter bootstrap
GMU 日历组件
Mobiscroll
Pikaday – 日期选择器
价格日历
PriceCalendar – 酒店价格日历
API文档
DEMO
price-calendar – 价格日历
price_calendar – 含有商品价格的日历控件
10.8 标签插件(Tag)
TaggingJS – 可以灵活定制的 jQuery 标签系统插件
selectize.js
Bootstrap Tags Input
jQuery-Tags-Input
10.9 自动完成插件
At.js – 一个Twitter/微博样式的@自动完成插…
jquery-textcomplete – 智能搜索提示框/自动补全
typeahead.js – a fast and fully-featured autocomplete library
10.10 样式修正
autosize – 使文本框自动适应所输入的内容
12. 日期格式化 & 时间轴
Moment.js – 日期处理
Smart Time Ago – 显示相对时间
timeline.js
timeago.js
date-utils – Date Pollyfills for Node.js and Browser
13. 页面交互
13.1 Slider
slick – the last carousel you’ll ever need
Swipe – the most accurate touch slider
Swiper – Most modern mobile touch slider
iscroll – Smooth scrolling for the web
iSlider – 移动端滑动组件
OwlCarousel – create beautiful responsive carousel slider
jquery-mousewheel – jQuery鼠标滚轮滚动侦测插件
Glide.js – 轻量级滑块组件
PhotoSwipe
TouchSlide – 触屏滑动特效(焦点图,Tab切换)
13.2 瀑布流
Masonry
Isotope – Filter & sort magical layouts
Bricklayer
13.3 懒加载/加载监听/预加载
imagesLoaded
Echo.js
lazySizes
jquery_lazyload
BttrLazyLoading
lazyload.js
layzr.js – 一个小巧快速的图片懒加载库
waitForImages – 图片加载监听库
PxLoader – JS预加载库:实现图片、声音等各种文件的预加载功能
bindWithDelay – jQuery Plugin For Delayed Event Execution
TypeWatch – 停止输入时调用
13.4 图片轮播(幻灯片)/图片展示
FlexSlider
unslider – 小而美的轮播库
prettyPhoto
FlickerPlate – A cool jQuery plugin that lets you flick through content.
Holder.js – Client-side image placeholders.
RowGrid.js – 在径直的行里放置图片
ImageLightbox.js – 灯箱效果
JQuery Panorama Viewer – 全景视图
Intense Images – 全屏查看图片
Picturefill – 一个响应式图片 JS 插件
zoom.js – 一个 jQuery 图片放大插件
watermarkjs – 一个在浏览器中添加图片水印的 JS 库
responsive-images.js
Turntable.js – 轻易实现图像的3D旋转
ResponsifyJS – 让图像完全响应式而不会牺牲图像的主要部分
react-slick – React 实现的轮播图插件
13.5 图片剪裁/图片处理
Jcrop – Image Cropping Plugin for jQuery
croppic – an image cropping jquery plugin
smartcrop.js – 智能图片裁剪库
jQuery.eraser – 图像擦除插件
DD_belatedPNG.js – 让IE6支持透明PNG图片
FocusPoint.js 实现图片的响应式裁剪
imgareaselect
CSSgram – CSS 实现的 Instagram 滤镜库
instagram.css – 另一个 CSS 实现的 Instagram 滤镜库
antimoderate – 图片模糊库
13.6 进度条/加载动画(Loading)
NProgress.js
progress.js
Pace – Automatic page load progress bar
jquery-ajax-progress
nanobar – Very lightweight progress bars.
waitMe – 很漂亮的loading效果
spin.js
sonic.js
fakeLoader.js
loaders.css – 一个为性能优化的实现加载动画效果的 CSS 框架
css-loaders
Sausage – 跟踪滚动条并记录当前阅读所处节点
13.8 菜单(Menu)
SuperFish – 基于jQuery的级联下拉菜单
Responsive Nav – 响应式导航
metisMenu – A jQuery menu plugin
13.10 滚动加载更多/下拉刷新(Pull to Refresh)
jScroll
web-pull-to-refresh
pulltorefresh
RubberBand.js – add pull-to-refresh functionality to any page.
13.11 平滑滚动插件(Smooth Scroll)
jquery-smooth-scroll
jquery.scrollTo – 平滑滚动到页面指定位置
smooth-scroll
scrollUp
elevator.js – 一个模拟电梯运行“返回顶部”的 JS 插件
13.14 转场效果
Animsition – 页面切换时的过渡效果
13.19 滚动条(Scrollbar)
jScrollPane
jquery.scrollbar
perfect-scrollbar
nanoScrollerJS
tinyscrollbar
13.21 缩放 (Zooming)
zoom.js – 一款效果很独特的页面内容缩放插件
zoom.js – 一个 jQuery 图片放大插件
jQuery Zoom – mouseover时图片缩放效果
14. 代码高亮插件/代码编辑器
google-code-prettify
highlight.js
Rainbow
ACE
CodeMirror
Crayon Syntax Highlighter
prism – Lightweight, robust, elegant syntax highlighting.
15. UI Icon 组件
Font Awesome
Glyphter: The SVG Font Machine
Perfect Icons
iconizr
Cikonss – 纯CSS实现的响应式Icon
Simple Icons
16. 动画(Animate)
animate.css – A cross-browser library of CSS animations.
Transit – CSS transitions and transformations for jQuery
anime.js – Javascript 动画引擎
WOW – 在滚动过程中展示CSS动画效果(默认触发animate.css动画)
AniJS – A Library to Raise your Web Design without Coding
Move.js – 简化CSS3动画的JS库
ScrollMe – 在网页中加入各种滚动动画效果
Effeckt.css – A Performant Transitions and Animations Library
NEC动画库
csshake – CSS classes to move your DOM
magic – CSS3 Animations with special effects
SpinKit
Velocity.js – 加速JavaScript动画
lenticular.js – 响应倾斜或鼠标事件创建图片动画
jQuery Interactive 3D – Create a 3D interactive object using images
AnimateScroll – A Simple jQuery Plugin for Animating Scroll
Blast.js – 把动画和样式注入到文本中
Bounce.js – 一个用于制作漂亮 CSS3 关键帧动画的 JS 库
Sticker.js – create a Sticker Effect
scrollReveal.js – 元素进入可视区域自动触发设置好的动画
stroll.js – CSS3 list scroll effects
jQuery Easing – 动画效果扩展
animations – CSS3 ANIMATION CHEAT SHEET
iconate.js：将 icons 增加动画效果的 JS 库
Odometer – 数字之间的垂直切换
Hover – 悬停效果
Hover.css – 很多鼠标Hover态的效果
imagehover.css – 为图片添加悬停效果
iHover – 图片悬停效果
ImageCaptionHoverAnimation
Bootstrap Hover Image Gallery
Multi-touch gestures library – Web手势库
AlloyFinger – 腾讯 AlloyTeam 出品的超级小的 Web 手势库
19. 通知组件/弹框组件/模态窗口
Notify.js(Web Notifications API)
alertify.js
AlertifyJS
SweetAlert
Messenger – 非常酷的弹框组件
PNotify
Notify.js – A simple, versatile notification library
Remodal – 模态窗口插件
action.js – 极简的tip和Modal弹窗效果
Modaal – 一个创建弹出窗口的jQuery插件
Vex – 可以实现3D动效的弹出对话框堆叠效果
20. 提示控件(Tooltips)
hint.css – 一款非常小巧的提示框效果
qTip2 – Pretty powerful tooltips
tooltip – CSS Tooltips
tooltipster – A jQuery tooltip plugin
grumble.js – 气泡形状的提示（Tooltip）控件
Ouibounce – 离站提示控件
intro.js – 一个创建引导式网站介绍功能的 JS 库
data-tip.css – 纯 CSS 实现的工具提示
21. 对话框/遮罩层/弹出层(lightbox)
fancyBox – Fancy jQuery lightbox
jquery-lightbox – The popular lightbox script, ported to jQuery
Colorbox – a jQuery lightbox
artDialog – 经典的网页对话框组件
DialogEffects
jQuery blockUI – Page or element overlay
layer – web弹出窗/层
22. 文档/表格/PDF
Backgrid.js – 强大的表格组件
handsontable – 在线可编辑excel表格
jQuery Bootgrid – 用于ajax生成动态表格
DataTables – Table plug-in for jQuery
PDF.js – 一个 JavaScript 编写的 PDF 阅读器
jsPDF – Generate PDF files in JavaScript
Recline.js – 灵活操作和展示数据
Dynatable – 交互式表格插件
fattable – 创建无限滚动无限行列数的表格
Clusterize.js – 一个轻松显示大数据集的 JS 插件
Uniform -表单美化插件
tableExport – 导出HTML Table为 Excel、PDF 等
23. 目录树插件
zTree_v3 – jQuery Tree Plugin
jstree – jQuery Tree Plugin
fancytree – Tree plugin for jQuery
24. 前后端交互
24.1 Ajax模块
fetch – A window.fetch JavaScript polyfill
reqwest – browser asynchronous http requests
ajax – Standalone AJAX library
then-request
browser-request
superagent
minAjax.js
qwest – 第三方的Ajax库
axios – Promise based HTTP client for the browser and node.js
whatwg-fetch
jsonp – A simple JSONP implementation
isomorphic-fetch – Isomorphic WHATWG Fetch API, for Node & Browserify
25. 音频/视频
jPlayer – HTML5 Audio & Video for jQuery
video.js – HTML5 & Flash video player
Accessible HTML5 Video Player – PayPal 开源的 HTML5 视频播放器
Clappr – 开源的Web视频播放器
Plyr – A simple HTML5 media player
FitVids.js – A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
BigVideo.js – The jQuery Plugin for Big Background Video
BigScreen – A simple library for using the JavaScript Full Screen API
Vide – 视频背景
winamp2-js
Buzz – A Javascript HTML5 Audio library
MediaElement.js
27. 富文本编辑器/Markdown编辑器/Markdown解析器
Simditor – 简单快速的富文本编辑器
BachEditor – 一个有情怀的编辑器
TinyMCE
bootstrap-markdown
marked – markdown解析器
Markdown Plus
Editor.md – 开源在线Markdown编辑器
stackedit
Redactor Text Editor
micromarkdown.js – 轻量级的md解析器
wangEditor – 支持移动端的轻量级web富文本框
CKEditor – 可视化 HTML 编辑器
Quill – 富文本编辑器
30. 选项卡(Tabs)
Easy Responsive Tabs to Accordion
Responsive-Tabs
ion.tabs – jQuery tabs plugin
jQuery-EasyTabs
tabulous.js
31. 文本处理
ZeroClipboard – 文本复制插件
clipboard.js
Bigfoot – 点击文章中的脚注弹窗显示
Annotator – 文本注解插件，可以包括注释、标签、用户等
Succinct – 用作截断多行文本,后面添加省略号
Flowtype.js – 自动调整字体大小和行号
flat-shadow
FitText – A jQuery plugin for inflating web type
shine.js – 实现漂亮阴影
Type Rendering Mix – 文本渲染引擎
jquery-expander – 阅读更多
Typed.js – 输入模拟插件
jQuery.dotdotdot – 多行文本溢出显示省略号
baffle.js – 文本互动效果
33. 演示/幻灯片
reveal.js – The HTML Presentation Framework
bespoke.js – DIY Presentation Micro-Framework
impress.js
shower
deck.js
34. 国际化(i18n)
jquery-i18n
i18next.js
jsperanto.js
jed.js
messageformat.js
Polyglot.js
35. 邮件模板(Email Templates)
responsive-html-email-template
37. HTTP请求相关
pako – HTTP 请求正文压缩
参考阅读: 如何压缩 HTTP 请求正文
HTTP 请求正文压缩 DEMO
38. 下载组件
download
Downloadify
39. 加密/转码
crypto-js – JavaScript library of crypto standards.
ulid – 生成UUID类库
RSA in JavaScript – 用RSA加密实现Web数据加密传输
41. 实用工具/其他插件
jquery-cookie
JavaScript Cookie
InstantClick – 预加载用户可能会点击的一些链接
Async.js – 异步操作
html2canvas – 实现纯JS网页截图
jquery.qrcode.js – 生成二维码的 jQuery 插件
qrcodejs – JS生成QRCode的库
nakedpassword – 用脱衣女帮助检测密码强度
KityMinder – 脑图编辑工具
MixitUp – 动画过滤和排序
JQuery Tip Cards – 创建卡片交互的cards布局
Fallback.js – JavaScript library for dynamically loading CSS and JS files.
swfobject
prettyprint.js – An in-browser JavaScript variable dumper
Shepherd – 为应用创建用户指南
RulersGuide.js – 类似PhotoShop标尺的js库
Gremlins.js – Monkey 测试库
RoughDraft.js – 简单快速的创建交互式的 HTML 模型的原型工具
favico.js – 动态改变浏览器标签栏中的网站图标
pageguide – 网页向导
jsdiff – js diff 算法
在线工具( Online Tools )
jsbin – Collaborative JavaScript Debugging App
jsbin@Github
jsfiddle
jsbeautifier – Online JavaScript beautifier
resume.github.com
前端开发工具
1. 开发工具
Sublime Text
2. 调试工具
Fiddler
Weinre
Rythem
csscss – 用于检查css代码冗余
FECS – 基于 Node.js 的前端代码检查工具
JSON Server – 模拟 API
swagger-ui – 基于REST的API测试/文档
3. 模拟数据( Fake )
JSONPlaceholder
json-server – Get a full fake REST API
lowdb – A small local JSON database powered by lodash
Mock.js – 一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试
4. 接口管理
RAP – Web接口管理工具，开源免费，接口自动化，MOCK数据自动生成，自动化测试，企业级管理
5. 浏览器扩展(Chrome Extensions)
Postman – REST Client
Fiddler – Fiddler for Chrome Extension
WEB前端助手(FeHelper)
Web Developer
Wappalyzer – 分析网站应用的技术栈
HTTP Status
Chrome Logger
ColorZilla
ColorPick Eyedropper
Code Cola
1px
AlloyDesigner – 前端重构开发辅助工具
Fontface Ninja
PageSpeed Insights (by Google)
Redirect Path
Responsive Web Design Tester
Window Resizer
CSSViewer
IE Tab
Clear Cache
JSONView
Image Downloader
Pretty Beautiful Javascript – 可以自动格式化混淆的js文件
JavaScript Errors Notifier
CSS Diff – 在线比对页面上两个元素的CSS样式差异
WhatFont- 识别网页所使用的字体
前端参考集
frontend-guidelines – Some HTML, CSS and JS best practices.
frontend-dev-bookmarks
Codrops – Useful resources
Front-end Code Standards & Best Practices
awesome-javascript
Front-end-tutorial – 前端涉及的所有知识体系
awesome-vue
前端编码规范( Standard Style )
Airbnb 的 JavaScript 编码规范
JavaScript Standard Style
clean-code-javascript – javascript 编码风格指南
cheatsheet – 标签的内容清单
Front-End-Checklist – The perfect Front-End Checklist for modern websites and meticulous developers http://frontendchecklist.com
书籍( Frontend-related Books )
Front-End Developer Handbook 2016
Front-End Developer Handbook 2017
前端工程师手册
前端工程师手册 – 包括前端开发实践、学习前端开发、前端开发工具
原文：github.com/JingwenTian…