# 前端组件库

> 搭建web app常用的样式/组件等收集列表(移动优先)

- 一个常用的PHP类库, 资源以及技巧列表 awesome-php 推荐

## 0. 前端自动化(Workflow)

- 前端构建工具
  - Webpack - module bundler
  - Yeoman - a set of tools for automating development workflow
  - gulp - The streaming build system
    - use-gulp
  - grunt - the JavaScript Task Runner
  - F.I.S - 前端集成解决方案
  - Web Starter Kit - 一个Google 提供的帮助开发者快速设置项目的工具集
  - node-prune - Remove unnecessary files from node_modules
- 前端模块管理器
  - Bower - A package manager for the web
  - Browserify
  - Component
  - Duo
  - RequireJS
  - Sea.js
  - LABjs - 文件加载器
  - css-modulesify - CSS模块加载器
- css预处理器
  - Less - Less is More , Than CSS
  - Sass - Syntactically Awesome Style Sheets
  - Stylus - Expressive, dynamic, robust CSS
- 前端性能分析工具
  - analyze-css - CSS 选择器的复杂度和性能分析器

## 1. 前端UI框架(Frameworks)

- Bootstrap
- Foundation
- Amaze UI
- Semantic UI
- Pure CSS
- topcoat
- UIkit
- Material UI
- Materialize - 一个基于 Material Design 的 CSS 框架
- Framework7
- mui
- ionic framework
- Fries
- jQuery Mobile
- App.js
- Office UI Fabric - 微软 Office 前端团队的框架
- Polymer - Google发布的Web组件构建框架
- Layui - 经典模块化前端UI框架
- wired-elements - 一个有手绘效果的网页组件库
- mustard-ui - 一个简洁、好看的 CSS 框架，压缩后只有5.28KB
- taro-ui - 一款基于 Taro 框架开发的多端 UI 组件库
- alibaba/ice - 飞冰是一套基于 React 的中后台应用解决方案

## 2. JavaScript 框架汇总

- JavaScript 框架

  - react
    - ant-design - A UI Design Language
    - ant-design-mobile - A configurable Mobile UI
    - ant-design-pro - An out-of-box UI solution for enterprise applications
  - Angular
  - Vue.js - 数据驱动的组件化MVVM库(用于创建web交互界面和数据双向绑定)
    - vueComponent/ant-design-vue - An enterprise-class UI components based on Ant Design and Vue.
    - awesome-vue
    - Element - 基于 Vue 2.0 构建了一套完整的桌面 UI 组件库
    - Vuex - 一个专门为 Vue.js 应用设计的状态管理架构
    - at-ui - 一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站产品
    - Mint UI：基于 Vue.js 的移动端组件库
    - Vux - 基于 Vue 和 WeUI 的 UI 组件库
    - vonic - 基于 Vue.js 和 Ionic 的移动 UI 组件库 - vuetify - vue2.0组件库
    - iView - 一套基于 Vue.js 的高质量 UI 组件库
    - vue-i18n
  - preact - React 的 3kb 轻量化方案，拥有同样的 ES6 API
  - jQuery
  - Backbone.js
  - ember.js
  - Ractive.js
  - KISSY
  - Zepto.js
  - Vanilla JS
  - Can.js
  - Avalon
  - T3 JavaScript Framework - 一个用于搭建大型Web应用的客户端JS框架
  - jsblocks - Better MV-ish Framework 从简单 UI 到复杂单页应用都适用

- 轻量级JavaScript框架

  - Min.js - Super minimal selector and event library
  - skel.js - A lightweight responsive framework
  - Sprint.js - 一个高性能、小体积的 DOM 操作库
  - knockout
  - PhantomJS - 一个基于 WebKit 的服务器端 JavaScript API

- 函数式反应型编程框架 FRP (Functional Reactive Programming) library

  - Bacon.js - A small functional reactive programming lib for JavaScript.
  - Flapjax - 一个支持FRP的JavaScript框架

- 混合开发框架

  - Electron - 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
  - React Native - 使用JavaScript和React构建原生手机APP
  - electron-react-boilerplate - Electron应用程序样板(基于React、Redux、React Router、Webpack、React Transform HMR用于应用程序快速开发)
  - Weex - Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架
  - Flutter - Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面

- 微信小程序开发库

  - Tencent/weui-wxss - WeUI for 小程序 为微信小程序量身设计
  - Tencent/wepy - 小程序组件化开发框架
  - youzan/vant-weapp - 轻量、可靠的小程序 UI 组件库 https://youzan.github.io/vant-weapp
  - Meituan-Dianping/mpvue - 基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系
  - meili/minui - 基于规范的小程序 UI 组件库，自定义标签组件，简洁、易用、工具化
  - NervJS/taro - 多端统一开发框架，支持用 React 的开发方式编写一次代码，生成能运行在微信小程序、H5、React Native 等的应用
  - dcloudio/uni-app - 使用 Vue.js 开发跨平台应用的前端框架 http://uniapp.dcloud.io
  - didi/chameleon - 一套代码运行多端，一端所见即多端所见 https://CML.JS.org
  - zhuanzhuanfe/fancy-mini - 小程序代码库，封装一些常用的功能模块和ui组件。

- JavaScript 工具库

  - underscore.js
  - Underscore.string.js字符串操作库
  - functional.js
  - Lo-Dash - A JavaScript utility library
  - Lazy.js - a functional utility library for JavaScript
  - Fn.js
  - Way.js - 双向数据绑定库
  - boiler - a utility library that makes tasks in JavaScript easier
  - 快捷键操作
    - KeyboardJS - A JavaScript library for binding keyboard combos without the pain of key codes and key combo conflicts.
    - mousetrap - Simple library for handling keyboard shortcuts in Javascript
    - Keys.js - 应用快捷键
    - simple-hotkeys
    - jquery.hotkeys
    - Mousetrap - 键盘快捷键操作
  - AlloyLever - 移动web开发者工具面板

## 3. 前端游戏框架

- cocos2d-html5
- Egret Engine
- LimeJS
- EaselJS
- three.js
- AlloyStick
- The-Best-JS-Game-Framework
- CanvasEngine
- Quintus
- Stage.js
- phaser - 一个快速、免费、开源的 HTML5 游戏框架
- p2.js - web 物理引擎

## 4. ui组件库(CSS Framework)

- WeUI - 微信官方UI库
  - jQuery WeUI - WeUI的jQuery版本
- GMU - 基于zepto的ui组件库，适用于移动端
- FrozenUI - 腾讯移动端组件库
- NEC - 更好的CSS方案
- NEJ - 更好的JS解决方案
- Pure CSS Components
- magic-of-css
- Primer - The CSS toolkit and guidelines that power GitHub
- light7 - A Light and easy to use UI Lib
- Spectre.css - 轻量、响应式的现代 CSS 框架
- mobi.css - 一个轻量、灵活的移动端 CSS 框架

## 5. 基础模版

- 浏览器统一(Cross Browser)
  - HTML5 BOILERPLATE
  - Modernizr
  - Normalize.css
  - HTML5 Shiv - 让ie浏览器成为支持html5的浏览器的解决方法
  - cssFx - 为CSS3自动生成浏览器前缀
  - -prefix-free - Break free from CSS prefix hell
  - ieBetter.js - make ie browser like a morden browser main for ie6~ie8
  - es6-promise - Promise 对象的兼容
- 响应式
  - Responsive - 响应式布局
  - Enquire.js - Awesome Media Queries in JavaScript
  - Free Wall - 创建桌面，移动和平板的动态网格布局
- 适配方案
  - MetaHandler.js：移动端适配各种屏幕无痛工具脚本
  - lib-flexible: 移动端自适应方案
    - 参考: 使用Flexible实现手淘H5页面的终端适配
    - flexible demo 1
    - flexible demo 2
  - pageResponse
  - responsive-page

## 6. 排版

- yue.css
- typo.css
- chinese-copywriting-guidelines - 中文文案排版指南

## 7. 网格系统

- grid
- Flexbox Grid
- MasonJS - creating a perfect grid

## 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 - 一个处理深层次单页系统的路由库
- qs - A querystring parser with nesting support
- query-string - Parse and stringify URL query strings

## 9. UA 识别

- detector
- ua-parser-js
- platform.js

## 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 日期选择

- tui.calendar - A JavaScript calendar that everything you need.
- Both Date and Time picker widget based on twitter bootstrap
- GMU 日历组件
- Mobiscroll
- Pikaday - 日期选择器
- 价格日历
  - PriceCalendar - 酒店价格日历
    - API文档
    - DEMO
  - price-calendar - 价格日历
  - price_calendar - 含有商品价格的日历控件
- airbnb/react-dates - Airbnb 的日期选择器

### 10.7 取色

- Colorpicker plugin for Twitter Bootstrap
- average-color - Get Average Color of Image

### 10.8 标签插件(Tag)

- TaggingJS – 可以灵活定制的 jQuery 标签系统插件
- selectize.js
- Bootstrap Tags Input
- jQuery-Tags-Input

### 10.9 自动完成插件

- algolia/autocomplete.js - 自动补全插件
- At.js - 一个Twitter/微博样式的@自动完成插件
- jquery-textcomplete - 智能搜索提示框/自动补全
- typeahead.js - a fast and fully-featured autocomplete library

### 10.10 样式修正

- autosize - 使文本框自动适应所输入的内容

## 11. 图表绘制/图形库(Graphics)

- apache/incubator-echarts - 百度开源可视化库
- alibaba/BizCharts - 阿里巴巴桌面端商业统计图表解决方案
- antvis/f2 - 蚂蚁金服移动端可视化解决方案
- Highcharts
- Chart.js - Simple HTML5 Charts using Canvas
- Chartist.js
- D3.js - A JavaScript visualization library for HTML and SVG.
  - intro-to-d3 - a D3.js tutorial
- Bonsai - 一个功能强大的JavaScript图形库
- epoch - 数据图表可视化
- Vis.js
- Coutour.js
- ecomfe/zrender - 一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同！
- apexcharts.js - Interactive and Modern SVG Charts
- mapbox/mapbox-gl-js - MapboxGL 基于 WebGL 使用矢量切片和 Mapbox 样式渲染交互式地图
- Kujiale-Mobile/Painter - 小程序生成图片库
- canvg/canvg - Javascript SVG parser and renderer on Canvas

## 12. 日期格式化 & 时间轴

- Moment.js - 日期处理
- Day.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切换)
- better-scroll - inspired by iscroll, and it supports more features and has a better scroll perfermance

### 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 图片剪裁/图片处理/图片转换

- cropperjs - 图片裁切
- 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 - 图片模糊库
- vue-cropper - Vue.js 的图片剪裁插件
- react-cropper - React 的图片剪裁插件
- react-image-crop - React 的图片剪裁插件
- rasterizeHTML.js - HTML转图片(网页截图)
- html2canvas - HTML转图片(实现纯JS网页截图)
- dom-to-image - HTML转图片
- domvas - HTML转图片
- merge-images - 多张图片合成一张图片的浏览器 JS 库，使用了 Canvas

### 13.6 进度条/加载动画(Loading)

- NProgress.js
- progress.js
- HubSpot/pace - Pace 是一个页面加载进度条工具
- jquery-ajax-progress
- nanobar - Very lightweight progress bars.
- waitMe - 很漂亮的loading效果
- spin.js
- sonic.js
- fakeLoader.js
- loaders.css - 一个为性能优化的实现加载动画效果的 CSS 框架
- css-loaders
- Sausage - 跟踪滚动条并记录当前阅读所处节点
- loading.io - 一个 Loading 图标的网站

### 13.7 侧滑插件(offcancas)

- pushy - a responsive off-canvas navigation menu
- Slideout.js - 一个用于移动 Web 应用的触摸滑出式导航菜单

### 13.8 菜单(Menu)

- SuperFish - 基于jQuery的级联下拉菜单
- Responsive Nav - 响应式导航
- metisMenu - A jQuery menu plugin

### 13.9 滚动侦测(ScrollSpy)

- jquery-scrollspy(1)
- jquery-scrollspy(2)
- Waypoints
- ScrollMagic - 像进度条一样使用滚动条

### 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.12 全屏滚动/全屏切换

- pagePiling.js - 全屏滚动效果
- fullPage.js
- onepage-scroll
- zepto.fullpage - 专注于移动端的fullPage.js
- screenfull.js - 切换全屏模式

### 13.13 分屏滚动

- multiscroll.js - 分屏滚动效果

### 13.14 转场效果

- Animsition - 页面切换时的过渡效果

### 13.15 固定元素(Sticky)

- sticky - jQuery Plugin for Sticky Objects
- jquery.pin - 固定页面元素
- stickUp
- Slinky.js - 堆叠头部创建滑动导航列表

### 13.16 触控事件

- Hammer.js
- jquery.event.move.js

### 13.17 拖拽组件

- Draggabilly - 专注于拖拽功能的 JS 库
- dragula - 一个让拖放操作变简单的 JS 库
- GridList - 可拖拉的响应式列表库
- react-dnd - React 拖拽组件

### 13.18 隐藏或展示页面元素

- Headroom.js - 在不需要页头时将其隐藏
- Readmore.js - 内容显示与隐藏插件
- oriDomi - 像指一样折叠Dom元素

### 13.19 滚动条(Scrollbar)

- jScrollPane
- jquery.scrollbar
- perfect-scrollbar
- nanoScrollerJS
- tinyscrollbar

### 13.20 视差滚动(Parallax Scrolling)

- parallax.js
- jparallax
- skrollr

## 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. 字体图标 ( Font Icon )

- bytedance/IconPark
- FortAwesome/Font-Awesome - 提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用 CSS 的样式
- simple-icons/simple-icons - PNG and SVG icons for popular brands
- lipis/flag-icon-css - 所有国家国旗的 icon 库

## 16. 动画(Animate)

- SVGA - 全新的动画格式, 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式
- 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 手势库
- VincentGarreau/particles.js - 粒子特效

## 17. 本地存储

- cross-storage - Cross domain local storage
- localForage
- pouchdb
- basil.js
- Neurosync - JavaScript 本地离线 ORM 库
- LokiJS - 性能优先的 JavaScript 内存数据库
- turbolinks - Javascript pushState

## 18. 模板引擎

- doT.js
- mustache.js
- Handlebars.js
- artTemplate
- baiduTemplate
- JSRender
- EJS - JavaScript Templates
- Juicer - A Light Javascript Templete Engine.
- Tempo
- json2html
- Hogan.js - JavaScript templating from Twitter.
- Dust.js - Linkedin维护的项目
- nunjucks - A powerful templating engine

## 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 等
- SheetJS/js-xlsx - 生成Excel文件并下载

## 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

### 24.2 SSE (Server-Sent Events)

> SSE API用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据.

- EventSource

### 24.3 Web Sockets

## 25. 音频/视频

- videojs/video.js - HTML5 & Flash video player

- videojs/http-streaming - HLS, DASH, and future HTTP streaming protocols library for video.js

- video-dev/hls.js - JavaScript HLS client using Media Source Extension

- Chimeejs/chimee - 奇舞团开源的 h5 播放器，它支持 mp4、m3u8、flv 等多种格式 http://chimee.org/

- paypal/accessible-html5-video-player - PayPal 开源的 HTML5 视频播放器

- clappr/clappr - 开源的Web视频播放器

- sampotts/plyr - A simple HTML5, YouTube and Vimeo player

- captbaritone/webamp

- mediaelement/mediaelement - HTML5 `<video>` and `<audio>` player

- surmon-china/vue-video-player - 适用于 Vue 的 video.js 播放器组件

- jplayer/jPlayer - HTML5 Audio & Video for jQuery

- davatron5000/FitVids.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

- dfcb/BigVideo.js - The jQuery Plugin for Big Background Video

- bdougherty/BigScreen - A simple library for using the JavaScript Full Screen API

- vodkabears/Vide - 视频背景组件

- jaysalvat/buzz - A Javascript HTML5 Audio library

- MediaElement.js

## 26. 按钮

- Buttons - A CSS button library
- ButtonComponentMorph
- ProgressButtonStyles
- CreativeButtons
- CSS3 buttons
- jquery.onoff - Interactive, accessible toggle switches for the web.
- Flipside - 一个能过渡到对话框的按钮
- react-particle-effect-button - 一个 React 组件，按钮点击后会像粒子状消解

## 27. 富文本编辑器/Markdown编辑器/Markdown解析器

- bustle/mobiledoc-kit - 基于mobiledoc数据格式开发所见即所得的 (WYSIWYG) 编辑器
- Simditor - 简单快速的富文本编辑器
- BachEditor- 一个有情怀的编辑器
- TinyMCE
- bootstrap-markdown
- marked - markdown解析器
- Markdown Plus
- Editor.md - 开源在线Markdown编辑器
- stackedit
- Redactor Text Editor
- micromarkdown.js - 轻量级的md解析器
- wangEditor - 支持移动端的轻量级web富文本框
- CKEditor - 可视化 HTML 编辑器
- quilljs/quill - 富文本编辑器
- ianstormtaylor/slate - 一个完全可定制的富文本编辑器
- notadd/neditor - 基于 ueditor的更现代化的富文本编辑器，支持HTTPS
- ProseMirror/prosemirror-view - In-browser semantic rich text editing
- facebook/lexical - Facebook开源的可扩展的文本编辑器框架

## 28. 内容提取(Readability)

- Readability
- json.human.js - Json Formatting for Human Beings

## 29. 颜色(CSS Colors)/SVG/Canvas

- CSS Colours
- SVGeneration
- SVGMagic - 自动的创建PNG来兼容不支持SVG的浏览器
- Adaptive Backgrounds - 从图片抽取主要颜色和应用到父元素
- Seen.js - 渲染3D场景为SVG或者HTML Canvas
- jquery-color - 可以动态改动颜色
- rgbaster.js - 主题色提取
- chroma.js - 一个处理颜色的 JS 库

## 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 - 文本互动效果

- eligrey/FileSaver.js - 文件保存的 JavaScript 库

  支持多种常见的文件存储格式：xls、txt、png 等。它可以方便的把数据转成文件，然后供用户下载。示例代码：

      // 存储文本
      var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
      FileSaver.saveAs(blob, "hello world.txt");

## 32. 布局(Layout)

- 分隔面板(Split Panel)
  - split-pane
  - jQuery UI Layout

## 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

## 36. 移动端优化(Optimizing Mobile Performance)

- FastClick - 处理移动端 click 事件 300 毫秒延迟
- tappy
- jquery-fast-click

## 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数据加密传输
- nanoid - 一款非常小巧的唯一ID生成工具
- harmankang/Lab62 - 一个简单的人类可读的随机 ID 生成库
- dropbox/zxcvbn - 评估密码强度的 JS 库，强度越强，密码越不容易破解

## 40. 调试

- debug - A tiny JavaScript debugging utility modelled after Node.js core’s debugging technique. Works in Node.js and web browsers
- vConsole - 一个针对手机网页的前端 console 调试面板

## 41. 实用工具/其他插件

- jquery-cookie
- JavaScript Cookie
- InstantClick - 预加载用户可能会点击的一些链接
- Async.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 算法
- github-contributions-chart - 类 Github 的贡献日历网格
- leizongmin/js-xss - 根据白名单过滤 HTML(防止 XSS 攻击)
- cure53/DOMPurify - HTML过滤 防止 XSS 攻击
- ajv-validator/ajv - 校验json-schema数据格式

# ES6( ECMAScript 2015 )

## ES6转码器(ES6 to ES5)

- Babel - 一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行
- babelify - 将babel引入到Gulp, Grunt, npm run等构建过程
- traceur-compiler - Traceur is a JavaScript.next-to-JavaScript-of-today compiler

## ES6入门

- ECMAScript 6入门 - 阮一峰老师的开源的JavaScript语言教程
- Learn ES2015
- ES6 - New features Overview & Comparison
- ES6 Overview in 350 Bullet Points
- es6features

# 设计模式( JavaScript Patterns )

- javascript-patterns
- jquery-patterns - A variety of jQuery plugin patterns
- Learning JavaScript Design Patterns

# 在线工具( Online Tools )

- jsbin - Collaborative JavaScript Debugging App
  - jsbin@Github
- jsfiddle
- jsbeautifier - Online JavaScript beautifier
- resume.github.com

# 前端开发工具

## 1. 开发工具

- VSCode
- Atom
- Sublime Text

## 2. 调试工具

- Fiddler
- Weinre
- Rythem
- csscss - 用于检查css代码冗余
- FECS - 基于 Node.js 的前端代码检查工具
- JSON Server - 模拟 API
- swagger-ui - 基于REST的API测试/文档
- graphqurl - curl for GraphQL with autocomplete, subscriptions and GraphiQL.

## 3. 模拟数据( Mock )

- JSONPlaceholder
- json-server - Get a full fake REST API
- lowdb - A small local JSON database powered by lodash
- Mock.js - 一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试
- yapi - YApi 是一个可本地部署的、打通前后端及QA的、可视化的接口管理平台

## 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- 识别网页所使用的字体

## 6. 在线工具

> 图片在线优化工具

- Kraken.io - Online Image Optimizer
- TinyJPG - Compress JPEG images intelligently

> Font Icon 在线生成工具

- IcoMoon App
- Glyphter - The SVG Font Machine
- Free Perfect Icons - 矢量图 svg 图标下载

# 前端参考集

- i0natan/nodebestpractices - Node.js 最佳实践
- 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 编码风格指南
  - spec - 百度前端团队代码规范
- Front-End-Checklist - The perfect Front-End Checklist for modern websites and meticulous developers http://frontendchecklist.com
- 30-seconds-of-code
- 30-seconds-of-css
- project-guidelines - JavaScript工程项目的一系列最佳实践策略
- react-in-patterns - React 模式
- PWA-Book-CN - Progressive Web Apps (PWA) 中文版
- javascript-algorithms - JavaScript 算法与数据结构
- vue-design - Vue技术内幕
- css-protips - CSS 专业技巧
- Front-End-Performance-Checklist - 前端性能优化清单
- 33-js-concepts - 每个 JavaScript 工程师都应懂的33个概念 「翻译」
- joshbuchea/HEAD - HTML 网页的 head 元素 指南
- Airbnb Engineering & Data Science - Airbnb 前端开源项目
- storybooks/storybook - 各大公司的 UI 组件库的 Storybook 展示 https://storybook.js.org/examples/
- LEARN REGEX THE EASY WAY - 正则表达式学习

# 书籍( Frontend-related Books )

- Front-End Developer Handbook 2016
- Front-End Developer Handbook 2017
- Front-End Developer Handbook 2018
- 前端工程师手册
- 前端工程师手册 - 包括前端开发实践、学习前端开发、前端开发工具
- D3 in Depth - 可视化引擎 D3 的教程
- Canvas: Draw on the web - HTML5 Canvas 教程
- Node.js 最佳实践