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