rhetenor/awesome-awesomeness
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
2d63fe63cdc259a8b0049caa7dfa409165087fa3
awesome-awesomeness/readmes/frontend.md
Jonas Zeunert 2d63fe63cd Restructure with Makefile + add html output
2024-04-20 19:22:54 +02:00

1029 lines
63 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 前端组件库
>搭建web app常用的样式/组件等收集列表(移动优先)
---
- 一个常用的PHP类库, 资源以及技巧列表 [awesome-php](https://github.com/JingwenTian/awesome-php/) 推荐
---
## 0. 前端自动化(Workflow)
- 前端构建工具
- [Webpack - module bundler](https://github.com/webpack/webpack)
- [Yeoman - a set of tools for automating development workflow](https://github.com/yeoman/yeoman)
- [gulp - The streaming build system](http://gulpjs.com/)
- [use-gulp](https://github.com/Platform-CUF/use-gulp)
- [grunt - the JavaScript Task Runner](http://gruntjs.com/)
- [F.I.S - 前端集成解决方案](https://github.com/fex-team/fis)
- [Web Starter Kit - 一个Google 提供的帮助开发者快速设置项目的工具集](https://github.com/google/web-starter-kit)
- [node-prune](https://github.com/tj/node-prune) - Remove unnecessary files from node_modules
- 前端模块管理器
- [Bower - A package manager for the web](http://bower.io/)
- [Browserify](http://browserify.org/)
- [Component](https://github.com/componentjs/component)
- [Duo](http://duojs.org/)
- [RequireJS](http://requirejs.org/)
- [Sea.js](http://seajs.org/)
- [LABjs - 文件加载器](https://github.com/getify/LABjs)
- [css-modulesify - CSS模块加载器](https://github.com/css-modules/css-modulesify)
- css预处理器
- [Less - Less is More , Than CSS](http://lesscss.org/)
- [Sass - Syntactically Awesome Style Sheets](http://sass-lang.com/)
- [Stylus - Expressive, dynamic, robust CSS](http://learnboost.github.io/stylus/)
- 前端性能分析工具
- [analyze-css - CSS 选择器的复杂度和性能分析器](https://github.com/macbre/analyze-css)
## 1. 前端UI框架(Frameworks)
- [Bootstrap](https://github.com/twbs/bootstrap)
- [Foundation](https://github.com/zurb/foundation)
- [Amaze UI](http://amazeui.org/)
- [Semantic UI](https://github.com/semantic-org/semantic-ui)
- [Pure CSS](http://purecss.io/)
- [topcoat](https://github.com/topcoat/topcoat)
- [UIkit](https://github.com/uikit/uikit)
- [Material UI](https://github.com/callemall/material-ui)
- [Materialize - 一个基于 Material Design 的 CSS 框架](https://github.com/Dogfalo/materialize)
- [Framework7](http://www.idangero.us/framework7)
- [mui](https://github.com/dcloudio/mui)
- [ionic framework](http://ionicframework.com/)
- [Fries](https://github.com/jaunesarmiento/fries)
- [jQuery Mobile](http://jquerymobile.com/)
- [App.js](https://github.com/kikinteractive/app)
- [Office UI Fabric - 微软 Office 前端团队的框架](https://github.com/OfficeDev/Office-UI-Fabric)
- [Polymer - Google发布的Web组件构建框架](https://www.polymer-project.org)
- [Layui - 经典模块化前端UI框架](https://github.com/sentsin/layui/)
- [wired-elements](https://github.com/wiredjs/wired-elements) - 一个有手绘效果的网页组件库
- [mustard-ui](https://github.com/kylelogue/mustard-ui) - 一个简洁、好看的 CSS 框架，压缩后只有5.28KB
- [taro-ui](https://github.com/NervJS/taro-ui) - 一款基于 Taro 框架开发的多端 UI 组件库
- [alibaba/ice](https://github.com/alibaba/ice) - 飞冰是一套基于 React 的中后台应用解决方案
## 2. JavaScript 框架汇总
- JavaScript 框架
- [react](https://github.com/facebook/react)
- [ant-design](https://github.com/ant-design/ant-design) - A UI Design Language
- [ant-design-mobile](https://github.com/ant-design/ant-design-mobile) - A configurable Mobile UI
- [ant-design-pro](https://github.com/ant-design/ant-design-pro) - An out-of-box UI solution for enterprise applications
- [Angular](https://github.com/angular/angular)
- [Vue.js](https://github.com/yyx990803/vue) - 数据驱动的组件化MVVM库(用于创建web交互界面和数据双向绑定)
- [vueComponent/ant-design-vue](https://github.com/vueComponent/ant-design-vue) - An enterprise-class UI components based on Ant Design and Vue.
- [awesome-vue](https://github.com/vuejs/awesome-vue)
- [Element - 基于 Vue 2.0 构建了一套完整的桌面 UI 组件库](http://element.eleme.io/#/)
- [Vuex - 一个专门为 Vue.js 应用设计的状态管理架构](https://github.com/vuejs/vuex)
- [at-ui - 一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站产品](https://github.com/AT-UI/at-ui)
- [Mint UI：基于 Vue.js 的移动端组件库](https://github.com/ElemeFE/mint-ui)
- [Vux - 基于 Vue 和 WeUI 的 UI 组件库](https://github.com/airyland/vux)
- [vonic - 基于 Vue.js 和 Ionic 的移动 UI 组件库](https://github.com/wangdahoo/vonic)
   - [vuetify - vue2.0组件库](https://github.com/vuetifyjs/vuetify)
- [iView - 一套基于 Vue.js 的高质量 UI 组件库](https://github.com/iview/iview)
- [vue-i18n](https://github.com/kazupon/vue-i18n)
- [preact](https://github.com/developit/preact/) - React 的 3kb 轻量化方案，拥有同样的 ES6 API
- [jQuery](https://github.com/jquery/jquery)
- [Backbone.js](https://github.com/jashkenas/backbone)
- [ember.js](https://github.com/emberjs/ember.js)
- [Ractive.js](https://github.com/ractivejs/ractive)
- [KISSY](https://github.com/kissyteam/kissy)
- [Zepto.js](https://github.com/madrobby/zepto)
- [Vanilla JS](http://vanilla-js.com/)
- [Can.js](http://canjs.com/guides/Utilities.html)
- [Avalon](https://github.com/RubyLouvre/avalon)
- [T3 JavaScript Framework - 一个用于搭建大型Web应用的客户端JS框架](https://github.com/box/t3js/)
- [jsblocks - Better MV-ish Framework 从简单 UI 到复杂单页应用都适用](https://github.com/astoilkov/jsblocks)
- 轻量级JavaScript框架
- [Min.js - Super minimal selector and event library](https://github.com/remy/min.js)
- [skel.js - A lightweight responsive framework](https://github.com/n33/skel)
- [Sprint.js - 一个高性能、小体积的 DOM 操作库](https://github.com/bendc/sprint)
- [knockout](https://github.com/knockout/knockout)
- [PhantomJS - 一个基于 WebKit 的服务器端 JavaScript API](https://github.com/ariya/phantomjs/)
- 函数式反应型编程框架 FRP (Functional Reactive Programming) library
- [Bacon.js - A small functional reactive programming lib for JavaScript.](https://github.com/baconjs/bacon.js/)
- [Flapjax - 一个支持FRP的JavaScript框架](http://www.flapjax-lang.org/)
- 混合开发框架
- [Electron](https://electronjs.org/) - 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
- [React Native](https://facebook.github.io/react-native/) - 使用JavaScript和React构建原生手机APP
- [electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate) - Electron应用程序样板(基于React、Redux、React Router、Webpack、React Transform HMR用于应用程序快速开发)
- [Weex](https://github.com/apache/incubator-weex) - Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架
- [Flutter](https://github.com/flutter/flutter) - Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面
- 微信小程序开发库
- [Tencent/weui-wxss](https://github.com/Tencent/weui-wxss) - WeUI for 小程序 为微信小程序量身设计
- [Tencent/wepy](https://github.com/Tencent/wepy) - 小程序组件化开发框架
- [youzan/vant-weapp](https://github.com/youzan/vant-weapp) - 轻量、可靠的小程序 UI 组件库 https://youzan.github.io/vant-weapp
- [Meituan-Dianping/mpvue](https://github.com/Meituan-Dianping/mpvue) - 基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系
- [meili/minui](https://github.com/meili/minui) - 基于规范的小程序 UI 组件库，自定义标签组件，简洁、易用、工具化
- [NervJS/taro](https://github.com/NervJS/taro) - 多端统一开发框架，支持用 React 的开发方式编写一次代码，生成能运行在微信小程序、H5、React Native 等的应用
- [dcloudio/uni-app](https://github.com/dcloudio/uni-app) - 使用 Vue.js 开发跨平台应用的前端框架 http://uniapp.dcloud.io
- [didi/chameleon](https://github.com/didi/chameleon) - 一套代码运行多端，一端所见即多端所见 https://CML.JS.org
- [zhuanzhuanfe/fancy-mini](https://github.com/zhuanzhuanfe/fancy-mini) - 小程序代码库，封装一些常用的功能模块和ui组件。
- JavaScript 工具库
- [underscore.js](https://github.com/jashkenas/underscore)
- [Underscore.string.js字符串操作库](https://github.com/epeli/underscore.string)
- [functional.js](https://github.com/leecrossley/functional-js/)
- [Lo-Dash - A JavaScript utility library](https://github.com/lodash/lodash)
- [Lazy.js - a functional utility library for JavaScript](https://github.com/dtao/lazy.js)
- [Fn.js](https://github.com/eliperelman/fn.js)
- [Way.js - 双向数据绑定库](https://github.com/gwendall/way.js)
- [boiler - a utility library that makes tasks in JavaScript easier](https://github.com/Xaxis/boiler)
- 快捷键操作
- [KeyboardJS](https://github.com/RobertWHurst/KeyboardJS) - A JavaScript library for binding keyboard combos without the pain of key codes and key combo conflicts.
- [mousetrap](https://github.com/ccampbell/mousetrap) - Simple library for handling keyboard shortcuts in Javascript
- [Keys.js - 应用快捷键](https://github.com/bitwalker/keys.js)
- [simple-hotkeys](https://github.com/mycolorway/simple-hotkeys)
- [jquery.hotkeys](https://github.com/jeresig/jquery.hotkeys)
- [Mousetrap - 键盘快捷键操作](https://github.com/ccampbell/mousetrap)
- [AlloyLever - 移动web开发者工具面板](https://github.com/AlloyTeam/AlloyLever)
## 3. 前端游戏框架
- [cocos2d-html5](https://github.com/cocos2d/cocos2d-html5)
- [Egret Engine](http://www.egret-labs.org/)
- [LimeJS](https://github.com/digitalfruit/limejs)
- [EaselJS](https://github.com/CreateJS/EaselJS)
- [three.js](https://github.com/mrdoob/three.js)
- [AlloyStick](https://github.com/AlloyTeam/AlloyStick)
- [The-Best-JS-Game-Framework](https://github.com/finscn/The-Best-JS-Game-Framework)
- [CanvasEngine](https://github.com/RSamaium/CanvasEngine)
- [Quintus](https://github.com/cykod/Quintus)
- [Stage.js](https://github.com/piqnt/stage.js/)
- [phaser - 一个快速、免费、开源的 HTML5 游戏框架](https://github.com/photonstorm/phaser/)
- [p2.js](https://github.com/schteppe/p2.js) - web 物理引擎
## 4. ui组件库(CSS Framework)
- [WeUI - 微信官方UI库](https://github.com/weui/weui)
- [jQuery WeUI - WeUI的jQuery版本](https://github.com/lihongxun945/jquery-weui)
- [GMU - 基于zepto的ui组件库，适用于移动端](https://github.com/fex-team/GMU)
- [FrozenUI - 腾讯移动端组件库](https://github.com/frozenui/frozenui)
- [NEC - 更好的CSS方案 ](http://nec.netease.com/)
- [NEJ - 更好的JS解决方案](http://nej.netease.com/)
- [Pure CSS Components](https://github.com/LFeh/css-components/)
- [magic-of-css](https://github.com/adamschwartz/magic-of-css)
- [Primer - The CSS toolkit and guidelines that power GitHub](https://github.com/primer/primer)
- [light7 - A Light and easy to use UI Lib](https://github.com/lihongxun945/light7)
- [Spectre.css - 轻量、响应式的现代 CSS 框架](https://github.com/picturepan2/spectre)
- [mobi.css - 一个轻量、灵活的移动端 CSS 框架](https://github.com/xcatliu/mobi.css)
## 5. 基础模版
- 浏览器统一(Cross Browser)
- [HTML5 BOILERPLATE](https://github.com/h5bp/html5-boilerplate)
- [Modernizr](https://github.com/Modernizr/Modernizr)
- [Normalize.css](https://github.com/necolas/normalize.css/)
- [HTML5 Shiv - 让ie浏览器成为支持html5的浏览器的解决方法](https://github.com/afarkas/html5shiv)
- [cssFx - 为CSS3自动生成浏览器前缀](https://github.com/imsky/cssFx)
- [-prefix-free - Break free from CSS prefix hell](https://github.com/LeaVerou/prefixfree)
- [ieBetter.js - make ie browser like a morden browser main for ie6~ie8](https://github.com/zhangxinxu/ieBetter.js)
- [es6-promise - Promise 对象的兼容](https://github.com/stefanpenner/es6-promise)
- 响应式
- [Responsive - 响应式布局](https://github.com/ResponsiveBP/Responsive)
- [Enquire.js - Awesome Media Queries in JavaScript](https://github.com/WickyNilliams/enquire.js)
- [Free Wall - 创建桌面，移动和平板的动态网格布局](https://github.com/kombai/freewall)
- 适配方案
- [MetaHandler.js：移动端适配各种屏幕无痛工具脚本](https://github.com/unbug/generator-webappstarter/blob/master/app/templates/app/src/util/MetaHandler.js)
- [lib-flexible: 移动端自适应方案](https://github.com/amfe/lib-flexible)
- [参考: 使用Flexible实现手淘H5页面的终端适配](https://github.com/amfe/article/issues/17?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io)
- [flexible demo 1](http://ufologist.github.io/responsive-page/others-responsive/flexible.html)
- [flexible demo 2](http://huodong.m.taobao.com/act/yibo.html)
- [pageResponse](https://github.com/peunzhang/pageResponse)
- [responsive-page](https://github.com/ufologist/responsive-page)
## 6. 排版
- [yue.css](https://github.com/lepture/yue.css)
- [typo.css](https://github.com/sofish/typo.css)
- [chinese-copywriting-guidelines - 中文文案排版指南](https://github.com/sparanoid/chinese-copywriting-guidelines)
## 7. 网格系统
- [grid](https://github.com/aekaplan/grid)
- [Flexbox Grid](https://github.com/kristoferjoseph/flexboxgrid)
- [MasonJS - creating a perfect grid](https://github.com/DrewDahlman/Mason)
## 8. 路由和链接(Routing And URLs)
- [History.js - gracefully supports the HTML5 History/State APIs](https://github.com/browserstate/history.js)
- [jquery-pjax - pushState+ajax](https://github.com/defunkt/jquery-pjax)
- [jquery-address - Deep Linking](https://github.com/asual/jquery-address)
- [page.js - Micro client-side router](https://github.com/visionmedia/page.js)
- [crossroads.js](https://github.com/millermedeiros/crossroads.js)
- [hash.js](https://github.com/javve/hash.js)
- [path.js](https://github.com/mtrpcic/pathjs)
- [director.js - 前端路由库(通过#符号进行路径组织,结合vue的component可进行单页的局部模块刷新)](https://github.com/flatiron/director)
- [URI.js](https://github.com/medialize/URI.js)
- [Roadcrew.js](https://github.com/grobmeier/Roadcrew.js)
- [SpeakingURL](https://github.com/pid/speakingurl)
- [uparams - An URL params parser](https://github.com/YanagiEiichi/uparams)
- [StateMan - 一个处理深层次单页系统的路由库](https://github.com/leeluolee/stateman)
- [qs - A querystring parser with nesting support](https://github.com/ljharb/qs)
- [query-string](https://github.com/sindresorhus/query-string) - Parse and stringify URL query strings
## 9. UA 识别
- [detector](https://github.com/hotoo/detector)
- [ua-parser-js](https://github.com/faisalman/ua-parser-js/)
- [platform.js](https://github.com/bestiejs/platform.js/)
## 10. 表单处理
### 10.1 表单验证(Form Validator)/表单提示
- [Validator](https://github.com/niceue/validator)
- [Parsley](https://github.com/guillaumepotier/Parsley.js)
- [jquery.form.js - jQuery Form Plugin](https://github.com/malsup/form)
- [Validform](https://github.com/haiercdboy/Validform)
- [validator.js](https://github.com/sofish/validator.js)
- [jquery-validation - jQuery Validation Plugin](https://github.com/jzaefferer/jquery-validation)
- [formvalidator.js](https://github.com/victorjonsson/jQuery-Form-Validator)
- [Fort.js – 表单填写进度提示](http://github.com/Colourity/Fort.js)
- [mailcheck - 用于检测email地址的域名](https://github.com/mailcheck/mailcheck)
- [Floatlable.js - 输入时显示placeholder文本](https://github.com/clubdesign/floatlabels.js)
- [jQuery Label Better](https://github.com/peachananr/label_better)
- [validator.js](https://github.com/ppoffice/validator.js)
### 10.2 < input > 相关
- [cleave.js - 格式化你的输入内容](https://github.com/nosir/cleave.js)
### 10.3 < select > 相关
- [Chosen](https://github.com/harvesthq/chosen)
- [Select2](https://github.com/select2/select2)
- [bootstrap-select](https://github.com/silviomoreto/bootstrap-select)
### 10.4 单选框/复选框相关
- [iCheck - 增强复选框和单选按钮](https://github.com/fronteed/iCheck)
- [Switchery - iOS 7 style switches for your checkboxes](https://github.com/abpetkov/switchery)
### 10.5 上传组件
- [jQuery File Upload Plugin](https://github.com/blueimp/jQuery-File-Upload)
- [百度 Web Uploader](http://fex-team.github.io/webuploader/)
- [uploadify](http://www.uploadify.com/)
- [Plupload](https://github.com/moxiecode/plupload)
- [Fine Uploader](http://fineuploader.com/index.html)
- [arale-upload - 轻量级 iframe and html5 file uploader](https://github.com/aralejs/upload)
- [Dropzone.js - 文件上传库(可获取文件mime, 文件大小等; 针对图片可生成缩略图,获取图片宽度,高度)](https://github.com/enyo/dropzone)
- [flow.js](https://github.com/flowjs/flow.js)
- [localResizeIMG - 前端本地客户端压缩图片，兼容IOS，Android，PC](https://github.com/think2011/localResizeIMG)
- [simple-uploader](https://github.com/mycolorway/simple-uploader)
### 10.6 日期选择
- [tui.calendar](https://github.com/nhnent/tui.calendar) - A JavaScript calendar that everything you need.
- [Both Date and Time picker widget based on twitter bootstrap](https://github.com/smalot/bootstrap-datetimepicker)
- [GMU 日历组件](http://gmu.baidu.com/demo/widget/calendar/calendar.html)
- [Mobiscroll](https://github.com/acidb/mobiscroll)
- [Pikaday - 日期选择器](https://github.com/dbushell/Pikaday)
- 价格日历
- [PriceCalendar - 酒店价格日历](https://github.com/fugm/PriceCalendar)
- [API文档](http://fgm.cc/learn/calendar/price-calendar/api.html)
- [DEMO](http://fgm.cc/learn/calendar/price-calendar/)
- [price-calendar - 价格日历](https://github.com/wind-stone/price-calendar)
- [price_calendar - 含有商品价格的日历控件](https://github.com/zhangyi5628/price_calendar)
- [airbnb/react-dates](https://github.com/airbnb/react-dates) - Airbnb 的日期选择器
### 10.7 取色
- [Colorpicker plugin for Twitter Bootstrap](https://github.com/mjolnic/bootstrap-colorpicker)
- [average-color - Get Average Color of Image](https://github.com/matkl/average-color)
### 10.8 标签插件(Tag)
- [TaggingJS – 可以灵活定制的 jQuery 标签系统插件](https://github.com/sniperwolf/taggingJS)
- [selectize.js](https://github.com/brianreavis/selectize.js)
- [Bootstrap Tags Input](https://github.com/timschlechter/bootstrap-tagsinput/)
- [jQuery-Tags-Input](https://github.com/xoxco/jQuery-Tags-Input)
### 10.9 自动完成插件
- [algolia/autocomplete.js](https://github.com/algolia/autocomplete.js) - 自动补全插件
- [At.js - 一个Twitter/微博样式的@自动完成插件](https://github.com/ichord/At.js)
- [jquery-textcomplete - 智能搜索提示框/自动补全](https://github.com/yuku-t/jquery-textcomplete)
- [typeahead.js - a fast and fully-featured autocomplete library](https://github.com/twitter/typeahead.js)
### 10.10 样式修正
- [autosize - 使文本框自动适应所输入的内容](https://github.com/jackmoore/autosize)
## 11. 图表绘制/图形库(Graphics)
- [apache/incubator-echarts](https://github.com/ecomfe/echarts) - 百度开源可视化库
- [alibaba/BizCharts](https://github.com/alibaba/BizCharts) - 阿里巴巴桌面端商业统计图表解决方案
- [antvis/f2](https://github.com/antvis/f2) - 蚂蚁金服移动端可视化解决方案
- [Highcharts](https://github.com/highslide-software/highcharts.com)
- [Chart.js](https://github.com/nnnick/Chart.js) - Simple HTML5 Charts using Canvas
- [Chartist.js](https://github.com/gionkunz/chartist-js)
- [D3.js](https://github.com/mbostock/d3) - A JavaScript visualization library for HTML and SVG.
- [intro-to-d3](https://github.com/square/intro-to-d3) - a D3.js tutorial
- [Bonsai](https://github.com/uxebu/bonsai) - 一个功能强大的JavaScript图形库
- [epoch](https://github.com/fastly/epoch/) - 数据图表可视化
- [Vis.js](https://github.com/almende/vis)
- [Coutour.js](https://github.com/forio/contour)
- [ecomfe/zrender](https://github.com/ecomfe/zrender) - 一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同！
- [apexcharts.js](https://github.com/apexcharts/apexcharts.js) - Interactive and Modern SVG Charts
- [mapbox/mapbox-gl-js](https://github.com/mapbox/mapbox-gl-js) - MapboxGL 基于 WebGL 使用矢量切片和 Mapbox 样式渲染交互式地图
- [Kujiale-Mobile/Painter](https://github.com/Kujiale-Mobile/Painter) - 小程序生成图片库
- [canvg/canvg](https://github.com/canvg/canvg) - Javascript SVG parser and renderer on Canvas
## 12. 日期格式化 & 时间轴
- [Moment.js](http://momentjs.com/) - 日期处理
- [Day.js](https://github.com/xx45/dayjs) - 日期处理
- [Smart Time Ago](https://github.com/pragmaticly/smart-time-ago) - 显示相对时间
- [timeline.js](https://github.com/vorg/timeline.js)
- [timeago.js](https://github.com/hustcc/timeago.js)
- [date-utils](https://www.npmjs.com/package/date-utils) - Date Pollyfills for Node.js and Browser
## 13. 页面交互
### 13.1 Slider
- [slick - the last carousel you'll ever need](https://github.com/kenwheeler/slick/)
- [Swipe - the most accurate touch slider](https://github.com/thebird/Swipe)
- [Swiper - Most modern mobile touch slider](https://github.com/nolimits4web/Swiper)
- [iscroll - Smooth scrolling for the web](https://github.com/cubiq/iscroll)
- [iSlider - 移动端滑动组件](https://github.com/BE-FE/iSlider)
- [OwlCarousel - create beautiful responsive carousel slider](https://github.com/OwlFonk/OwlCarousel)
- [jquery-mousewheel - jQuery鼠标滚轮滚动侦测插件](https://github.com/jquery/jquery-mousewheel/)
- [Glide.js - 轻量级滑块组件](https://github.com/jedrzejchalubek/Glide.js)
- [PhotoSwipe](https://github.com/dimsemenov/photoswipe)
- [TouchSlide - 触屏滑动特效(焦点图,Tab切换)](http://www.superslide2.com/TouchSlide/)
- [better-scroll](https://github.com/ustbhuangyi/better-scroll) - inspired by iscroll, and it supports more features and has a better scroll perfermance
### 13.2 瀑布流
- [Masonry](http://masonry.desandro.com/)
- [Isotope - Filter & sort magical layouts](http://isotope.metafizzy.co/)
- [Bricklayer](https://github.com/ademilter/bricklayer)
### 13.3 懒加载/加载监听/预加载
- [imagesLoaded](https://github.com/desandro/imagesloaded)
- [Echo.js](https://github.com/toddmotto/echo)
- [lazySizes](https://github.com/aFarkas/lazysizes)
- [jquery_lazyload](https://github.com/tuupola/jquery_lazyload)
- [BttrLazyLoading](https://github.com/shprink/bttrlazyloading/)
- [lazyload.js](https://github.com/vvo/lazyload)
- [layzr.js - 一个小巧快速的图片懒加载库](https://github.com/callmecavs/layzr.js)
- [waitForImages - 图片加载监听库](https://github.com/alexanderdickson/waitForImages)
- [PxLoader - JS预加载库:实现图片、声音等各种文件的预加载功能](https://github.com/thinkpixellab/PxLoader)
- [bindWithDelay - jQuery Plugin For Delayed Event Execution](https://github.com/bgrins/bindWithDelay)
- [TypeWatch - 停止输入时调用](https://github.com/dennyferra/TypeWatch)
### 13.4 图片轮播(幻灯片)/图片展示
- [FlexSlider](https://github.com/woothemes/FlexSlider)
- [unslider - 小而美的轮播库](https://github.com/idiot/unslider)
- [prettyPhoto](https://github.com/scaron/prettyphoto)
- [FlickerPlate - A cool jQuery plugin that lets you flick through content.](https://github.com/chrishumboldt/Flickerplate)
- [Holder.js - Client-side image placeholders.](https://github.com/imsky/holder)
- [RowGrid.js - 在径直的行里放置图片](https://github.com/brunjo/rowGrid.js)
- [ImageLightbox.js - 灯箱效果](http://osvaldas.info/examples/image-lightbox-responsive-touch-friendly/)
- [JQuery Panorama Viewer - 全景视图](https://github.com/peachananr/panorama_viewer)
- [Intense Images - 全屏查看图片](https://github.com/tholman/intense-images)
- [Picturefill - 一个响应式图片 JS 插件](http://scottjehl.github.io/picturefill/)
- [zoom.js - 一个 jQuery 图片放大插件](https://github.com/fat/zoom.js)
- [watermarkjs - 一个在浏览器中添加图片水印的 JS 库](https://github.com/brianium/watermarkjs)
- [responsive-images.js](https://github.com/kvendrik/responsive-images.js)
- [Turntable.js - 轻易实现图像的3D旋转](https://github.com/polarnotion/turntable)
- [ResponsifyJS - 让图像完全响应式而不会牺牲图像的主要部分](https://github.com/wentin/ResponsifyJS)
- [react-slick - React 实现的轮播图插件](https://github.com/akiran/react-slick)
### 13.5 图片剪裁/图片处理/图片转换
- [cropperjs](https://github.com/fengyuanchen/cropperjs) - 图片裁切
- [Jcrop - Image Cropping Plugin for jQuery](https://github.com/tapmodo/Jcrop)
- [croppic - an image cropping jquery plugin](https://github.com/sconsult/croppic)
- [smartcrop.js - 智能图片裁剪库](https://github.com/jwagner/smartcrop.js)
- [jQuery.eraser - 图像擦除插件](https://github.com/boblemarin/jQuery.eraser)
- [DD_belatedPNG.js - 让IE6支持透明PNG图片](http://www.dillerdesign.com/experiment/DD_belatedPNG/)
- [FocusPoint.js 实现图片的响应式裁剪](https://github.com/jonom/jquery-focuspoint)
- [imgareaselect](https://github.com/odyniec/imgareaselect)
- [CSSgram - CSS 实现的 Instagram 滤镜库](https://github.com/una/CSSgram)
- [instagram.css - 另一个 CSS 实现的 Instagram 滤镜库](https://github.com/picturepan2/instagram.css)
- [antimoderate - 图片模糊库](https://github.com/whackashoe/antimoderate)
- [vue-cropper](https://github.com/xyxiao001/vue-cropper/) - Vue.js 的图片剪裁插件
- [react-cropper](https://github.com/roadmanfong/react-cropper) - React 的图片剪裁插件
- [react-image-crop](https://github.com/DominicTobias/react-image-crop) - React 的图片剪裁插件
- [rasterizeHTML.js](https://github.com/cburgmer/rasterizeHTML.js) - HTML转图片(网页截图)
- [html2canvas](https://github.com/niklasvh/html2canvas) - HTML转图片(实现纯JS网页截图)
- [dom-to-image](https://github.com/tsayen/dom-to-image) - HTML转图片
- [domvas](https://github.com/pbakaus/domvas) - HTML转图片
- [merge-images](https://github.com/lukechilds/merge-images) - 多张图片合成一张图片的浏览器 JS 库，使用了 Canvas
### 13.6 进度条/加载动画(Loading)
- [NProgress.js](http://ricostacruz.com/nprogress/)
- [progress.js](https://github.com/usablica/progress.js)
- [HubSpot/pace](https://github.com/HubSpot/pace) - Pace 是一个页面加载进度条工具
- [jquery-ajax-progress](https://github.com/englercj/jquery-ajax-progress)
- [nanobar](https://github.com/jacoborus/nanobar) - Very lightweight progress bars.
- [waitMe](https://github.com/vadimsva/waitMe) - 很漂亮的loading效果
- [spin.js](https://github.com/fgnass/spin.js)
- [sonic.js](https://github.com/padolsey/sonic.js)
- [fakeLoader.js](https://github.com/joaopereirawd/fakeLoader.js)
- [loaders.css](https://github.com/ConnorAtherton/loaders.css) - 一个为性能优化的实现加载动画效果的 CSS 框架
- [css-loaders](https://github.com/lukehaas/css-loaders)
- [Sausage](https://github.com/christophercliff/sausage) - 跟踪滚动条并记录当前阅读所处节点
- [loading.io](https://loading.io/) - 一个 Loading 图标的网站
### 13.7 侧滑插件(offcancas)
- [pushy - a responsive off-canvas navigation menu ](https://github.com/christophery/pushy)
- [Slideout.js - 一个用于移动 Web 应用的触摸滑出式导航菜单](https://github.com/mango/slideout)
### 13.8 菜单(Menu)
- [SuperFish - 基于jQuery的级联下拉菜单](https://github.com/joeldbirch/superfish)
- [Responsive Nav - 响应式导航](https://github.com/viljamis/responsive-nav.js)
- [metisMenu - A jQuery menu plugin](https://github.com/onokumus/metisMenu)
### 13.9 滚动侦测(ScrollSpy)
- [jquery-scrollspy(1)](https://github.com/sxalexander/jquery-scrollspy)
- [jquery-scrollspy(2)](https://github.com/thesmart/jquery-scrollspy)
- [Waypoints](https://github.com/imakewebthings/waypoints)
- [ScrollMagic - 像进度条一样使用滚动条](https://github.com/janpaepke/ScrollMagic)
### 13.10 滚动加载更多/下拉刷新(Pull to Refresh)
- [jScroll](https://github.com/pklauzinski/jscroll)
- [web-pull-to-refresh](https://github.com/apeatling/web-pull-to-refresh)
- [pulltorefresh](https://github.com/dwcares/pulltorefresh)
- [RubberBand.js - add pull-to-refresh functionality to any page.](https://github.com/ThrivingKings/RubberBand.js)
### 13.11 平滑滚动插件(Smooth Scroll)
- [jquery-smooth-scroll](https://github.com/kswedberg/jquery-smooth-scroll)
- [jquery.scrollTo - 平滑滚动到页面指定位置](https://github.com/flesler/jquery.scrollTo)
- [smooth-scroll](https://github.com/cferdinandi/smooth-scroll)
- [scrollUp](https://github.com/markgoodyear/scrollup)
- [elevator.js - 一个模拟电梯运行“返回顶部”的 JS 插件](https://github.com/tholman/elevator.js)
### 13.12 全屏滚动/全屏切换
- [pagePiling.js - 全屏滚动效果](https://github.com/alvarotrigo/pagePiling.js)
- [fullPage.js](https://github.com/alvarotrigo/fullPage.js/)
- [onepage-scroll](https://github.com/peachananr/onepage-scroll)
- [zepto.fullpage - 专注于移动端的fullPage.js](https://github.com/yanhaijing/zepto.fullpage)
- [screenfull.js - 切换全屏模式](https://github.com/sindresorhus/screenfull.js)
### 13.13 分屏滚动
- [multiscroll.js - 分屏滚动效果](https://github.com/alvarotrigo/multiscroll.js)
### 13.14 转场效果
- [Animsition - 页面切换时的过渡效果](https://github.com/blivesta/animsition)
### 13.15 固定元素(Sticky)
- [sticky - jQuery Plugin for Sticky Objects](https://github.com/garand/sticky)
- [jquery.pin - 固定页面元素](https://github.com/webpop/jquery.pin)
- [stickUp](https://github.com/LiranCohen/stickUp)
- [Slinky.js - 堆叠头部创建滑动导航列表](https://github.com/iclanzan/slinky)
### 13.16 触控事件
- [Hammer.js](https://github.com/hammerjs/hammer.js)
- [jquery.event.move.js](https://github.com/stephband/jquery.event.move)
### 13.17 拖拽组件
- [Draggabilly - 专注于拖拽功能的 JS 库](https://github.com/desandro/draggabilly)
- [dragula - 一个让拖放操作变简单的 JS 库](https://github.com/bevacqua/dragula)
- [GridList - 可拖拉的响应式列表库](https://github.com/uberVU/grid)
- [react-dnd](https://github.com/react-dnd/react-dnd) - React 拖拽组件
### 13.18 隐藏或展示页面元素
- [Headroom.js - 在不需要页头时将其隐藏](http://www.bootcss.com/p/headroom.js/)
- [Readmore.js - 内容显示与隐藏插件](https://github.com/jedfoster/Readmore.js)
- [oriDomi - 像指一样折叠Dom元素](https://github.com/dmotz/oriDomi)
### 13.19 滚动条(Scrollbar)
- [jScrollPane](https://github.com/vitch/jScrollPane)
- [jquery.scrollbar](https://github.com/gromo/jquery.scrollbar)
- [perfect-scrollbar](https://github.com/noraesae/perfect-scrollbar)
- [nanoScrollerJS](https://github.com/jamesflorentino/nanoScrollerJS)
- [tinyscrollbar](https://github.com/wieringen/tinyscrollbar)
### 13.20 视差滚动(Parallax Scrolling)
- [parallax.js](https://github.com/wagerfield/parallax)
- [jparallax](https://github.com/stephband/jparallax)
- [skrollr](https://github.com/Prinzhorn/skrollr)
## 13.21 缩放 (Zooming)
- [zoom.js - 一款效果很独特的页面内容缩放插件](https://github.com/hakimel/zoom.js)
- [zoom.js - 一个 jQuery 图片放大插件](https://github.com/fat/zoom.js)
- [jQuery Zoom - mouseover时图片缩放效果](https://github.com/jackmoore/zoom)
## 14. 代码高亮插件/代码编辑器
- [google-code-prettify](https://code.google.com/p/google-code-prettify/)
- [highlight.js](https://highlightjs.org/)
- [Rainbow](http://craig.is/making/rainbows)
- [ACE](https://github.com/ajaxorg/ace)
- [CodeMirror](https://github.com/codemirror/codemirror)
- [Crayon Syntax Highlighter](https://github.com/aramk/crayon-syntax-highlighter)
- [prism - Lightweight, robust, elegant syntax highlighting.](https://github.com/PrismJS/prism)
## 15. 字体图标 ( Font Icon )
- [bytedance/IconPark](https://github.com/bytedance/IconPark)
- [FortAwesome/Font-Awesome](https://github.com/FortAwesome/Font-Awesome) - 提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用 CSS 的样式
- [simple-icons/simple-icons](https://github.com/simple-icons/simple-icons) - PNG and SVG icons for popular brands
- [lipis/flag-icon-css](https://github.com/lipis/flag-icon-css) - 所有国家国旗的 icon 库
## 16. 动画(Animate)
- [SVGA](http://svga.io/index.html) - 全新的动画格式, 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式
- [animate.css - A cross-browser library of CSS animations.](https://github.com/daneden/animate.css)
- [Transit - CSS transitions and transformations for jQuery](https://github.com/rstacruz/jquery.transit)
- [anime.js - Javascript 动画引擎](https://github.com/juliangarnier/anime)
- [WOW - 在滚动过程中展示CSS动画效果(默认触发animate.css动画)](https://github.com/matthieua/WOW)
- [AniJS - A Library to Raise your Web Design without Coding](https://github.com/anijs/anijs/)
- [Move.js - 简化CSS3动画的JS库](https://github.com/visionmedia/move.js)
- [ScrollMe – 在网页中加入各种滚动动画效果](https://github.com/nckprsn/scrollme)
- [Effeckt.css - A Performant Transitions and Animations Library](https://github.com/h5bp/Effeckt.css)
- [NEC动画库](http://nec.netease.com/library/category/#animation)
- [csshake - CSS classes to move your DOM](https://github.com/elrumordelaluz/csshake)
- [magic - CSS3 Animations with special effects](https://github.com/miniMAC/magic)
- [SpinKit](https://github.com/tobiasahlin/SpinKit)
- [Velocity.js - 加速JavaScript动画](https://github.com/julianshapiro/velocity)
- [lenticular.js - 响应倾斜或鼠标事件创建图片动画](https://github.com/thomasxiii/lenticular.js)
- [jQuery Interactive 3D - Create a 3D interactive object using images](https://github.com/peachananr/interactive_3d)
- [AnimateScroll - A Simple jQuery Plugin for Animating Scroll](https://github.com/ramswaroop/animatescroll.js)
- [Blast.js - 把动画和样式注入到文本中](https://github.com/julianshapiro/blast)
- [Bounce.js - 一个用于制作漂亮 CSS3 关键帧动画的 JS 库](https://github.com/tictail/bounce.js)
- [Sticker.js - create a Sticker Effect](https://github.com/cmiscm/stickerjs)
- [scrollReveal.js - 元素进入可视区域自动触发设置好的动画](https://github.com/julianlloyd/scrollReveal.js)
- [stroll.js - CSS3 list scroll effects](https://github.com/hakimel/stroll.js)
- [jQuery Easing - 动画效果扩展](https://github.com/gdsmith/jquery.easing)
- [animations - CSS3 ANIMATION CHEAT SHEET](http://www.justinaguilar.com/animations/index.html)
- [iconate.js：将 icons 增加动画效果的 JS 库](https://github.com/bitshadow/iconate)
- [Odometer - 数字之间的垂直切换](https://github.com/HubSpot/odometer)
- Hover - 悬停效果
- [Hover.css - 很多鼠标Hover态的效果](https://github.com/IanLunn/Hover)
- [imagehover.css - 为图片添加悬停效果](https://github.com/ciar4n/imagehover.css)
- [iHover - 图片悬停效果](https://github.com/gudh/ihover)
- [ImageCaptionHoverAnimation](https://github.com/hasinhayder/ImageCaptionHoverAnimation)
- [Bootstrap Hover Image Gallery](http://miketricking.github.io/dist/)
- Multi-touch gestures library - Web手势库
- [AlloyFinger - 腾讯 AlloyTeam 出品的超级小的 Web 手势库](https://github.com/AlloyTeam/AlloyFinger)
- [VincentGarreau/particles.js](https://github.com/VincentGarreau/particles.js/) - 粒子特效
## 17. 本地存储
- [cross-storage - Cross domain local storage](https://github.com/zendesk/cross-storage)
- [localForage](https://github.com/mozilla/localForage)
- [pouchdb](https://github.com/pouchdb/pouchdb)
- [basil.js](https://github.com/Wisembly/basil.js)
- [Neurosync - JavaScript 本地离线 ORM 库](https://github.com/ClickerMonkey/neurosync)
- [LokiJS - 性能优先的 JavaScript 内存数据库](https://github.com/techfort/LokiJS)
- [turbolinks - Javascript pushState](https://github.com/turbolinks/turbolinks)
## 18. 模板引擎
- [doT.js](https://github.com/olado/doT)
- [mustache.js](https://github.com/janl/mustache.js)
- [Handlebars.js](http://www.jingwentian.com/t-66)
- [artTemplate](https://github.com/aui/artTemplate)
- [baiduTemplate](https://github.com/wangxiao/BaiduTemplate)
- [JSRender](https://github.com/BorisMoore/jsrender)
- [EJS - JavaScript Templates](https://github.com/tj/ejs)
- [Juicer - A Light Javascript Templete Engine.](https://github.com/PaulGuo/Juicer)
- [Tempo](https://github.com/twigkit/tempo)
- [json2html](https://github.com/moappi/json2html)
- [Hogan.js - JavaScript templating from Twitter.](https://github.com/twitter/hogan.js)
- [Dust.js - Linkedin维护的项目](https://github.com/linkedin/dustjs)
- [nunjucks](https://github.com/mozilla/nunjucks) - A powerful templating engine
## 19. 通知组件/弹框组件/模态窗口
- [Notify.js(Web Notifications API)](https://github.com/alexgibson/notify.js)
- [alertify.js](https://github.com/fabien-d/alertify.js)
- [AlertifyJS](https://github.com/MohammadYounes/AlertifyJS)
- [SweetAlert](https://github.com/t4t5/sweetalert)
- [Messenger - 非常酷的弹框组件](https://github.com/HubSpot/messenger)
- [PNotify](https://github.com/sciactive/pnotify)
- [Notify.js - A simple, versatile notification library](https://github.com/jpillora/notifyjs)
- [Remodal - 模态窗口插件](https://github.com/VodkaBears/Remodal)
- [action.js - 极简的tip和Modal弹窗效果](https://github.com/egoist/action.js)
- [Modaal - 一个创建弹出窗口的jQuery插件](https://github.com/humaan/Modaal)
- [Vex - 可以实现3D动效的弹出对话框堆叠效果](https://github.com/hubspot/vex)
## 20. 提示控件(Tooltips)
- [hint.css - 一款非常小巧的提示框效果](https://github.com/chinchang/hint.css)
- [qTip2 - Pretty powerful tooltips](https://github.com/qTip2/qTip2)
- [tooltip - CSS Tooltips](https://github.com/HubSpot/tooltip)
- [tooltipster - A jQuery tooltip plugin](https://github.com/iamceege/tooltipster)
- [grumble.js - 气泡形状的提示（Tooltip）控件](https://github.com/jamescryer/grumble.js)
- [Ouibounce - 离站提示控件](https://github.com/carlsednaoui/ouibounce)
- [intro.js - 一个创建引导式网站介绍功能的 JS 库](https://github.com/usablica/intro.js)
- [data-tip.css - 纯 CSS 实现的工具提示](https://github.com/egoist/data-tip.css)
## 21. 对话框/遮罩层/弹出层(lightbox)
- [fancyBox - Fancy jQuery lightbox](https://github.com/fancyapps/fancyBox)
- [jquery-lightbox - The popular lightbox script, ported to jQuery](https://github.com/krewenki/jquery-lightbox)
- [Colorbox - a jQuery lightbox](https://github.com/jackmoore/colorbox)
- [artDialog - 经典的网页对话框组件](https://github.com/aui/artDialog)
- [DialogEffects](https://github.com/codrops/DialogEffects)
- [jQuery blockUI - Page or element overlay](https://github.com/malsup/blockui/)
- [layer - web弹出窗/层](https://github.com/sentsin/layer/)
## 22. 文档/表格/PDF
- [Backgrid.js - 强大的表格组件](https://github.com/wyuenho/backgrid)
- [handsontable - 在线可编辑excel表格](https://github.com/handsontable/handsontable)
- [jQuery Bootgrid - 用于ajax生成动态表格](https://github.com/rstaib/jquery-bootgrid)
- [DataTables - Table plug-in for jQuery](https://github.com/DataTables/DataTables)
- [PDF.js - 一个 JavaScript 编写的 PDF 阅读器](https://github.com/mozilla/pdf.js)
- [jsPDF - Generate PDF files in JavaScript](https://github.com/MrRio/jsPDF)
- [Recline.js - 灵活操作和展示数据](https://github.com/okfn/recline/)
- [Dynatable - 交互式表格插件](https://github.com/alfajango/jquery-dynatable)
- [fattable - 创建无限滚动无限行列数的表格](https://github.com/fulmicoton/fattable)
- [Clusterize.js - 一个轻松显示大数据集的 JS 插件](https://github.com/NeXTs/Clusterize.js)
- [Uniform -表单美化插件](https://github.com/AudithSoftworks/Uniform)
- [tableExport - 导出HTML Table为 Excel、PDF 等 ](https://github.com/kayalshri/tableExport.jquery.plugin)
- [SheetJS/js-xlsx](https://github.com/SheetJS/js-xlsx) - 生成Excel文件并下载
## 23. 目录树插件
- [zTree_v3 - jQuery Tree Plugin](https://github.com/zTree/zTree_v3)
- [jstree - jQuery Tree Plugin](https://github.com/vakata/jstree)
- [fancytree - Tree plugin for jQuery](https://github.com/mar10/fancytree)
## 24. 前后端交互
### 24.1 Ajax模块
- [fetch - A window.fetch JavaScript polyfill](https://github.com/github/fetch)
- [reqwest - browser asynchronous http requests](https://github.com/ded/reqwest)
- [ajax - Standalone AJAX library](https://github.com/ForbesLindesay/ajax)
- [then-request](https://github.com/then/then-request)
- [browser-request](https://github.com/iriscouch/browser-request)
- [superagent](https://github.com/visionmedia/superagent)
- [minAjax.js](https://github.com/argunner/minAjax.js/)
- [qwest - 第三方的Ajax库](https://github.com/pyrsmk/qwest)
- [axios - Promise based HTTP client for the browser and node.js](https://github.com/mzabriskie/axios)
- [whatwg-fetch](https://github.com/fis-components/whatwg-fetch)
- [jsonp](https://github.com/webmodules/jsonp) - A simple JSONP implementation
- [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch) - Isomorphic WHATWG Fetch API, for Node & Browserify
### 24.2 SSE (Server-Sent Events)
> SSE API用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据.
- [EventSource](https://github.com/Yaffle/EventSource)
### 24.3 Web Sockets
## 25. 音频/视频
- [videojs/video.js](https://github.com/videojs/video.js) - HTML5 & Flash video player
- [videojs/http-streaming](https://github.com/videojs/http-streaming) - HLS, DASH, and future HTTP streaming protocols library for video.js
- [video-dev/hls.js](https://github.com/video-dev/hls.js) - JavaScript HLS client using Media Source Extension
- [Chimeejs/chimee](https://github.com/Chimeejs/chimee) - 奇舞团开源的 h5 播放器，它支持 mp4、m3u8、flv 等多种格式 http://chimee.org/
- [paypal/accessible-html5-video-player](https://github.com/paypal/accessible-html5-video-player) - PayPal 开源的 HTML5 视频播放器
- [clappr/clappr](https://github.com/clappr/clappr) - 开源的Web视频播放器
- [sampotts/plyr](https://github.com/sampotts/plyr) - A simple HTML5, YouTube and Vimeo player
- [captbaritone/webamp](https://github.com/captbaritone/webamp)
- [mediaelement/mediaelement](https://github.com/mediaelement/mediaelement) - HTML5 `<video>` and `<audio>` player
- [surmon-china/vue-video-player](https://github.com/surmon-china/vue-video-player) - 适用于 Vue 的 video.js 播放器组件
- [jplayer/jPlayer](https://github.com/happyworm/jPlayer) - HTML5 Audio & Video for jQuery
- [davatron5000/FitVids.js](https://github.com/davatron5000/FitVids.js) - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
- [dfcb/BigVideo.js](https://github.com/dfcb/BigVideo.js) - The jQuery Plugin for Big Background Video
- [bdougherty/BigScreen](https://github.com/bdougherty/BigScreen) - A simple library for using the JavaScript Full Screen API
- [vodkabears/Vide](https://github.com/VodkaBears/Vide) - 视频背景组件
- [jaysalvat/buzz](https://github.com/jaysalvat/buzz) - A Javascript HTML5 Audio library
- [MediaElement.js](http://github.com/johndyer/mediaelement/)
## 26. 按钮
- [Buttons - A CSS button library](https://github.com/alexwolfe/Buttons)
- [ButtonComponentMorph](https://github.com/codrops/ButtonComponentMorph)
- [ProgressButtonStyles](https://github.com/codrops/ProgressButtonStyles)
- [CreativeButtons](https://github.com/codrops/CreativeButtons)
- [CSS3 buttons](https://github.com/ubuwaits/css3-buttons)
- [jquery.onoff - Interactive, accessible toggle switches for the web.](https://github.com/timmywil/jquery.onoff)
- [Flipside - 一个能过渡到对话框的按钮](https://github.com/hakimel/css/tree/master/flipside)
- [react-particle-effect-button](https://github.com/transitive-bullshit/react-particle-effect-button) - 一个 React 组件，按钮点击后会像粒子状消解
## 27. 富文本编辑器/Markdown编辑器/Markdown解析器
- [bustle/mobiledoc-kit](https://github.com/bustle/mobiledoc-kit) - 基于mobiledoc数据格式开发所见即所得的 (WYSIWYG) 编辑器
- [Simditor](https://github.com/mycolorway/simditor) - 简单快速的富文本编辑器
- [BachEditor](https://github.com/Integ/BachEditor)- 一个有情怀的编辑器
- [TinyMCE](https://github.com/tinymce/tinymce)
- [bootstrap-markdown](https://github.com/toopay/bootstrap-markdown)
- [marked - markdown解析器](https://github.com/chjj/marked)
- [Markdown Plus](https://github.com/tylingsoft/markdown-plus)
- [Editor.md - 开源在线Markdown编辑器](https://github.com/pandao/editor.md)
- [stackedit](https://github.com/benweet/stackedit)
- [Redactor Text Editor](http://imperavi.com/redactor/)
- [micromarkdown.js - 轻量级的md解析器](https://github.com/simonwaldherr/micromarkdown.js/)
- [wangEditor - 支持移动端的轻量级web富文本框](https://github.com/wangfupeng1988/wangEditor)
- [CKEditor - 可视化 HTML 编辑器](https://github.com/ckeditor/ckeditor-dev)
- [quilljs/quill](https://github.com/quilljs/quill) - 富文本编辑器
- [ianstormtaylor/slate](https://github.com/ianstormtaylor/slate) - 一个完全可定制的富文本编辑器
- [notadd/neditor](https://github.com/notadd/neditor) - 基于 ueditor的更现代化的富文本编辑器，支持HTTPS
- [ProseMirror/prosemirror-view](https://github.com/ProseMirror/prosemirror-view) - In-browser semantic rich text editing
- [facebook/lexical](https://github.com/facebook/lexical) - Facebook开源的可扩展的文本编辑器框架
## 28. 内容提取(Readability)
- [Readability](https://code.google.com/p/arc90labs-readability/)
- [json.human.js - Json Formatting for Human Beings](https://github.com/marianoguerra/json.human.js)
## 29. 颜色(CSS Colors)/SVG/Canvas
- [CSS Colours](http://colours.neilorangepeel.com/)
- [SVGeneration](http://www.svgeneration.com/)
- [SVGMagic - 自动的创建PNG来兼容不支持SVG的浏览器](https://github.com/dirkgroenen/SVGMagic)
- [Adaptive Backgrounds - 从图片抽取主要颜色和应用到父元素](https://github.com/briangonzalez/jquery.adaptive-backgrounds.js)
- [Seen.js - 渲染3D场景为SVG或者HTML Canvas](https://github.com/themadcreator/seen)
- [jquery-color - 可以动态改动颜色](https://github.com/jquery/jquery-color/)
- [rgbaster.js](https://github.com/briangonzalez/rgbaster.js) - 主题色提取
- [chroma.js](https://github.com/gka/chroma.js) - 一个处理颜色的 JS 库
## 30. 选项卡(Tabs)
- [Easy Responsive Tabs to Accordion](https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion)
- [Responsive-Tabs](https://github.com/jellekralt/Responsive-Tabs)
- [ion.tabs - jQuery tabs plugin](https://github.com/IonDen/ion.tabs)
- [jQuery-EasyTabs](https://github.com/JangoSteve/jQuery-EasyTabs)
- [tabulous.js](https://github.com/aarondo/tabulous.js)
## 31. 文本处理
- [ZeroClipboard - 文本复制插件](https://github.com/zeroclipboard/zeroclipboard)
- [clipboard.js](https://github.com/zenorocha/clipboard.js/)
- [Bigfoot - 点击文章中的脚注弹窗显示](https://github.com/lemonmade/bigfoot)
- [Annotator - 文本注解插件，可以包括注释、标签、用户等](https://github.com/openannotation/annotator)
- [Succinct - 用作截断多行文本,后面添加省略号](https://github.com/micjamking/Succinct)
- [Flowtype.js - 自动调整字体大小和行号](https://github.com/simplefocus/FlowType.JS)
- [flat-shadow](https://github.com/peachananr/flat-shadow)
- [FitText - A jQuery plugin for inflating web type](https://github.com/davatron5000/FitText.js)
- [shine.js - 实现漂亮阴影](https://github.com/bigspaceship/shine.js)
- [Type Rendering Mix - 文本渲染引擎](https://github.com/bramstein/trmix/)
- [jquery-expander - 阅读更多](https://github.com/kswedberg/jquery-expander)
- [Typed.js - 输入模拟插件](https://github.com/mattboldt/typed.js/)
- [jQuery.dotdotdot - 多行文本溢出显示省略号](https://github.com/FrDH/jQuery.dotdotdot)
- [baffle.js - 文本互动效果](https://github.com/camwiegert/baffle)
- [eligrey/FileSaver.js](https://github.com/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](https://github.com/shagstrom/split-pane)
- [jQuery UI Layout](http://layout.jquery-dev.com/)
## 33. 演示/幻灯片
- [reveal.js - The HTML Presentation Framework](https://github.com/hakimel/reveal.js)
- [bespoke.js - DIY Presentation Micro-Framework](https://github.com/markdalgleish/bespoke.js)
- [impress.js](https://github.com/bartaz/impress.js)
- [shower](https://github.com/shower/shower)
- [deck.js](https://github.com/imakewebthings/deck.js)
## 34. 国际化(i18n)
- [jquery-i18n](https://github.com/recurser/jquery-i18n)
- [i18next.js](https://github.com/i18next/i18next)
- [jsperanto.js](https://github.com/jpjoyal/jsperanto)
- [jed.js](https://github.com/SlexAxton/Jed)
- [messageformat.js](https://github.com/SlexAxton/messageformat.js)
- [Polyglot.js](https://github.com/airbnb/polyglot.js)
## 35. 邮件模板(Email Templates)
- [responsive-html-email-template](https://github.com/leemunroe/responsive-html-email-template)
## 36. 移动端优化(Optimizing Mobile Performance)
- [FastClick - 处理移动端 click 事件 300 毫秒延迟](https://github.com/ftlabs/fastclick)
- [tappy](https://github.com/filamentgroup/tappy/)
- [jquery-fast-click](https://github.com/dave1010/jquery-fast-click)
## 37. HTTP请求相关
- [pako - HTTP 请求正文压缩](https://github.com/nodeca/pako)
- [参考阅读: 如何压缩 HTTP 请求正文](https://imququ.com/post/how-to-compress-http-request-body.html)
- [HTTP 请求正文压缩 DEMO](https://qgy18.com/request-compress/)
## 38. 下载组件
- [download](https://github.com/rndme/download)
- [Downloadify](https://github.com/dcneiner/Downloadify)
## 39. 加密/转码
- [crypto-js](https://github.com/brix/crypto-js) - JavaScript library of crypto standards.
- [ulid](https://github.com/alizain/ulid) - 生成UUID类库
- [RSA in JavaScript](http://www.ohdave.com/rsa/) - 用RSA加密实现Web数据加密传输
- [nanoid](https://github.com/ai/nanoid) - 一款非常小巧的唯一ID生成工具
- [harmankang/Lab62](https://github.com/harmankang/Lab62) - 一个简单的人类可读的随机 ID 生成库
- [dropbox/zxcvbn](https://github.com/dropbox/zxcvbn) - 评估密码强度的 JS 库，强度越强，密码越不容易破解
## 40. 调试
- [debug](https://github.com/visionmedia/debug) - A tiny JavaScript debugging utility modelled after Node.js core's debugging technique. Works in Node.js and web browsers
- [vConsole - 一个针对手机网页的前端 console 调试面板](https://github.com/WechatFE/vConsole)
## 41. 实用工具/其他插件
- [jquery-cookie](https://github.com/carhartl/jquery-cookie)
- [JavaScript Cookie](https://github.com/js-cookie/js-cookie)
- [InstantClick - 预加载用户可能会点击的一些链接](https://github.com/dieulot/instantclick/)
- [Async.js - 异步操作](https://github.com/caolan/async)
- [jquery.qrcode.js - 生成二维码的 jQuery 插件](https://github.com/jeromeetienne/jquery-qrcode)
- [qrcodejs - JS生成QRCode的库](https://github.com/davidshimjs/qrcodejs)
- [nakedpassword - 用脱衣女帮助检测密码强度](https://github.com/platform45/nakedpassword)
- [KityMinder - 脑图编辑工具](https://github.com/fex-team/kityminder)
- [MixitUp - 动画过滤和排序](https://github.com/patrickkunka/mixitup)
- [JQuery Tip Cards - 创建卡片交互的cards布局](https://github.com/peachananr/tip_cards)
- [Fallback.js - JavaScript library for dynamically loading CSS and JS files.](https://github.com/dolox/fallback/)
- [swfobject](https://github.com/swfobject/swfobject)
- [prettyprint.js - An in-browser JavaScript variable dumper](https://github.com/padolsey-archive/prettyprint.js)
- [Shepherd - 为应用创建用户指南](https://github.com/HubSpot/shepherd)
- [RulersGuide.js - 类似PhotoShop标尺的js库](https://github.com/mark-rolich/RulersGuides.js)
- [Gremlins.js - Monkey 测试库](https://github.com/marmelab/gremlins.js)
- [RoughDraft.js - 简单快速的创建交互式的 HTML 模型的原型工具](https://github.com/ndreckshage/roughdraft.js/)
- [favico.js - 动态改变浏览器标签栏中的网站图标](https://github.com/ejci/favico.js)
- [pageguide - 网页向导](https://github.com/tracelytics/pageguide)
- [jsdiff - js diff 算法](https://github.com/kpdecker/jsdiff)
- [github-contributions-chart](https://github.com/sallar/github-contributions-chart) - 类 Github 的贡献日历网格
- [leizongmin/js-xss](https://github.com/leizongmin/js-xss) - 根据白名单过滤 HTML(防止 XSS 攻击)
- [cure53/DOMPurify](https://github.com/cure53/DOMPurify) - HTML过滤 防止 XSS 攻击
- [ajv-validator/ajv](https://github.com/ajv-validator/ajv) - 校验json-schema数据格式
# ES6( ECMAScript 2015 )
## ES6转码器(ES6 to ES5)
- [Babel](https://github.com/babel/babel/) - 一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行
- [babelify](https://github.com/babel/babelify) - 将babel引入到Gulp, Grunt, npm run等构建过程
- [traceur-compiler](https://github.com/google/traceur-compiler) - Traceur is a JavaScript.next-to-JavaScript-of-today compiler
## ES6入门
- [ECMAScript 6入门](http://es6.ruanyifeng.com/) - 阮一峰老师的开源的JavaScript语言教程
- [Learn ES2015](https://babeljs.io/docs/learn-es2015/)
- [ES6 - New features Overview & Comparison](http://es6-features.org/)
- [ES6 Overview in 350 Bullet Points](https://ponyfoo.com/articles/es6)
- [es6features](https://github.com/lukehoban/es6features)
# 设计模式( JavaScript Patterns )
- [javascript-patterns](https://github.com/shichuan/javascript-patterns)
- [jquery-patterns - A variety of jQuery plugin patterns](https://github.com/jquery-boilerplate/jquery-patterns)
- [Learning JavaScript Design Patterns](http://addyosmani.com/resources/essentialjsdesignpatterns/book/)
# 在线工具( Online Tools )
- [jsbin - Collaborative JavaScript Debugging App](http://jsbin.com)
- [jsbin@Github](https://github.com/jsbin/jsbin)
- [jsfiddle](http://jsfiddle.net/)
- [jsbeautifier - Online JavaScript beautifier](http://jsbeautifier.org/)
- [resume.github.com](http://resume.github.io)
# 前端开发工具
## 1. 开发工具
- [VSCode](https://code.visualstudio.com/)
- [Atom](https://atom.io/)
- [Sublime Text](http://www.sublimetext.com/)
## 2. 调试工具
- [Fiddler](http://www.telerik.com/fiddler)
- [Weinre](http://people.apache.org/~pmuellr/weinre-docs/latest/Home.html)
- [Rythem](http://www.alloyteam.com/2012/05/web-front-end-tool-rythem-1/)
- [csscss](https://github.com/zmoazeni/csscss) - 用于检查css代码冗余
- [FECS](http://fecs.baidu.com/) - 基于 Node.js 的前端代码检查工具
- [JSON Server](https://github.com/typicode/json-server) - 模拟 API
- [swagger-ui](https://github.com/swagger-api/swagger-ui) - 基于REST的API测试/文档
- [graphqurl](https://github.com/hasura/graphqurl) - curl for GraphQL with autocomplete, subscriptions and GraphiQL.
## 3. 模拟数据( Mock )
- [JSONPlaceholder](http://jsonplaceholder.typicode.com/)
- [json-server - Get a full fake REST API](https://github.com/typicode/json-server)
- [lowdb - A small local JSON database powered by lodash](https://github.com/typicode/lowdb)
- [Mock.js](https://github.com/nuysoft/Mock) - 一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试
- [yapi](https://github.com/YMFE/yapi) - YApi 是一个可本地部署的、打通前后端及QA的、可视化的接口管理平台
## 4. 接口管理
- [RAP](https://github.com/thx/RAP) - Web接口管理工具，开源免费，接口自动化，MOCK数据自动生成，自动化测试，企业级管理
## 5. 浏览器扩展(Chrome Extensions)
- [Postman - REST Client](https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm)
- [Fiddler - Fiddler for Chrome Extension](http://welefen.github.io/Fiddler/)
- [WEB前端助手(FeHelper)](https://chrome.google.com/webstore/detail/web%E5%89%8D%E7%AB%AF%E5%8A%A9%E6%89%8Bfehelper/pkgccpejnmalmdinmhkkfafefagiiiad)
- [Web Developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm)
- [Wappalyzer - 分析网站应用的技术栈](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg)
- [HTTP Status](https://chrome.google.com/webstore/detail/http-status/cknfnacbckhfpjahnmkblajcpledpfnp/related)
- [Chrome Logger](https://chrome.google.com/webstore/detail/chrome-logger/noaneddfkdjfnfdakjjmocngnfkfehhd)
- [ColorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp)
- [ColorPick Eyedropper](https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en)
- [Code Cola](https://chrome.google.com/webstore/detail/code-cola/lomkpheldlbkkfiifcbfifipaofnmnkn)
- [1px](https://chrome.google.com/webstore/detail/1px/gebccnmciopflhcdihopmphapifkkfdh)
- [AlloyDesigner - 前端重构开发辅助工具](https://chrome.google.com/webstore/detail/alloydesigner/ojooeaohlmgpcjajikhmibcnbebfenid)
- [Fontface Ninja](https://chrome.google.com/webstore/detail/fontface-ninja/eljapbgkmlngdpckoiiibecpemleclhh)
- [PageSpeed Insights (by Google)](https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo/gplegfbjlmmehdoakndmohflojccocli)
- [Redirect Path](https://chrome.google.com/webstore/detail/redirect-path/aomidfkchockcldhbkggjokdkkebmdll/related)
- [Responsive Web Design Tester](https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg?hl=en)
- [Window Resizer](https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en)
- [CSSViewer](https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=en)
- [IE Tab](https://chrome.google.com/webstore/detail/ie-tab/hehijbfgiekmjfkfjpbkbammjbdenadd?hl=en)
- [Clear Cache](https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=en)
- [JSONView](https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn/related?hl=en)
- [Image Downloader](https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj)
- [Pretty Beautiful Javascript - 可以自动格式化混淆的js文件](https://chrome.google.com/webstore/detail/pretty-beautiful-javascri/piekbefgpgdecckjcpffhnacjflfoddg/related?utm_source=chrome-ntp-icon)
- [JavaScript Errors Notifier](https://chrome.google.com/webstore/detail/javascript-errors-notifie/jafmfknfnkoekkdocjiaipcnmkklaajd?utm_source=chrome-ntp-icon)
- [CSS Diff - 在线比对页面上两个元素的CSS样式差异](https://chrome.google.com/webstore/detail/css-diff/pefnhibkhcfooofgmgoipfpcojnhhljm/related)
- [WhatFont- 识别网页所使用的字体](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm)
## 6. 在线工具
> 图片在线优化工具
- [Kraken.io - Online Image Optimizer](https://kraken.io/web-interface)
- [TinyJPG - Compress JPEG images intelligently](https://tinyjpg.com/)
> Font Icon 在线生成工具
- [IcoMoon App](https://icomoon.io/app/#/select)
- [Glyphter](http://glyphter.com/) - The SVG Font Machine
- [Free Perfect Icons](https://www.designrush.com/resources/perfecticons) - 矢量图 svg 图标下载
# 前端参考集
- [i0natan/nodebestpractices](https://github.com/i0natan/nodebestpractices/blob/master/README.chinese.md) - Node.js 最佳实践
- [frontend-guidelines - Some HTML, CSS and JS best practices.](https://github.com/bendc/frontend-guidelines)
- [frontend-dev-bookmarks](https://github.com/dypsilon/frontend-dev-bookmarks)
- [Codrops - Useful resources](https://github.com/codrops)
- [Front-end Code Standards & Best Practices](http://isobar-idev.github.io/code-standards/)
- [awesome-javascript](https://github.com/wwsun/awesome-javascript)
- [Front-end-tutorial - 前端涉及的所有知识体系](https://github.com/nicejade/Front-end-tutorial)
- [awesome-vue](https://github.com/vuejs/awesome-vue)
- 前端编码规范( Standard Style )
- [Airbnb 的 JavaScript 编码规范](https://github.com/airbnb/javascript)
- [JavaScript Standard Style](https://github.com/feross/standard)
- [clean-code-javascript - javascript 编码风格指南](https://github.com/ryanmcdermott/clean-code-javascript)
- [spec](https://github.com/ecomfe/spec/) - 百度前端团队代码规范
- [<head> cheatsheet - <head> 标签的内容清单](https://github.com/joshbuchea/head)
- [Front-End-Checklist](https://github.com/thedaviddias/Front-End-Checklist) - The perfect Front-End Checklist for modern websites and meticulous developers http://frontendchecklist.com
- [30-seconds-of-code](https://github.com/Chalarangelo/30-seconds-of-code)
- [30-seconds-of-css](https://github.com/atomiks/30-seconds-of-css)
- [project-guidelines](https://github.com/elsewhencode/project-guidelines/blob/master/README-zh.md) - JavaScript工程项目的一系列最佳实践策略
- [react-in-patterns](http://sangka-z.com/react-in-patterns-cn/) - React 模式
- [PWA-Book-CN](https://github.com/SangKa/PWA-Book-CN/) - Progressive Web Apps (PWA) 中文版
- [javascript-algorithms](https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-CN.md) - JavaScript 算法与数据结构
- [vue-design](https://github.com/HcySunYang/vue-design) - Vue技术内幕
- [css-protips](https://github.com/AllThingsSmitty/css-protips/tree/master/translations/zh-CN) - CSS 专业技巧
- [Front-End-Performance-Checklist](https://github.com/thedaviddias/Front-End-Performance-Checklist) - 前端性能优化清单
- [33-js-concepts](https://github.com/leonardomso/33-js-concepts) - 每个 JavaScript 工程师都应懂的33个概念 「[翻译](https://github.com/stephentian/33-js-concepts)」
- [joshbuchea/HEAD](https://github.com/joshbuchea/HEAD) - HTML 网页的 head 元素 指南
- [Airbnb Engineering & Data Science](https://airbnb.io/projects/) - Airbnb 前端开源项目
- [storybooks/storybook](https://github.com/storybooks/storybook) - 各大公司的 UI 组件库的 Storybook 展示 https://storybook.js.org/examples/
- [LEARN REGEX THE EASY WAY](https://github.com/ziishaned/learn-regex/blob/master/translations/README-cn.md) - 正则表达式学习
# 书籍( Frontend-related Books )
- [Front-End Developer Handbook 2016](https://www.frontendhandbook.com/index.html)
- [Front-End Developer Handbook 2017](https://frontendmasters.com/books/front-end-handbook/2017/)
- [Front-End Developer Handbook 2018](https://frontendmasters.com/books/front-end-handbook/2018/)
- [前端工程师手册](https://leohxj.gitbooks.io/front-end-database/content/)
- [前端工程师手册](https://dwqs.gitbooks.io/frontenddevhandbook/content/) - 包括前端开发实践、学习前端开发、前端开发工具
- [D3 in Depth](http://d3indepth.com/) - 可视化引擎 D3 的教程
- [Canvas: Draw on the web](https://www.yuque.com/airing/canvas) - HTML5 Canvas 教程
- [Node.js 最佳实践](https://github.com/i0natan/nodebestpractices/blob/master/README.chinese.md)
Reference in New Issue View Git Blame Copy Permalink