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