└── README.md /README.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 前端组件库 3 | date: 2016-04-27 16:39:21 4 | category: 5 | tags: [js,前端] 6 | --- 7 | 搭建web app常用的样式/组件等收集列表(移动优先) 8 | --- 9 | 10 | - 一个常用的PHP类库, 资源以及技巧列表 [awesome-php](https://github.com/JingwenTian/awesome-php/) 推荐 11 | 12 | --- 13 | 14 | ## 0. 前端自动化(Workflow) 15 | 16 | - 前端构建工具 17 | - [Webpack - module bundler](https://github.com/webpack/webpack) 18 | - [Yeoman - a set of tools for automating development workflow](https://github.com/yeoman/yeoman) 19 | - [gulp - The streaming build system](http://gulpjs.com/) 20 | - [grunt - the JavaScript Task Runner](http://gruntjs.com/) 21 | - [F.I.S - 前端集成解决方案](https://github.com/fex-team/fis) 22 | 23 | 24 | - 前端模块管理器 25 | - [Bower - A package manager for the web](http://bower.io/) 26 | - [Browserify](http://browserify.org/) 27 | - [Component](https://github.com/componentjs/component) 28 | - [Duo](http://duojs.org/) 29 | - [RequireJS](http://requirejs.org/) 30 | - [Sea.js](http://seajs.org/) 31 | - [LABjs - 文件加载器](https://github.com/getify/LABjs) 32 | - [css-modulesify - CSS模块加载器](https://github.com/css-modules/css-modulesify) 33 | - css预处理器 34 | - [Less - Less is More , Than CSS](http://lesscss.org/) 35 | - [Sass - Syntactically Awesome Style Sheets](http://sass-lang.com/) 36 | - [Stylus - Expressive, dynamic, robust CSS](http://learnboost.github.io/stylus/) 37 | - 前端性能分析工具 38 | - [analyze-css - CSS 选择器的复杂度和性能分析器](https://github.com/macbre/analyze-css) 39 | 40 | ## 1. 前端框架(Frameworks) 41 | 42 | - [Bootstrap](https://github.com/twbs/bootstrap) 43 | - [Foundation](https://github.com/zurb/foundation) 44 | - [Amaze UI](http://amazeui.org/) 45 | - [Semantic UI](https://github.com/semantic-org/semantic-ui) 46 | - [Pure CSS](http://purecss.io/) 47 | - [topcoat](https://github.com/topcoat/topcoat) 48 | - [UIkit](https://github.com/uikit/uikit) 49 | - [Material UI](https://github.com/callemall/material-ui) 50 | - [Materialize - 一个基于 Material Design 的 CSS 框架](https://github.com/Dogfalo/materialize) 51 | - [Framework7](http://www.idangero.us/framework7) 52 | - [mui](https://github.com/dcloudio/mui) 53 | - [ionic framework](http://ionicframework.com/) 54 | - [Fries](https://github.com/jaunesarmiento/fries) 55 | - [jQuery Mobile](http://jquerymobile.com/) 56 | - [App.js](https://github.com/kikinteractive/app) 57 | - [Office UI Fabric - 微软 Office 前端团队的框架](https://github.com/OfficeDev/Office-UI-Fabric) 58 | 59 | ## 2. JavaScript 框架汇总 60 | 61 | - JavaScript 框架 62 | - [react](https://github.com/facebook/react) 63 | - [Angular](https://github.com/angular/angular) 64 | - [jQuery](https://github.com/jquery/jquery) 65 | - [Backbone.js](https://github.com/jashkenas/backbone) 66 | - [ember.js](https://github.com/emberjs/ember.js) 67 | - [Ractive.js](https://github.com/ractivejs/ractive) 68 | - [KISSY](https://github.com/kissyteam/kissy) 69 | - [Zepto.js](https://github.com/madrobby/zepto) 70 | - [Vanilla JS](http://vanilla-js.com/) 71 | - [Vue.js - 数据驱动的组件化MVVM库(用于创建web交互界面和数据双向绑定)](https://github.com/yyx990803/vue) 72 | - [Can.js](http://canjs.com/guides/Utilities.html) 73 | - [Avalon](https://github.com/RubyLouvre/avalon) 74 | - [T3 JavaScript Framework - 一个用于搭建大型Web应用的客户端JS框架](https://github.com/box/t3js/) 75 | - [jsblocks - Better MV-ish Framework 从简单 UI 到复杂单页应用都适用](https://github.com/astoilkov/jsblocks) 76 | - 轻量级JavaScript框架 77 | - [Min.js - Super minimal selector and event library](https://github.com/remy/min.js) 78 | - [skel.js - A lightweight responsive framework](https://github.com/n33/skel) 79 | - [Sprint.js - 一个高性能、小体积的 DOM 操作库](https://github.com/bendc/sprint) 80 | - [knockout](https://github.com/knockout/knockout) 81 | - [PhantomJS - 一个基于 WebKit 的服务器端 JavaScript API](https://github.com/ariya/phantomjs/) 82 | - 函数式反应型编程框架 FRP (Functional Reactive Programming) library 83 | - [Bacon.js - A small functional reactive programming lib for JavaScript.](https://github.com/baconjs/bacon.js/) 84 | - [Flapjax - 一个支持FRP的JavaScript框架](http://www.flapjax-lang.org/) 85 | - JavaScript 工具库 86 | - [underscore.js](https://github.com/jashkenas/underscore) 87 | - [Underscore.string.js字符串操作库](https://github.com/epeli/underscore.string) 88 | - [functional.js](https://github.com/leecrossley/functional-js/) 89 | - [Lo-Dash - A JavaScript utility library](https://github.com/lodash/lodash) 90 | - [Lazy.js - a functional utility library for JavaScript](https://github.com/dtao/lazy.js) 91 | - [Fn.js](https://github.com/eliperelman/fn.js) 92 | - [Way.js - 双向数据绑定库](https://github.com/gwendall/way.js) 93 | - [boiler - a utility library that makes tasks in JavaScript easier](https://github.com/Xaxis/boiler) 94 | - 快捷键操作 95 | - [Keys.js - 应用快捷键](https://github.com/bitwalker/keys.js) 96 | - [simple-hotkeys](https://github.com/mycolorway/simple-hotkeys) 97 | - [jquery.hotkeys](https://github.com/jeresig/jquery.hotkeys) 98 | - [Mousetrap - 键盘快捷键操作](https://github.com/ccampbell/mousetrap) 99 | 100 | ## 3. 前端游戏框架 101 | 102 | - [cocos2d-html5](https://github.com/cocos2d/cocos2d-html5) 103 | - [Egret Engine](http://www.egret-labs.org/) 104 | - [LimeJS](https://github.com/digitalfruit/limejs) 105 | - [EaselJS](https://github.com/CreateJS/EaselJS) 106 | - [three.js](https://github.com/mrdoob/three.js) 107 | - [AlloyStick](https://github.com/AlloyTeam/AlloyStick) 108 | - [The-Best-JS-Game-Framework](https://github.com/finscn/The-Best-JS-Game-Framework) 109 | - [CanvasEngine](https://github.com/RSamaium/CanvasEngine) 110 | - [Quintus](https://github.com/cykod/Quintus) 111 | - [Stage.js](https://github.com/piqnt/stage.js/) 112 | - [phaser - 一个快速、免费、开源的 HTML5 游戏框架](https://github.com/photonstorm/phaser/) 113 | 114 | ## 4. ui组件库(CSS Framework) 115 | 116 | - [WeUI - 微信官方UI库](https://github.com/weui/weui) 117 | - [GMU - 基于zepto的ui组件库，适用于移动端](https://github.com/fex-team/GMU) 118 | - [FrozenUI - 腾讯移动端组件库](https://github.com/frozenui/frozenui) 119 | - [NEC - 更好的CSS方案 ](http://nec.netease.com/) 120 | - [NEJ - 更好的JS解决方案](http://nej.netease.com/) 121 | - [Pure CSS Components](https://github.com/LFeh/css-components/) 122 | - [magic-of-css](https://github.com/adamschwartz/magic-of-css) 123 | - [Primer - The CSS toolkit and guidelines that power GitHub](https://github.com/primer/primer) 124 | - [light7 - A Light and easy to use UI Lib](https://github.com/lihongxun945/light7) 125 | - [Spectre.css - 轻量、响应式的现代 CSS 框架](https://github.com/picturepan2/spectre) 126 | 127 | ## 5. 基础模版 128 | - 浏览器统一(Cross Browser) 129 | - [HTML5 BOILERPLATE](https://github.com/h5bp/html5-boilerplate) 130 | - [Modernizr](https://github.com/Modernizr/Modernizr) 131 | - [Normalize.css](https://github.com/necolas/normalize.css/) 132 | - [HTML5 Shiv - 让ie浏览器成为支持html5的浏览器的解决方法](https://github.com/afarkas/html5shiv) 133 | - [cssFx - 为CSS3自动生成浏览器前缀](https://github.com/imsky/cssFx) 134 | - [-prefix-free - Break free from CSS prefix hell](https://github.com/LeaVerou/prefixfree) 135 | - [ieBetter.js - make ie browser like a morden browser main for ie6~ie8](https://github.com/zhangxinxu/ieBetter.js) 136 | - [es6-promise - Promise 对象的兼容](https://github.com/stefanpenner/es6-promise) 137 | - 响应式 138 | - [Responsive - 响应式布局](https://github.com/ResponsiveBP/Responsive) 139 | - [Enquire.js - Awesome Media Queries in JavaScript](https://github.com/WickyNilliams/enquire.js) 140 | - [Free Wall - 创建桌面，移动和平板的动态网格布局](https://github.com/kombai/freewall) 141 | - 适配方案 142 | - [MetaHandler.js：移动端适配各种屏幕无痛工具脚本](https://github.com/unbug/generator-webappstarter/blob/master/app/templates/app/src/util/MetaHandler.js) 143 | - [lib-flexible: 移动端自适应方案](https://github.com/amfe/lib-flexible) 144 | - [参考: 使用Flexible实现手淘H5页面的终端适配](https://github.com/amfe/article/issues/17?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io) 145 | - [flexible demo 1](http://ufologist.github.io/responsive-page/others-responsive/flexible.html) 146 | - [flexible demo 2](http://huodong.m.taobao.com/act/yibo.html) 147 | - [pageResponse](https://github.com/peunzhang/pageResponse) 148 | - [responsive-page](https://github.com/ufologist/responsive-page) 149 | 150 | ## 6. 排版 151 | 152 | - [yue.css](https://github.com/lepture/yue.css) 153 | - [typo.css](https://github.com/sofish/typo.css) 154 | - [chinese-copywriting-guidelines - 中文文案排版指南](https://github.com/sparanoid/chinese-copywriting-guidelines) 155 | 156 | ## 7. 网格系统 157 | 158 | - [grid](https://github.com/aekaplan/grid) 159 | - [Flexbox Grid](https://github.com/kristoferjoseph/flexboxgrid) 160 | - [MasonJS - creating a perfect grid](https://github.com/DrewDahlman/Mason) 161 | 162 | 163 | ## 8. 路由和链接(Routing And URLs) 164 | 165 | - [History.js - gracefully supports the HTML5 History/State APIs](https://github.com/browserstate/history.js) 166 | - [jquery-pjax - pushState+ajax](https://github.com/defunkt/jquery-pjax) 167 | - [jquery-address - Deep Linking](https://github.com/asual/jquery-address) 168 | - [page.js - Micro client-side router](https://github.com/visionmedia/page.js) 169 | - [crossroads.js](https://github.com/millermedeiros/crossroads.js) 170 | - [hash.js](https://github.com/javve/hash.js) 171 | - [path.js](https://github.com/mtrpcic/pathjs) 172 | - [director.js - 前端路由库(通过#符号进行路径组织,结合vue的component可进行单页的局部模块刷新)](https://github.com/flatiron/director) 173 | - [URI.js](https://github.com/medialize/URI.js) 174 | - [Roadcrew.js](https://github.com/grobmeier/Roadcrew.js) 175 | - [SpeakingURL](https://github.com/pid/speakingurl) 176 | - [uparams - An URL params parser](https://github.com/YanagiEiichi/uparams) 177 | 178 | ## 9. UA 识别 179 | 180 | - [detector](https://github.com/hotoo/detector) 181 | 182 | ## 10. 表单处理 183 | 184 | ### 10.1 表单验证(Form Validator)/表单提示 185 | 186 | - [Validator](https://github.com/niceue/validator) 187 | - [Parsley](https://github.com/guillaumepotier/Parsley.js) 188 | - [jquery.form.js - jQuery Form Plugin](https://github.com/malsup/form) 189 | - [Validform](https://github.com/haiercdboy/Validform) 190 | - [validator.js](https://github.com/sofish/validator.js) 191 | - [jquery-validation - jQuery Validation Plugin](https://github.com/jzaefferer/jquery-validation) 192 | - [formvalidator.js](https://github.com/victorjonsson/jQuery-Form-Validator) 193 | - [Fort.js – 表单填写进度提示](http://github.com/Colourity/Fort.js) 194 | - [mailcheck - 用于检测email地址的域名](https://github.com/mailcheck/mailcheck) 195 | - [Floatlable.js - 输入时显示placeholder文本](https://github.com/clubdesign/floatlabels.js) 196 | - [jQuery Label Better](https://github.com/peachananr/label_better) 197 | - [validator.js](https://github.com/ppoffice/validator.js) 198 | 199 | ### 10.2 < select > 相关 ### 200 | 201 | - [Chosen](https://github.com/harvesthq/chosen) 202 | - [Select2](https://github.com/select2/select2) 203 | - [bootstrap-select](https://github.com/silviomoreto/bootstrap-select) 204 | 205 | ### 10.3 单选框/复选框相关 ### 206 | 207 | - [iCheck - 增强复选框和单选按钮](https://github.com/fronteed/iCheck) 208 | - [Switchery - iOS 7 style switches for your checkboxes](https://github.com/abpetkov/switchery) 209 | 210 | ### 10.4 上传组件 ### 211 | 212 | - [jQuery File Upload Plugin](https://github.com/blueimp/jQuery-File-Upload) 213 | - [百度 Web Uploader](http://fex-team.github.io/webuploader/) 214 | - [uploadify](http://www.uploadify.com/) 215 | - [Plupload](https://github.com/moxiecode/plupload) 216 | - [Fine Uploader](http://fineuploader.com/index.html) 217 | - [arale-upload - 轻量级 iframe and html5 file uploader](https://github.com/aralejs/upload) 218 | - [Dropzone.js - 文件上传库(可获取文件mime, 文件大小等; 针对图片可生成缩略图,获取图片宽度,高度)](https://github.com/enyo/dropzone) 219 | - [flow.js](https://github.com/flowjs/flow.js) 220 | - [localResizeIMG - 前端本地客户端压缩图片，兼容IOS，Android，PC](https://github.com/think2011/localResizeIMG) 221 | - [simple-uploader](https://github.com/mycolorway/simple-uploader) 222 | 223 | ### 10.5 日期选择 ### 224 | 225 | - [Both Date and Time picker widget based on twitter bootstrap](https://github.com/smalot/bootstrap-datetimepicker) 226 | - [GMU 日历组件](http://gmu.baidu.com/demo/widget/calendar/calendar.html) 227 | - [Mobiscroll](https://github.com/acidb/mobiscroll) 228 | - [Pikaday - 日期选择器](https://github.com/dbushell/Pikaday) 229 | - [PriceCalendar - 酒店价格日历](https://github.com/fugm/PriceCalendar) 230 | - [API文档](http://fgm.cc/learn/calendar/price-calendar/api.html) 231 | - [DEMO](http://fgm.cc/learn/calendar/price-calendar/) 232 | 233 | ### 10.6 取色 ### 234 | 235 | - [Colorpicker plugin for Twitter Bootstrap](https://github.com/mjolnic/bootstrap-colorpicker) 236 | 237 | ### 10.7 标签插件(Tag) ### 238 | 239 | - [TaggingJS – 可以灵活定制的 jQuery 标签系统插件](https://github.com/sniperwolf/taggingJS) 240 | - [selectize.js](https://github.com/brianreavis/selectize.js) 241 | - [Bootstrap Tags Input](https://github.com/timschlechter/bootstrap-tagsinput/) 242 | 243 | ### 10.8 自动完成插件 ### 244 | 245 | - [At.js - 一个Twitter/微博样式的@自动完成插件](https://github.com/ichord/At.js) 246 | - [jquery-textcomplete - 智能搜索提示框/自动补全](https://github.com/yuku-t/jquery-textcomplete) 247 | - [typeahead.js - a fast and fully-featured autocomplete library](https://github.com/twitter/typeahead.js) 248 | 249 | ### 10.9 样式修正 ### 250 | 251 | - [autosize - 使文本框自动适应所输入的内容](https://github.com/jackmoore/autosize) 252 | 253 | ## 11. 图表绘制/图形库(Graphics) ## 254 | 255 | - [Highcharts](https://github.com/highslide-software/highcharts.com) 256 | - [Chart.js - Simple HTML5 Charts using Canvas](https://github.com/nnnick/Chart.js) 257 | - [百度 ECharts](https://github.com/ecomfe/echarts) 258 | - [Chartist.js](https://github.com/gionkunz/chartist-js) 259 | - [D3.js - A JavaScript visualization library for HTML and SVG.](https://github.com/mbostock/d3) 260 | - [intro-to-d3 - a D3.js tutorial](https://github.com/square/intro-to-d3) 261 | - [Bonsai - 一个功能强大的JavaScript图形库](https://github.com/uxebu/bonsai) 262 | - [epoch - 数据图表可视化](https://github.com/fastly/epoch/) 263 | - [Vis.js](https://github.com/almende/vis) 264 | - [Coutour.js](https://github.com/forio/contour) 265 | - [zrender - 一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同！](https://github.com/ecomfe/zrender) 266 | 267 | ## 12. 日期格式化 & 时间轴 ## 268 | 269 | - [Moment.js - 日期处理](http://momentjs.com/) 270 | - [Smart Time Ago - 显示相对时间](https://github.com/pragmaticly/smart-time-ago) 271 | - [timeline.js](https://github.com/vorg/timeline.js) 272 | 273 | ## 13. 页面交互 274 | 275 | ### 13.1 Slider ### 276 | 277 | - [slick - the last carousel you'll ever need](https://github.com/kenwheeler/slick/) 278 | - [Swipe - the most accurate touch slider](https://github.com/thebird/Swipe) 279 | - [Swiper - Most modern mobile touch slider](https://github.com/nolimits4web/Swiper) 280 | - [iscroll - Smooth scrolling for the web](https://github.com/cubiq/iscroll) 281 | - [iSlider - 移动端滑动组件](https://github.com/BE-FE/iSlider) 282 | - [OwlCarousel - create beautiful responsive carousel slider](https://github.com/OwlFonk/OwlCarousel) 283 | - [jquery-mousewheel - jQuery鼠标滚轮滚动侦测插件](https://github.com/jquery/jquery-mousewheel/) 284 | - [Glide.js - 轻量级滑块组件](https://github.com/jedrzejchalubek/Glide.js) 285 | - [PhotoSwipe](https://github.com/dimsemenov/photoswipe) 286 | - [TouchSlide - 触屏滑动特效(焦点图,Tab切换)](http://www.superslide2.com/TouchSlide/) 287 | 288 | ### 13.2 瀑布流 ### 289 | 290 | - [Masonry](http://masonry.desandro.com/) 291 | - [Isotope - Filter & sort magical layouts](http://isotope.metafizzy.co/) 292 | 293 | ### 13.3 懒加载/加载监听/预加载 ### 294 | 295 | - [imagesLoaded](https://github.com/desandro/imagesloaded) 296 | - [Echo.js](https://github.com/toddmotto/echo) 297 | - [lazySizes](https://github.com/aFarkas/lazysizes) 298 | - [jquery_lazyload](https://github.com/tuupola/jquery_lazyload) 299 | - [BttrLazyLoading](https://github.com/shprink/bttrlazyloading/) 300 | - [lazyload.js](https://github.com/vvo/lazyload) 301 | - [layzr.js - 一个小巧快速的图片懒加载库](https://github.com/callmecavs/layzr.js) 302 | - [waitForImages - 图片加载监听库](https://github.com/alexanderdickson/waitForImages) 303 | - [PxLoader - JS预加载库:实现图片、声音等各种文件的预加载功能](https://github.com/thinkpixellab/PxLoader) 304 | - [bindWithDelay - jQuery Plugin For Delayed Event Execution](https://github.com/bgrins/bindWithDelay) 305 | - [TypeWatch - 停止输入时调用](https://github.com/dennyferra/TypeWatch) 306 | 307 | ### 13.4 图片轮播(幻灯片)/图片展示 ### 308 | 309 | - [FlexSlider](https://github.com/woothemes/FlexSlider) 310 | - [unslider - 小而美的轮播库](https://github.com/idiot/unslider) 311 | - [prettyPhoto](https://github.com/scaron/prettyphoto) 312 | - [FlickerPlate - A cool jQuery plugin that lets you flick through content.](https://github.com/chrishumboldt/Flickerplate) 313 | - [Holder.js - Client-side image placeholders.](https://github.com/imsky/holder) 314 | - [RowGrid.js - 在径直的行里放置图片](https://github.com/brunjo/rowGrid.js) 315 | - [ImageLightbox.js - 灯箱效果](http://osvaldas.info/examples/image-lightbox-responsive-touch-friendly/) 316 | - [JQuery Panorama Viewer - 全景视图](https://github.com/peachananr/panorama_viewer) 317 | - [Intense Images - 全屏查看图片](https://github.com/tholman/intense-images) 318 | - [Picturefill - 一个响应式图片 JS 插件](http://scottjehl.github.io/picturefill/) 319 | - [zoom.js - 一个 jQuery 图片放大插件](https://github.com/fat/zoom.js) 320 | - [watermarkjs - 一个在浏览器中添加图片水印的 JS 库](https://github.com/brianium/watermarkjs) 321 | - [responsive-images.js](https://github.com/kvendrik/responsive-images.js) 322 | 323 | ### 13.5 图片剪裁/图片处理 ### 324 | 325 | - [Jcrop - Image Cropping Plugin for jQuery](https://github.com/tapmodo/Jcrop) 326 | - [croppic - an image cropping jquery plugin](https://github.com/sconsult/croppic) 327 | - [smartcrop.js - 智能图片裁剪库](https://github.com/jwagner/smartcrop.js) 328 | - [jQuery.eraser - 图像擦除插件](https://github.com/boblemarin/jQuery.eraser) 329 | - [DD_belatedPNG.js - 让IE6支持透明PNG图片](http://www.dillerdesign.com/experiment/DD_belatedPNG/) 330 | - [FocusPoint.js 实现图片的响应式裁剪](https://github.com/jonom/jquery-focuspoint) 331 | - [imgareaselect](https://github.com/odyniec/imgareaselect) 332 | - [CSSgram - CSS 实现的 Instagram 滤镜库](https://github.com/una/CSSgram) 333 | - [antimoderate - 图片模糊库](https://github.com/whackashoe/antimoderate) 334 | 335 | ### 13.6 进度条/加载动画(Loading) ### 336 | 337 | - [NProgress.js](http://ricostacruz.com/nprogress/) 338 | - [progress.js](https://github.com/usablica/progress.js) 339 | - [Pace - Automatic page load progress bar](https://github.com/HubSpot/pace) 340 | - [jquery-ajax-progress](https://github.com/englercj/jquery-ajax-progress) 341 | - [nanobar - Very lightweight progress bars.](https://github.com/jacoborus/nanobar) 342 | - [waitMe - 很漂亮的loading效果](https://github.com/vadimsva/waitMe) 343 | - [spin.js](https://github.com/fgnass/spin.js) 344 | - [sonic.js](https://github.com/padolsey/sonic.js) 345 | - [fakeLoader.js](https://github.com/joaopereirawd/fakeLoader.js) 346 | - [loaders.css - 一个为性能优化的实现加载动画效果的 CSS 框架](https://github.com/ConnorAtherton/loaders.css) 347 | - [css-loaders](https://github.com/lukehaas/css-loaders) 348 | 349 | ### 13.7 侧滑插件(offcancas) ### 350 | 351 | - [pushy - a responsive off-canvas navigation menu ](https://github.com/christophery/pushy) 352 | - [Slideout.js - 一个用于移动 Web 应用的触摸滑出式导航菜单](https://github.com/mango/slideout) 353 | 354 | ### 13.8 菜单(Menu) ### 355 | 356 | - [SuperFish - 基于jQuery的级联下拉菜单](https://github.com/joeldbirch/superfish) 357 | - [Responsive Nav - 响应式导航](https://github.com/viljamis/responsive-nav.js) 358 | 359 | ### 13.9 滚动侦测(ScrollSpy) ### 360 | 361 | - [jquery-scrollspy(1)](https://github.com/sxalexander/jquery-scrollspy) 362 | - [jquery-scrollspy(2)](https://github.com/thesmart/jquery-scrollspy) 363 | - [Waypoints](https://github.com/imakewebthings/waypoints) 364 | - [ScrollMagic - 像进度条一样使用滚动条](https://github.com/janpaepke/ScrollMagic) 365 | 366 | ### 13.10 滚动加载更多/下拉刷新(Pull to Refresh) ### 367 | 368 | - [jScroll](https://github.com/pklauzinski/jscroll) 369 | - [web-pull-to-refresh](https://github.com/apeatling/web-pull-to-refresh) 370 | - [pulltorefresh](https://github.com/dwcares/pulltorefresh) 371 | - [RubberBand.js - add pull-to-refresh functionality to any page.](https://github.com/ThrivingKings/RubberBand.js) 372 | 373 | ### 13.11 平滑滚动插件(Smooth Scroll) ### 374 | 375 | - [jquery-smooth-scroll](https://github.com/kswedberg/jquery-smooth-scroll) 376 | - [jquery.scrollTo - 平滑滚动到页面指定位置](https://github.com/flesler/jquery.scrollTo) 377 | - [smooth-scroll](https://github.com/cferdinandi/smooth-scroll) 378 | - [scrollUp](https://github.com/markgoodyear/scrollup) 379 | - [elevator.js - 一个模拟电梯运行“返回顶部”的 JS 插件](https://github.com/tholman/elevator.js) 380 | 381 | ### 13.12 全屏滚动/全屏切换 ### 382 | 383 | - [pagePiling.js - 全屏滚动效果](https://github.com/alvarotrigo/pagePiling.js) 384 | - [fullPage.js](https://github.com/alvarotrigo/fullPage.js/) 385 | - [onepage-scroll](https://github.com/peachananr/onepage-scroll) 386 | - [zepto.fullpage - 专注于移动端的fullPage.js](https://github.com/yanhaijing/zepto.fullpage) 387 | - [screenfull.js - 切换全屏模式](https://github.com/sindresorhus/screenfull.js) 388 | 389 | ### 13.13 分屏滚动 ### 390 | 391 | - [multiscroll.js - 分屏滚动效果](https://github.com/alvarotrigo/multiscroll.js) 392 | 393 | ### 13.14 转场效果 ### 394 | 395 | - [Animsition - 页面切换时的过渡效果](https://github.com/blivesta/animsition) 396 | 397 | ### 13.15 固定元素(Sticky) ### 398 | 399 | - [sticky - jQuery Plugin for Sticky Objects](https://github.com/garand/sticky) 400 | - [jquery.pin - 固定页面元素](https://github.com/webpop/jquery.pin) 401 | - [stickUp](https://github.com/LiranCohen/stickUp) 402 | - [Slinky.js - 堆叠头部创建滑动导航列表](https://github.com/iclanzan/slinky) 403 | 404 | ### 13.16 触控事件 ### 405 | 406 | - [Hammer.js](https://github.com/hammerjs/hammer.js) 407 | - [jquery.event.move.js](https://github.com/stephband/jquery.event.move) 408 | 409 | ### 13.17 拖拽组件 ### 410 | 411 | - [Draggabilly - 专注于拖拽功能的 JS 库](https://github.com/desandro/draggabilly) 412 | - [dragula - 一个让拖放操作变简单的 JS 库](https://github.com/bevacqua/dragula) 413 | - [GridList - 可拖拉的响应式列表库](https://github.com/uberVU/grid) 414 | 415 | ### 13.18 隐藏或展示页面元素 ### 416 | 417 | - [Headroom.js - 在不需要页头时将其隐藏](http://www.bootcss.com/p/headroom.js/) 418 | - [Readmore.js - 内容显示与隐藏插件](https://github.com/jedfoster/Readmore.js) 419 | - [oriDomi - 像指一样折叠Dom元素](https://github.com/dmotz/oriDomi) 420 | 421 | ### 13.19 滚动条(Scrollbar) ### 422 | 423 | - [jScrollPane](https://github.com/vitch/jScrollPane) 424 | - [jquery.scrollbar](https://github.com/gromo/jquery.scrollbar) 425 | - [perfect-scrollbar](https://github.com/noraesae/perfect-scrollbar) 426 | - [nanoScrollerJS](https://github.com/jamesflorentino/nanoScrollerJS) 427 | - [tinyscrollbar](https://github.com/wieringen/tinyscrollbar) 428 | 429 | ### 13.20 视差滚动(Parallax Scrolling) ### 430 | 431 | - [parallax.js](https://github.com/wagerfield/parallax) 432 | - [jparallax](https://github.com/stephband/jparallax) 433 | - [skrollr](https://github.com/Prinzhorn/skrollr) 434 | 435 | ## 14. 代码高亮插件/代码编辑器 ## 436 | 437 | - [google-code-prettify](https://code.google.com/p/google-code-prettify/) 438 | - [highlight.js](https://highlightjs.org/) 439 | - [Rainbow](http://craig.is/making/rainbows) 440 | - [ACE](https://github.com/ajaxorg/ace) 441 | - [CodeMirror](https://github.com/codemirror/codemirror) 442 | - [Crayon Syntax Highlighter](https://github.com/aramk/crayon-syntax-highlighter) 443 | - [prism - Lightweight, robust, elegant syntax highlighting.](https://github.com/PrismJS/prism) 444 | 445 | ## 15. UI Icon 组件 ## 446 | 447 | - [Font Awesome](http://fontawesome.io/icons/) 448 | - [Glyphter: The SVG Font Machine](http://glyphter.com/) 449 | - [Perfect Icons](http://perfecticons.com/) 450 | - [iconizr](http://iconizr.com/) 451 | - [Cikonss - 纯CSS实现的响应式Icon](http://www.bootcss.com/p/cikonss/) 452 | - [Simple Icons](https://github.com/danleech/simple-icons) 453 | 454 | ## 16. 动画(Animate) ## 455 | 456 | - [animate.css - A cross-browser library of CSS animations.](https://github.com/daneden/animate.css) 457 | - [Transit - CSS transitions and transformations for jQuery](https://github.com/rstacruz/jquery.transit) 458 | - [WOW - 在滚动过程中展示CSS动画效果(默认触发animate.css动画)](https://github.com/matthieua/WOW) 459 | - [AniJS - A Library to Raise your Web Design without Coding](https://github.com/anijs/anijs/) 460 | - [Move.js - 简化CSS3动画的JS库](https://github.com/visionmedia/move.js) 461 | - [ScrollMe – 在网页中加入各种滚动动画效果](https://github.com/nckprsn/scrollme) 462 | - [Effeckt.css - A Performant Transitions and Animations Library](https://github.com/h5bp/Effeckt.css) 463 | - [NEC动画库](http://nec.netease.com/library/category/#animation) 464 | - [csshake - CSS classes to move your DOM](https://github.com/elrumordelaluz/csshake) 465 | - [magic - CSS3 Animations with special effects](https://github.com/miniMAC/magic) 466 | - [Hover.css - 很多鼠标Hover态的效果](https://github.com/IanLunn/Hover) 467 | - [SpinKit](https://github.com/tobiasahlin/SpinKit) 468 | - [Velocity.js - 加速JavaScript动画](https://github.com/julianshapiro/velocity) 469 | - [lenticular.js - 响应倾斜或鼠标事件创建图片动画](https://github.com/thomasxiii/lenticular.js) 470 | - [jQuery Interactive 3D - Create a 3D interactive object using images](https://github.com/peachananr/interactive_3d) 471 | - [AnimateScroll - A Simple jQuery Plugin for Animating Scroll](https://github.com/ramswaroop/animatescroll.js) 472 | - [Blast.js - 把动画和样式注入到文本中](https://github.com/julianshapiro/blast) 473 | - [Bounce.js - 一个用于制作漂亮 CSS3 关键帧动画的 JS 库](https://github.com/tictail/bounce.js) 474 | - [Sticker.js - create a Sticker Effect](https://github.com/cmiscm/stickerjs) 475 | - [scrollReveal.js - 元素进入可视区域自动触发设置好的动画](https://github.com/julianlloyd/scrollReveal.js) 476 | - [stroll.js - CSS3 list scroll effects](https://github.com/hakimel/stroll.js) 477 | - [jQuery Easing - 动画效果扩展](https://github.com/gdsmith/jquery.easing) 478 | - [animations - CSS3 ANIMATION CHEAT SHEET](http://www.justinaguilar.com/animations/index.html) 479 | - [iconate.js：将 icons 增加动画效果的 JS 库](https://github.com/bitshadow/iconate) 480 | 481 | ## 17. 本地存储 ## 482 | 483 | - [cross-storage - Cross domain local storage](https://github.com/zendesk/cross-storage) 484 | - [localForage](https://github.com/mozilla/localForage) 485 | - [pouchdb](https://github.com/pouchdb/pouchdb) 486 | - [basil.js](https://github.com/Wisembly/basil.js) 487 | - [Neurosync - JavaScript 本地离线 ORM 库](https://github.com/ClickerMonkey/neurosync) 488 | 489 | ## 18. 模板引擎 ## 490 | 491 | - [mustache.js](https://github.com/janl/mustache.js) 492 | - [Handlebars.js](http://www.jingwentian.com/t-66) 493 | - [artTemplate](https://github.com/aui/artTemplate) 494 | - [baiduTemplate](https://github.com/wangxiao/BaiduTemplate) 495 | - [JSRender](https://github.com/BorisMoore/jsrender) 496 | - [EJS - JavaScript Templates](https://github.com/tj/ejs) 497 | - [Juicer - A Light Javascript Templete Engine.](https://github.com/PaulGuo/Juicer) 498 | - [Tempo](https://github.com/twigkit/tempo) 499 | - [json2html](https://github.com/moappi/json2html) 500 | - [Hogan.js - JavaScript templating from Twitter.](https://github.com/twitter/hogan.js) 501 | - [Dust.js - Linkedin维护的项目](https://github.com/linkedin/dustjs) 502 | 503 | ## 19. 通知组件/弹框组件/模态窗口 ## 504 | 505 | - [Notify.js(Web Notifications API)](https://github.com/alexgibson/notify.js) 506 | - [alertify.js](https://github.com/fabien-d/alertify.js) 507 | - [AlertifyJS](https://github.com/MohammadYounes/AlertifyJS) 508 | - [SweetAlert](https://github.com/t4t5/sweetalert) 509 | - [Messenger - 非常酷的弹框组件](https://github.com/HubSpot/messenger) 510 | - [PNotify](https://github.com/sciactive/pnotify) 511 | - [Notify.js - A simple, versatile notification library](https://github.com/jpillora/notifyjs) 512 | - [Remodal - 模态窗口插件](https://github.com/VodkaBears/Remodal) 513 | - [action.js - 极简的tip和Modal弹窗效果](https://github.com/egoist/action.js) 514 | 515 | ## 20. 提示控件(Tooltips) ## 516 | 517 | - [hint.css - 一款非常小巧的提示框效果](https://github.com/chinchang/hint.css) 518 | - [qTip2 - Pretty powerful tooltips](https://github.com/qTip2/qTip2) 519 | - [tooltip - CSS Tooltips](https://github.com/HubSpot/tooltip) 520 | - [tooltipster - A jQuery tooltip plugin](https://github.com/iamceege/tooltipster) 521 | - [grumble.js - 气泡形状的提示（Tooltip）控件](https://github.com/jamescryer/grumble.js) 522 | - [Ouibounce - 离站提示控件](https://github.com/carlsednaoui/ouibounce) 523 | - [intro.js - 一个创建引导式网站介绍功能的 JS 库](https://github.com/usablica/intro.js) 524 | - [data-tip.css - 纯 CSS 实现的工具提示](https://github.com/egoist/data-tip.css) 525 | 526 | ## 21. 对话框/遮罩层/弹出层(lightbox) ## 527 | 528 | - [fancyBox - Fancy jQuery lightbox](https://github.com/fancyapps/fancyBox) 529 | - [jquery-lightbox - The popular lightbox script, ported to jQuery](https://github.com/krewenki/jquery-lightbox) 530 | - [Colorbox - a jQuery lightbox](https://github.com/jackmoore/colorbox) 531 | - [artDialog - 经典的网页对话框组件](https://github.com/aui/artDialog) 532 | - [DialogEffects](https://github.com/codrops/DialogEffects) 533 | - [jQuery blockUI - Page or element overlay](https://github.com/malsup/blockui/) 534 | - [layer - web弹出窗/层](https://github.com/sentsin/layer/) 535 | 536 | ## 22. 文档/表格/PDF ## 537 | 538 | - [Backgrid.js - 强大的表格组件](https://github.com/wyuenho/backgrid) 539 | - [handsontable - 在线可编辑excel表格](https://github.com/handsontable/handsontable) 540 | - [jQuery Bootgrid - 用于ajax生成动态表格](https://github.com/rstaib/jquery-bootgrid) 541 | - [DataTables - Table plug-in for jQuery](https://github.com/DataTables/DataTables) 542 | - [PDF.js - 一个 JavaScript 编写的 PDF 阅读器](https://github.com/mozilla/pdf.js) 543 | - [jsPDF - Generate PDF files in JavaScript](https://github.com/MrRio/jsPDF) 544 | - [Recline.js - 灵活操作和展示数据](https://github.com/okfn/recline/) 545 | - [Dynatable - 交互式表格插件](https://github.com/alfajango/jquery-dynatable) 546 | - [fattable - 创建无限滚动无限行列数的表格](https://github.com/fulmicoton/fattable) 547 | 548 | ## 23. 目录树插件 ## 549 | 550 | - [zTree_v3 - jQuery Tree Plugin](https://github.com/zTree/zTree_v3) 551 | - [jstree - jQuery Tree Plugin](https://github.com/vakata/jstree) 552 | - [fancytree - Tree plugin for jQuery](https://github.com/mar10/fancytree) 553 | 554 | ## 24. Ajax模块 555 | 556 | - [fetch - A window.fetch JavaScript polyfill](https://github.com/github/fetch) 557 | - [reqwest - browser asynchronous http requests](https://github.com/ded/reqwest) 558 | - [ajax - Standalone AJAX library](https://github.com/ForbesLindesay/ajax) 559 | - [then-request](https://github.com/then/then-request) 560 | - [browser-request](https://github.com/iriscouch/browser-request) 561 | - [superagent](https://github.com/visionmedia/superagent) 562 | - [minAjax.js](https://github.com/argunner/minAjax.js/) 563 | 564 | ## 25. 音频/视频 ## 565 | 566 | - [jPlayer - HTML5 Audio & Video for jQuery](https://github.com/happyworm/jPlayer) 567 | - [video.js - HTML5 & Flash video player](https://github.com/videojs/video.js) 568 | - [Accessible HTML5 Video Player - PayPal 开源的 HTML5 视频播放器](https://github.com/paypal/accessible-html5-video-player) 569 | - [Clappr - 开源的Web视频播放器](https://github.com/clappr/clappr) 570 | - [Plyr - A simple HTML5 media player](https://github.com/selz/plyr) 571 | - [FitVids.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.](https://github.com/davatron5000/FitVids.js) 572 | - [BigVideo.js - The jQuery Plugin for Big Background Video](https://github.com/dfcb/BigVideo.js) 573 | - [BigScreen - A simple library for using the JavaScript Full Screen API](https://github.com/bdougherty/BigScreen) 574 | - [Vide - 视频背景](https://github.com/VodkaBears/Vide) 575 | - [winamp2-js](https://github.com/captbaritone/winamp2-js) 576 | - [Buzz - A Javascript HTML5 Audio library](https://github.com/jaysalvat/buzz) 577 | - [MediaElement.js](http://github.com/johndyer/mediaelement/) 578 | 579 | ## 26. 按钮 ## 580 | 581 | - [Buttons - A CSS button library](https://github.com/alexwolfe/Buttons) 582 | - [ButtonComponentMorph](https://github.com/codrops/ButtonComponentMorph) 583 | - [ProgressButtonStyles](https://github.com/codrops/ProgressButtonStyles) 584 | - [CreativeButtons](https://github.com/codrops/CreativeButtons) 585 | - [CSS3 buttons](https://github.com/ubuwaits/css3-buttons) 586 | - [jquery.onoff - Interactive, accessible toggle switches for the web.](https://github.com/timmywil/jquery.onoff) 587 | 588 | ## 27. 富文本编辑器/Markdown编辑器/Markdown解析器 ## 589 | 590 | - [Simditor - 简单快速的富文本编辑器](https://github.com/mycolorway/simditor) 591 | - [BachEditor - 一个有情怀的编辑器](https://github.com/Integ/BachEditor) 592 | - [TinyMCE](https://github.com/tinymce/tinymce) 593 | - [bootstrap-markdown](https://github.com/toopay/bootstrap-markdown) 594 | - [marked - markdown解析器](https://github.com/chjj/marked) 595 | - [Markdown Plus](https://github.com/tylingsoft/markdown-plus) 596 | - [Editor.md - 开源在线Markdown编辑器](https://github.com/pandao/editor.md) 597 | - [stackedit](https://github.com/benweet/stackedit) 598 | - [Redactor Text Editor](http://imperavi.com/redactor/) 599 | - [micromarkdown.js - 轻量级的md解析器](https://github.com/simonwaldherr/micromarkdown.js/) 600 | - [wangEditor - 支持移动端的轻量级web富文本框](https://github.com/wangfupeng1988/wangEditor) 601 | 602 | ## 28. 内容提取(Readability) ## 603 | 604 | - [Readability](https://code.google.com/p/arc90labs-readability/) 605 | - [json.human.js - Json Formatting for Human Beings](https://github.com/marianoguerra/json.human.js) 606 | 607 | ## 29. 颜色(CSS Colors)/SVG/Canvas ## 608 | 609 | - [CSS Colours](http://colours.neilorangepeel.com/) 610 | - [SVGeneration](http://www.svgeneration.com/) 611 | - [SVGMagic - 自动的创建PNG来兼容不支持SVG的浏览器](https://github.com/dirkgroenen/SVGMagic) 612 | - [Adaptive Backgrounds - 从图片抽取主要颜色和应用到父元素](https://github.com/briangonzalez/jquery.adaptive-backgrounds.js) 613 | - [Seen.js - 渲染3D场景为SVG或者HTML Canvas](https://github.com/themadcreator/seen) 614 | 615 | ## 30. 选项卡(Tabs) ## 616 | 617 | - [Easy Responsive Tabs to Accordion](https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion) 618 | - [Responsive-Tabs](https://github.com/jellekralt/Responsive-Tabs) 619 | - [ion.tabs - jQuery tabs plugin](https://github.com/IonDen/ion.tabs) 620 | - [jQuery-EasyTabs](https://github.com/JangoSteve/jQuery-EasyTabs) 621 | - [tabulous.js](https://github.com/aarondo/tabulous.js) 622 | 623 | ## 31. 文本处理 ## 624 | 625 | - [ZeroClipboard - 文本复制插件](https://github.com/zeroclipboard/zeroclipboard) 626 | - [clipboard.js](https://github.com/zenorocha/clipboard.js/) 627 | - [Bigfoot - 点击文章中的脚注弹窗显示](https://github.com/lemonmade/bigfoot) 628 | - [Annotator - 文本注解插件，可以包括注释、标签、用户等](https://github.com/openannotation/annotator) 629 | - [Succinct - 用作截断多行文本,后面添加省略号](https://github.com/micjamking/Succinct) 630 | - [Flowtype.js - 自动调整字体大小和行号](https://github.com/simplefocus/FlowType.JS) 631 | - [flat-shadow](https://github.com/peachananr/flat-shadow) 632 | - [FitText - A jQuery plugin for inflating web type](https://github.com/davatron5000/FitText.js) 633 | - [shine.js - 实现漂亮阴影](https://github.com/bigspaceship/shine.js) 634 | - [Type Rendering Mix - 文本渲染引擎](https://github.com/bramstein/trmix/) 635 | - [jquery-expander - 阅读更多](https://github.com/kswedberg/jquery-expander) 636 | - [Typed.js - 输入模拟插件](https://github.com/mattboldt/typed.js/) 637 | - [jQuery.dotdotdot - 多行文本溢出显示省略号](https://github.com/FrDH/jQuery.dotdotdot) 638 | 639 | ## 32. 布局(Layout) ## 640 | 641 | - 分隔面板(Split Panel) 642 | - [split-pane](https://github.com/shagstrom/split-pane) 643 | - [jQuery UI Layout](http://layout.jquery-dev.com/) 644 | 645 | ## 33. 演示/幻灯片 ## 646 | 647 | - [reveal.js - The HTML Presentation Framework](https://github.com/hakimel/reveal.js) 648 | - [bespoke.js - DIY Presentation Micro-Framework](https://github.com/markdalgleish/bespoke.js) 649 | - [impress.js](https://github.com/bartaz/impress.js) 650 | - [shower](https://github.com/shower/shower) 651 | - [deck.js](https://github.com/imakewebthings/deck.js) 652 | 653 | ## 34. 国际化(i18n) ## 654 | 655 | - [jquery-i18n](https://github.com/recurser/jquery-i18n) 656 | - [i18next.js](https://github.com/i18next/i18next) 657 | - [jsperanto.js](https://github.com/jpjoyal/jsperanto) 658 | - [jed.js](https://github.com/SlexAxton/Jed) 659 | - [messageformat.js](https://github.com/SlexAxton/messageformat.js) 660 | - [Polyglot.js](https://github.com/airbnb/polyglot.js) 661 | 662 | ## 35. 邮件模板(Email Templates) ## 663 | 664 | - [responsive-html-email-template](https://github.com/leemunroe/responsive-html-email-template) 665 | 666 | ## 36. 移动端优化(Optimizing Mobile Performance) ## 667 | 668 | - [FastClick - 处理移动端 click 事件 300 毫秒延迟](https://github.com/ftlabs/fastclick) 669 | - [tappy](https://github.com/filamentgroup/tappy/) 670 | - [jquery-fast-click](https://github.com/dave1010/jquery-fast-click) 671 | 672 | ## 37. HTTP请求相关 ## 673 | 674 | - [pako - HTTP 请求正文压缩](https://github.com/nodeca/pako) 675 | - [参考阅读: 如何压缩 HTTP 请求正文](https://imququ.com/post/how-to-compress-http-request-body.html) 676 | - [HTTP 请求正文压缩 DEMO](https://qgy18.com/request-compress/) 677 | - [RSA in JavaScript - 用RSA加密实现Web数据加密传输](http://www.ohdave.com/rsa/) 678 | 679 | ## 38. 实用工具/其他插件 ## 680 | 681 | - [jquery-cookie](https://github.com/carhartl/jquery-cookie) 682 | - [InstantClick - 预加载用户可能会点击的一些链接](https://github.com/dieulot/instantclick/) 683 | - [Async.js - 异步操作](https://github.com/caolan/async) 684 | - [html2canvas - 实现纯JS网页截图](https://github.com/niklasvh/html2canvas) 685 | - [jquery.qrcode.js - 生成二维码的 jQuery 插件](https://github.com/jeromeetienne/jquery-qrcode) 686 | - [qrcodejs - JS生成QRCode的库](https://github.com/davidshimjs/qrcodejs) 687 | - [nakedpassword - 用脱衣女帮助检测密码强度](https://github.com/platform45/nakedpassword) 688 | - [KityMinder - 脑图编辑工具](https://github.com/fex-team/kityminder) 689 | - [MixitUp - 动画过滤和排序](https://github.com/patrickkunka/mixitup) 690 | - [JQuery Tip Cards - 创建卡片交互的cards布局](https://github.com/peachananr/tip_cards) 691 | - [Fallback.js - JavaScript library for dynamically loading CSS and JS files.](https://github.com/dolox/fallback/) 692 | - [swfobject](https://github.com/swfobject/swfobject) 693 | - [prettyprint.js - An in-browser JavaScript variable dumper](https://github.com/padolsey-archive/prettyprint.js) 694 | - [Shepherd - 为应用创建用户指南](https://github.com/HubSpot/shepherd) 695 | - [RulersGuide.js - 类似PhotoShop标尺的js库](https://github.com/mark-rolich/RulersGuides.js) 696 | - [Gremlins.js - Monkey 测试库](https://github.com/marmelab/gremlins.js) 697 | - [RoughDraft.js - 简单快速的创建交互式的 HTML 模型的原型工具](https://github.com/ndreckshage/roughdraft.js/) 698 | - [favico.js - 动态改变浏览器标签栏中的网站图标](https://github.com/ejci/favico.js) 699 | 700 | #设计模式( JavaScript Patterns ) 701 | 702 | - [javascript-patterns](https://github.com/shichuan/javascript-patterns) 703 | - [jquery-patterns - A variety of jQuery plugin patterns](https://github.com/jquery-boilerplate/jquery-patterns) 704 | - [Learning JavaScript Design Patterns](http://addyosmani.com/resources/essentialjsdesignpatterns/book/) 705 | 706 | #在线工具( Online Tools ) 707 | 708 | - [jsbin - Collaborative JavaScript Debugging App](http://jsbin.com) 709 | - [jsbin@Github](https://github.com/jsbin/jsbin) 710 | - [jsfiddle](http://jsfiddle.net/) 711 | - [jsbeautifier - Online JavaScript beautifier](http://jsbeautifier.org/) 712 | - [resume.github.com](http://resume.github.io) 713 | 714 | # 前端开发工具 # 715 | 716 | ## 1. 开发工具 ## 717 | 718 | - [Sublime Text](http://www.sublimetext.com/) 719 | 720 | ## 2. 调试工具 ## 721 | 722 | - [Fiddler](http://www.telerik.com/fiddler) 723 | - [Weinre](http://people.apache.org/~pmuellr/weinre-docs/latest/Home.html) 724 | - [Rythem](http://www.alloyteam.com/2012/05/web-front-end-tool-rythem-1/) 725 | - [csscss - 用于检查css代码冗余](https://github.com/zmoazeni/csscss) 726 | - [FECS - 基于 Node.js 的前端代码检查工具](http://fecs.baidu.com/) 727 | 728 | ## 3. 浏览器扩展(Chrome Extensions) ## 729 | 730 | - [Postman - REST Client](https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm) 731 | - [Fiddler - Fiddler for Chrome Extension](http://welefen.github.io/Fiddler/) 732 | - [WEB前端助手(FeHelper)](https://chrome.google.com/webstore/detail/web%E5%89%8D%E7%AB%AF%E5%8A%A9%E6%89%8Bfehelper/pkgccpejnmalmdinmhkkfafefagiiiad) 733 | - [Web Developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm) 734 | - [Chrome Logger](https://chrome.google.com/webstore/detail/chrome-logger/noaneddfkdjfnfdakjjmocngnfkfehhd) 735 | - [ColorZilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp) 736 | - [ColorPick Eyedropper](https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=en) 737 | - [Code Cola](https://chrome.google.com/webstore/detail/code-cola/lomkpheldlbkkfiifcbfifipaofnmnkn) 738 | - [1px](https://chrome.google.com/webstore/detail/1px/gebccnmciopflhcdihopmphapifkkfdh) 739 | - [AlloyDesigner - 前端重构开发辅助工具](https://chrome.google.com/webstore/detail/alloydesigner/ojooeaohlmgpcjajikhmibcnbebfenid) 740 | - [Fontface Ninja](https://chrome.google.com/webstore/detail/fontface-ninja/eljapbgkmlngdpckoiiibecpemleclhh) 741 | - [PageSpeed Insights (by Google)](https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo/gplegfbjlmmehdoakndmohflojccocli) 742 | - [HTTP Status](https://chrome.google.com/webstore/detail/http-status/cknfnacbckhfpjahnmkblajcpledpfnp/related) 743 | - [Redirect Path](https://chrome.google.com/webstore/detail/redirect-path/aomidfkchockcldhbkggjokdkkebmdll/related) 744 | - [Responsive Web Design Tester](https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg?hl=en) 745 | - [Window Resizer](https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en) 746 | - [CSSViewer](https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=en) 747 | - [IE Tab](https://chrome.google.com/webstore/detail/ie-tab/hehijbfgiekmjfkfjpbkbammjbdenadd?hl=en) 748 | - [Clear Cache](https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=en) 749 | - [JSONView](https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn/related?hl=en) 750 | - [Image Downloader](https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj) 751 | - [Pretty Beautiful Javascript - 可以自动格式化混淆的js文件](https://chrome.google.com/webstore/detail/pretty-beautiful-javascri/piekbefgpgdecckjcpffhnacjflfoddg/related?utm_source=chrome-ntp-icon) 752 | - [JavaScript Errors Notifier](https://chrome.google.com/webstore/detail/javascript-errors-notifie/jafmfknfnkoekkdocjiaipcnmkklaajd?utm_source=chrome-ntp-icon) 753 | - [CSS Diff - 在线比对页面上两个元素的CSS样式差异](https://chrome.google.com/webstore/detail/css-diff/pefnhibkhcfooofgmgoipfpcojnhhljm/related) 754 | - [WhatFont- 识别网页所使用的字体](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm) 755 | 756 | # 前端参考集 # 757 | 758 | - [frontend-guidelines - Some HTML, CSS and JS best practices.](https://github.com/bendc/frontend-guidelines) 759 | - [frontend-dev-bookmarks](https://github.com/dypsilon/frontend-dev-bookmarks) 760 | - [Codrops - Useful resources](https://github.com/codrops) 761 | - [Front-end Code Standards & Best Practices](http://isobar-idev.github.io/code-standards/) 762 | - [frontend-dev-bookmarks](https://github.com/dypsilon/frontend-dev-bookmarks) 763 | - [Airbnb 的 JavaScript 编码规范](https://github.com/airbnb/javascript) 764 | - [awesome-javascript](https://github.com/wwsun/awesome-javascript) 765 | --------------------------------------------------------------------------------