awesome-awesomeness/terminal/frontend at 2d63fe63cdc259a8b0049caa7dfa409165087fa3

Files

Jonas Zeunert 2d63fe63cd Restructure with Makefile + add html output

2024-04-20 19:22:54 +02:00

102 KiB

Raw Blame History

前端组件库
>搭建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 相关

- cleave.js - 格式化你的输入内容 (https://github.com/nosir/cleave.js)

10.3 相关

- 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 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/) - 百度前端团队代码规范
- 标签的内容清单 (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)

102 KiB Raw Blame History

102 KiB

Raw Blame History