前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)

0. 前端自动化(Workflow)

• 前端构建工具
• 
  
• • Webpack - module bundler
  • Yeoman - a set of tools for automating development workflow
  • gulp - The streaming build system
    • use-gulp
  • grunt - the JavaScript Task Runner
  • F.I.S - 前端集成解决方案
  • Web Starter Kit - 一个Google 提供的帮助开发者快速设置项目的工具集
• 
  
• 
  
• 前端模块管理器
• • 
    
  • Bower - A package manager for the web
• • Browserify
  • Component
  • Duo
  • RequireJS
  • Sea.js
  • LABjs - 文件加载器
  • css-modulesify - CSS模块加载器
• 
  
• 
  
• css预处理器
  • 
    
  • Less - Less is More , Than CSS
  • Sass - Syntactically Awesome Style Sheets
  • Stylus - Expressive, dynamic, robust CSS
• 
  
• 
  
• 前端性能分析工具
  • 
    
  • analyze-css - CSS 选择器的复杂度和性能分析器

  
  

1. 前端框架(Frameworks)

• Bootstrap
• Foundation
• Amaze UI
• Semantic UI
• Pure CSS
• topcoat
• UIkit
• Material UI
• Materialize - 一个基于 Material Design 的 CSS 框架
• Framework7
• mui
• ionic framework
• Fries
• jQuery Mobile
• App.js
• Office UI Fabric - 微软 Office 前端团队的框架

2. JavaScript 框架汇总

• 
  
• JavaScript 框架
  • 
    
  • react
  • Angular
  • jQuery
  • Backbone.js
  • ember.js
  • Ractive.js
  • KISSY
  • Zepto.js
  • Vanilla JS
  • Vue.js - 数据驱动的组件化MVVM库(用于创建web交互界面和数据双向绑定)
    • Vuex - 一个专门为 Vue.js 应用设计的状态管理架构
    • Mint UI：基于 Vue.js 的移动端组件库
    • Vux - 基于 Vue 和 WeUI 的 UI 组件库
  • Can.js
  • Avalon
  • T3 JavaScript Framework - 一个用于搭建大型Web应用的客户端JS框架
  • jsblocks - Better MV-ish Framework 从简单 UI 到复杂单页应用都适用
• 
  
• 
  
• 轻量级JavaScript框架
  • 
    
  • Min.js - Super minimal selector and event library
  • skel.js - A lightweight responsive framework
  • Sprint.js - 一个高性能、小体积的 DOM 操作库
  • knockout
  • PhantomJS - 一个基于 WebKit 的服务器端 JavaScript API
• 
  
• 
  
• 函数式反应型编程框架 FRP (Functional Reactive Programming) library
  • 
    
  • Bacon.js - A small functional reactive programming lib for JavaScript.
  • Flapjax - 一个支持FRP的JavaScript框架
• 
  
• 
  
• JavaScript 工具库
  • 
    
  • underscore.js
  • Underscore.string.js字符串操作库
  • functional.js
  • Lo-Dash - A JavaScript utility library
  • Lazy.js - a functional utility library for JavaScript
  • Fn.js
  • Way.js - 双向数据绑定库
  • boiler - a utility library that makes tasks in JavaScript easier
  • 
    
  • 快捷键操作
    • 
      
    • Keys.js - 应用快捷键
    • simple-hotkeys
    • jquery.hotkeys
    • Mousetrap - 键盘快捷键操作
  • vConsole - 一个针对手机网页的前端 console 调试面板
  • AlloyLever - 移动web开发者工具面板

  
  

3. 前端游戏框架

• cocos2d-html5
• Egret Engine
• LimeJS
• EaselJS
• three.js
• AlloyStick
• The-Best-JS-Game-Framework
• CanvasEngine
• Quintus
• Stage.js
• phaser - 一个快速、免费、开源的 HTML5 游戏框架

4. ui组件库(CSS Framework)

• WeUI - 微信官方UI库
  • jQuery WeUI - WeUI的jQuery版本
• GMU - 基于zepto的ui组件库，适用于移动端
• FrozenUI - 腾讯移动端组件库
• NEC - 更好的CSS方案
• NEJ - 更好的JS解决方案
• Pure CSS Components
• magic-of-css
• Primer - The CSS toolkit and guidelines that power GitHub
• light7 - A Light and easy to use UI Lib
• Spectre.css - 轻量、响应式的现代 CSS 框架

5. 基础模版

• 
  
• 浏览器统一(Cross Browser)
  • 
    
  • HTML5 BOILERPLATE
  • Modernizr
  • Normalize.css
  • HTML5 Shiv - 让ie浏览器成为支持html5的浏览器的解决方法
  • cssFx - 为CSS3自动生成浏览器前缀
  • -prefix-free - Break free from CSS prefix hell
  • ieBetter.js - make ie browser like a morden browser main for ie6~ie8
  • es6-promise - Promise 对象的兼容
• 
  
• 
  
• 响应式
  • 
    
  • Responsive - 响应式布局
  • Enquire.js - Awesome Media Queries in JavaScript
  • Free Wall - 创建桌面，移动和平板的动态网格布局
• 
  
• 
  
• 适配方案
  • 
    
  • MetaHandler.js：移动端适配各种屏幕无痛工具脚本
  • lib-flexible: 移动端自适应方案
    • 参考: 使用Flexible实现手淘H5页面的终端适配
    • flexible demo 1
    • flexible demo 2
  • pageResponse
  • responsive-page

  
  

6. 排版

• yue.css
• typo.css
• chinese-copywriting-guidelines - 中文文案排版指南

7. 网格系统

• grid
• Flexbox Grid
• MasonJS - creating a perfect grid

8. 路由和链接(Routing And URLs)

• History.js - gracefully supports the HTML5 History/State APIs
• jquery-pjax - pushState+ajax
• jquery-address - Deep Linking
• page.js - Micro client-side router
• crossroads.js
• hash.js
  
• path.js
• director.js - 前端路由库(通过#符号进行路径组织,结合vue的component可进行单页的局部模块刷新)
• URI.js
• Roadcrew.js
• SpeakingURL
• uparams - An URL params parser
• StateMan - 一个处理深层次单页系统的路由库

9. UA 识别

• detector

10. 表单处理

10.1 表单验证(Form Validator)/表单提示

• Validator
• Parsley
• jquery.form.js - jQuery Form Plugin
• Validform
• validator.js
• jquery-validation - jQuery Validation Plugin
• formvalidator.js
• Fort.js – 表单填写进度提示
• mailcheck - 用于检测email地址的域名
• Floatlable.js - 输入时显示placeholder文本
• jQuery Label Better
• validator.js
• 
  

10.2 < input > 相关

• cleave.js - 格式化你的输入内容
• 
  

10.3 < select > 相关

• Chosen
• Select2
• bootstrap-select
• 
  

10.4 单选框/复选框相关

• iCheck - 增强复选框和单选按钮
• Switchery - iOS 7 style switches for your checkboxes
• 
  

10.5 上传组件

• jQuery File Upload Plugin
• 百度 Web Uploader
• uploadify
• Plupload
• Fine Uploader
• arale-upload - 轻量级 iframe and html5 file uploader
• Dropzone.js - 文件上传库(可获取文件mime, 文件大小等; 针对图片可生成缩略图,获取图片宽度,高度)
• flow.js
• localResizeIMG - 前端本地客户端压缩图片，兼容IOS，Android，PC
• simple-uploader
• 
  

10.6 日期选择

• Both Date and Time picker widget based on twitter bootstrap
• GMU 日历组件
• Mobiscroll
• Pikaday - 日期选择器
• PriceCalendar - 酒店价格日历
  • API文档
    
  • DEMO
  • 
    

10.7 取色

• Colorpicker plugin for Twitter Bootstrap
• 
  

10.8 标签插件(Tag)

• TaggingJS – 可以灵活定制的 jQuery 标签系统插件
• selectize.js
• Bootstrap Tags Input
• jQuery-Tags-Input
• 
  

10.9 自动完成插件

• At.js - 一个Twitter/微博样式的@自动完成插件
• jquery-textcomplete - 智能搜索提示框/自动补全
• typeahead.js - a fast and fully-featured autocomplete library
• 
  

10.10 样式修正

• autosize - 使文本框自动适应所输入的内容

11. 图表绘制/图形库(Graphics)

• Highcharts
• Chart.js - Simple HTML5 Charts using Canvas
• 百度 ECharts
• Chartist.js
• D3.js - A JavaScript visualization library for HTML and SVG.
  • intro-to-d3 - a D3.js tutorial
• Bonsai - 一个功能强大的JavaScript图形库
• epoch - 数据图表可视化
• Vis.js
• Coutour.js
• zrender - 一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同！

12. 日期格式化 & 时间轴

• Moment.js - 日期处理
• Smart Time Ago - 显示相对时间
• timeline.js

13. 页面交互

13.1 Slider

• slick - the last carousel you'll ever need
• Swipe - the most accurate touch slider
• Swiper - Most modern mobile touch slider
• iscroll - Smooth scrolling for the web
• iSlider - 移动端滑动组件
• OwlCarousel - create beautiful responsive carousel slider
• jquery-mousewheel - jQuery鼠标滚轮滚动侦测插件
• Glide.js - 轻量级滑块组件
• PhotoSwipe
• TouchSlide - 触屏滑动特效(焦点图,Tab切换)
• 
  

13.2 瀑布流

• Masonry
• Isotope - Filter & sort magical layouts
• Bricklayer
• 
  

13.3 懒加载/加载监听/预加载

• imagesLoaded
• Echo.js
• lazySizes
• jquery_lazyload
• BttrLazyLoading
• lazyload.js
• layzr.js - 一个小巧快速的图片懒加载库
• waitForImages - 图片加载监听库
• PxLoader - JS预加载库:实现图片、声音等各种文件的预加载功能
• bindWithDelay - jQuery Plugin For Delayed Event Execution
• TypeWatch - 停止输入时调用
• 
  

13.4 图片轮播(幻灯片)/图片展示

• FlexSlider
• unslider - 小而美的轮播库
• prettyPhoto
• FlickerPlate - A cool jQuery plugin that lets you flick through content.
• Holder.js - Client-side image placeholders.
• RowGrid.js - 在径直的行里放置图片
• ImageLightbox.js - 灯箱效果
• JQuery Panorama Viewer - 全景视图
• Intense Images - 全屏查看图片
• Picturefill - 一个响应式图片 JS 插件
• zoom.js - 一个 jQuery 图片放大插件
• watermarkjs - 一个在浏览器中添加图片水印的 JS 库
• responsive-images.js
• Turntable.js - 轻易实现图像的3D旋转
• ResponsifyJS - 让图像完全响应式而不会牺牲图像的主要部分
• 
  

13.5 图片剪裁/图片处理

• Jcrop - Image Cropping Plugin for jQuery
• croppic - an image cropping jquery plugin
• smartcrop.js - 智能图片裁剪库
• jQuery.eraser - 图像擦除插件
• DD_belatedPNG.js - 让IE6支持透明PNG图片
• FocusPoint.js 实现图片的响应式裁剪
• imgareaselect
• CSSgram - CSS 实现的 Instagram 滤镜库
• antimoderate - 图片模糊库
• 
  

13.6 进度条/加载动画(Loading)

• NProgress.js
• progress.js
• Pace - Automatic page load progress bar
• jquery-ajax-progress
• nanobar - Very lightweight progress bars.
• waitMe - 很漂亮的loading效果
• spin.js
• sonic.js
• fakeLoader.js
• loaders.css - 一个为性能优化的实现加载动画效果的 CSS 框架
• css-loaders
• Sausage - 跟踪滚动条并记录当前阅读所处节点
• 
  

13.7 侧滑插件(offcancas)

• pushy - a responsive off-canvas navigation menu
• Slideout.js - 一个用于移动 Web 应用的触摸滑出式导航菜单
• 
  

13.8 菜单(Menu)

• SuperFish - 基于jQuery的级联下拉菜单
• Responsive Nav - 响应式导航
• 
  

13.9 滚动侦测(ScrollSpy)

• jquery-scrollspy(1)
• jquery-scrollspy(2)
• Waypoints
• ScrollMagic - 像进度条一样使用滚动条
• 
  

13.10 滚动加载更多/下拉刷新(Pull to Refresh)

• jScroll
• web-pull-to-refresh
• pulltorefresh
• RubberBand.js - add pull-to-refresh functionality to any page.
• 
  

13.11 平滑滚动插件(Smooth Scroll)

• jquery-smooth-scroll
• jquery.scrollTo - 平滑滚动到页面指定位置
• smooth-scroll
• scrollUp
• elevator.js - 一个模拟电梯运行“返回顶部”的 JS 插件
• 
  

13.12 全屏滚动/全屏切换

• pagePiling.js - 全屏滚动效果
• fullPage.js
• onepage-scroll
• zepto.fullpage - 专注于移动端的fullPage.js
• screenfull.js - 切换全屏模式
• 
  

13.13 分屏滚动

• multiscroll.js - 分屏滚动效果
• 
  

13.14 转场效果

• Animsition - 页面切换时的过渡效果
• 
  

13.15 固定元素(Sticky)

• sticky - jQuery Plugin for Sticky Objects
• jquery.pin - 固定页面元素
• stickUp
• Slinky.js - 堆叠头部创建滑动导航列表
• 
  

13.16 触控事件

• Hammer.js
• jquery.event.move.js
• 
  

13.17 拖拽组件

• Draggabilly - 专注于拖拽功能的 JS 库
• dragula - 一个让拖放操作变简单的 JS 库
• GridList - 可拖拉的响应式列表库
• 
  

13.18 隐藏或展示页面元素

• Headroom.js - 在不需要页头时将其隐藏
• Readmore.js - 内容显示与隐藏插件
• oriDomi - 像指一样折叠Dom元素
• 
  

13.19 滚动条(Scrollbar)

• jScrollPane
• jquery.scrollbar
• perfect-scrollbar
• nanoScrollerJS
• tinyscrollbar
• 
  

13.20 视差滚动(Parallax Scrolling)

• parallax.js
• jparallax
• skrollr
• 
  

13.21 缩放 (Zooming)

• zoom.js - 一款效果很独特的页面内容缩放插件
• zoom.js - 一个 jQuery 图片放大插件
• jQuery Zoom - mouseover时图片缩放效果

14. 代码高亮插件/代码编辑器

• google-code-prettify
• highlight.js
• Rainbow
• ACE
• CodeMirror
• Crayon Syntax Highlighter
• prism - Lightweight, robust, elegant syntax highlighting.

15. UI Icon 组件

• Font Awesome
• Glyphter: The SVG Font Machine
• Perfect Icons
• iconizr
• Cikonss - 纯CSS实现的响应式Icon
• Simple Icons

16. 动画(Animate)

• animate.css - A cross-browser library of CSS animations.
• Transit - CSS transitions and transformations for jQuery
• anime.js - Javascript 动画引擎
• WOW - 在滚动过程中展示CSS动画效果(默认触发animate.css动画)
• AniJS - A Library to Raise your Web Design without Coding
• Move.js - 简化CSS3动画的JS库
• ScrollMe – 在网页中加入各种滚动动画效果
• Effeckt.css - A Performant Transitions and Animations Library
• NEC动画库
• csshake - CSS classes to move your DOM
• magic - CSS3 Animations with special effects
• SpinKit
• Velocity.js - 加速JavaScript动画
• lenticular.js - 响应倾斜或鼠标事件创建图片动画
• jQuery Interactive 3D - Create a 3D interactive object using images
• AnimateScroll - A Simple jQuery Plugin for Animating Scroll
• Blast.js - 把动画和样式注入到文本中
• Bounce.js - 一个用于制作漂亮 CSS3 关键帧动画的 JS 库
• Sticker.js - create a Sticker Effect
• scrollReveal.js - 元素进入可视区域自动触发设置好的动画
• stroll.js - CSS3 list scroll effects
• jQuery Easing - 动画效果扩展
• animations - CSS3 ANIMATION CHEAT SHEET
• iconate.js：将 icons 增加动画效果的 JS 库
• Odometer - 数字之间的垂直切换
• Hover - 悬停效果
  • Hover.css - 很多鼠标Hover态的效果
  • imagehover.css - 为图片添加悬停效果
  • iHover - 图片悬停效果
  • ImageCaptionHoverAnimation
  • Bootstrap Hover Image Gallery
• Multi-touch gestures library - Web手势库
  • AlloyFinger - 腾讯 AlloyTeam 出品的超级小的 Web 手势库

  
  

17. 本地存储

• cross-storage - Cross domain local storage
• localForage
• pouchdb
• basil.js
• Neurosync - JavaScript 本地离线 ORM 库
• LokiJS - 性能优先的 JavaScript 内存数据库

18. 模板引擎

• mustache.js
• Handlebars.js
• artTemplate
• baiduTemplate
• JSRender
• EJS - JavaScript Templates
• Juicer - A Light Javascript Templete Engine.
• Tempo
• json2html
• Hogan.js - JavaScript templating from Twitter.
• Dust.js - Linkedin维护的项目

19. 通知组件/弹框组件/模态窗口

• Notify.js(Web Notifications API)
• alertify.js
• AlertifyJS
• SweetAlert
• Messenger - 非常酷的弹框组件
• PNotify
• Notify.js - A simple, versatile notification library
• Remodal - 模态窗口插件
• action.js - 极简的tip和Modal弹窗效果
• Modaal - 一个创建弹出窗口的jQuery插件
• Vex - 可以实现3D动效的弹出对话框堆叠效果

20. 提示控件(Tooltips)

• hint.css - 一款非常小巧的提示框效果
• qTip2 - Pretty powerful tooltips
• tooltip - CSS Tooltips
• tooltipster - A jQuery tooltip plugin
• grumble.js - 气泡形状的提示（Tooltip）控件
• Ouibounce - 离站提示控件
• intro.js - 一个创建引导式网站介绍功能的 JS 库
• data-tip.css - 纯 CSS 实现的工具提示

21. 对话框/遮罩层/弹出层(lightbox)

• fancyBox - Fancy jQuery lightbox
• jquery-lightbox - The popular lightbox script, ported to jQuery
• Colorbox - a jQuery lightbox
• artDialog - 经典的网页对话框组件
• DialogEffects
• jQuery blockUI - Page or element overlay
• layer - web弹出窗/层

22. 文档/表格/PDF

• Backgrid.js - 强大的表格组件
• handsontable - 在线可编辑excel表格
• jQuery Bootgrid - 用于ajax生成动态表格
• DataTables - Table plug-in for jQuery
• PDF.js - 一个 JavaScript 编写的 PDF 阅读器
• jsPDF - Generate PDF files in JavaScript
• Recline.js - 灵活操作和展示数据
• Dynatable - 交互式表格插件
• fattable - 创建无限滚动无限行列数的表格
• Clusterize.js - 一个轻松显示大数据集的 JS 插件
• Uniform -表单美化插件

23. 目录树插件

• zTree_v3 - jQuery Tree Plugin
• jstree - jQuery Tree Plugin
• fancytree - Tree plugin for jQuery

24. 前后端交互

24.1 Ajax模块

• fetch - A window.fetch JavaScript polyfill
• reqwest - browser asynchronous http requests
• ajax - Standalone AJAX library
• then-request
• browser-request
• superagent
• minAjax.js
• qwest - 第三方的Ajax库
• 
  

24.2 SSE (Server-Sent Events)

SSE API用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据.

• EventSource
• 
  

24.3 Web Sockets

25. 音频/视频

• jPlayer - HTML5 Audio & Video for jQuery
• video.js - HTML5 & Flash video player
• Accessible HTML5 Video Player - PayPal 开源的 HTML5 视频播放器
• Clappr - 开源的Web视频播放器
• Plyr - A simple HTML5 media player
• FitVids.js - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
• BigVideo.js - The jQuery Plugin for Big Background Video
• BigScreen - A simple library for using the JavaScript Full Screen API
• Vide - 视频背景
• winamp2-js
• Buzz - A Javascript HTML5 Audio library
• MediaElement.js

26. 按钮

• Buttons - A CSS button library
• ButtonComponentMorph
• ProgressButtonStyles
• CreativeButtons
• CSS3 buttons
• jquery.onoff - Interactive, accessible toggle switches for the web.
• Flipside - 一个能过渡到对话框的按钮

27. 富文本编辑器/Markdown编辑器/Markdown解析器

• Simditor - 简单快速的富文本编辑器
• BachEditor - 一个有情怀的编辑器
• TinyMCE
• bootstrap-markdown
• marked - markdown解析器
• Markdown Plus
• Editor.md - 开源在线Markdown编辑器
• stackedit
• Redactor Text Editor
• micromarkdown.js - 轻量级的md解析器
• wangEditor - 支持移动端的轻量级web富文本框
• CKEditor - 可视化 HTML 编辑器

28. 内容提取(Readability)

• Readability
• json.human.js - Json Formatting for Human Beings

29. 颜色(CSS Colors)/SVG/Canvas

• CSS Colours
• SVGeneration
• SVGMagic - 自动的创建PNG来兼容不支持SVG的浏览器
• Adaptive Backgrounds - 从图片抽取主要颜色和应用到父元素
• Seen.js - 渲染3D场景为SVG或者HTML Canvas

30. 选项卡(Tabs)

• Easy Responsive Tabs to Accordion
• Responsive-Tabs
• ion.tabs - jQuery tabs plugin
• jQuery-EasyTabs
• tabulous.js

31. 文本处理

• ZeroClipboard - 文本复制插件
• clipboard.js
• Bigfoot - 点击文章中的脚注弹窗显示
• Annotator - 文本注解插件，可以包括注释、标签、用户等
• Succinct - 用作截断多行文本,后面添加省略号
• Flowtype.js - 自动调整字体大小和行号
• flat-shadow
• FitText - A jQuery plugin for inflating web type
• shine.js - 实现漂亮阴影
• Type Rendering Mix - 文本渲染引擎
• jquery-expander - 阅读更多
• Typed.js - 输入模拟插件
• jQuery.dotdotdot - 多行文本溢出显示省略号

32. 布局(Layout)

• 分隔面板(Split Panel)
  • split-pane
  • jQuery UI Layout

  
  

33. 演示/幻灯片

• reveal.js - The HTML Presentation Framework
• bespoke.js - DIY Presentation Micro-Framework
• impress.js
• shower
• deck.js

34. 国际化(i18n)

• jquery-i18n
• i18next.js
• jsperanto.js
• jed.js
• messageformat.js
• Polyglot.js

35. 邮件模板(Email Templates)

• responsive-html-email-template

36. 移动端优化(Optimizing Mobile Performance)

• FastClick - 处理移动端 click 事件 300 毫秒延迟
• tappy
• jquery-fast-click

37. HTTP请求相关

• pako - HTTP 请求正文压缩
  • 参考阅读: 如何压缩 HTTP 请求正文
  • HTTP 请求正文压缩 DEMO
• RSA in JavaScript - 用RSA加密实现Web数据加密传输

38. 实用工具/其他插件

• jquery-cookie
• InstantClick - 预加载用户可能会点击的一些链接
• Async.js - 异步操作
• html2canvas - 实现纯JS网页截图
• jquery.qrcode.js - 生成二维码的 jQuery 插件
• qrcodejs - JS生成QRCode的库
• nakedpassword - 用脱衣女帮助检测密码强度
• KityMinder - 脑图编辑工具
• MixitUp - 动画过滤和排序
• JQuery Tip Cards - 创建卡片交互的cards布局
• Fallback.js - JavaScript library for dynamically loading CSS and JS files.
• swfobject
• prettyprint.js - An in-browser JavaScript variable dumper
• Shepherd - 为应用创建用户指南
• RulersGuide.js - 类似PhotoShop标尺的js库
• Gremlins.js - Monkey 测试库
• RoughDraft.js - 简单快速的创建交互式的 HTML 模型的原型工具
• favico.js - 动态改变浏览器标签栏中的网站图标

ES6( ECMAScript 2015 )

ES6转码器(ES6 to ES5)

• Babel - 一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行
• babelify - 将babel引入到Gulp, Grunt, npm run等构建过程
• traceur-compiler - Traceur is a JavaScript.next-to-JavaScript-of-today compiler

ES6入门

• ECMAScript 6入门 - 阮一峰老师的开源的JavaScript语言教程
• Learn ES2015
• ES6 - New features Overview & Comparison
• ES6 Overview in 350 Bullet Points

设计模式( JavaScript Patterns )

• javascript-patterns
• jquery-patterns - A variety of jQuery plugin patterns
• Learning JavaScript Design Patterns

在线工具( Online Tools )

• jsbin - Collaborative JavaScript Debugging App
  • jsbin@Github
• jsfiddle
• jsbeautifier - Online JavaScript beautifier
• resume.github.com

前端开发工具

1. 开发工具

• Sublime Text

2. 调试工具

• Fiddler
• Weinre
• Rythem
• csscss - 用于检查css代码冗余
• FECS - 基于 Node.js 的前端代码检查工具
• JSON Server - 模拟 API

3. 浏览器扩展(Chrome Extensions)

• Postman - REST Client
• Fiddler - Fiddler for Chrome Extension
• WEB前端助手(FeHelper)
• Web Developer
• Chrome Logger
• ColorZilla
• ColorPick Eyedropper
• Code Cola
• 1px
• AlloyDesigner - 前端重构开发辅助工具
• Fontface Ninja
• PageSpeed Insights (by Google)
• HTTP Status
• Redirect Path
• Responsive Web Design Tester
• Window Resizer
• CSSViewer
• IE Tab
• Clear Cache
• JSONView
• Image Downloader
• Pretty Beautiful Javascript - 可以自动格式化混淆的js文件
• JavaScript Errors Notifier
• CSS Diff - 在线比对页面上两个元素的CSS样式差异
• WhatFont- 识别网页所使用的字体

前端参考集

• frontend-guidelines - Some HTML, CSS and JS best practices.
• frontend-dev-bookmarks
• Codrops - Useful resources
• Front-end Code Standards & Best Practices
• frontend-dev-bookmarks
• Airbnb 的 JavaScript 编码规范
• awesome-javascript
• Front-end-tutorial - 前端涉及的所有知识体系