前端组件库 - 搭建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 - 前端涉及的所有知识体系

转载于:https://www.cnblogs.com/Im-Victor/p/9237254.html

你可能感兴趣的:(前端,ui,json,ViewUI)