前端开发指南

Front-End-Develop-Guide 前端开发指南

创建此项目灵感从SwiftGuide而来，这份指南汇集了前端开发所使用语言的主流学习资源，并以开发者的视角进行整理编排而成。

GitHub： mulgore/Front-End-Develop-Guide ｜欢迎开发者一起维护，或 反馈/投稿 _

由@icepy负责整理

由于个人精力有限，不足之处还望大家多多包容与提供建议。

目录

• Front-End Develop 文档
  • Welcome to Front-End Develop
  • Front-End Develop Language
    • HTML&HTML5 文档
    • CSS&CSS3 文档
      • CSS Style Guide
      • CSS Language
      • Sass Guide
      • PostCss
    • JavaScript 文档
      • JavaScript Style Guide
      • JavaScript Language
  • Front-End Develop Fly
    • 常用库与框架的使用文档
    • JavaScript 日志
    • 开放网络标准
    • HTTP 文档
    • 缓存策略
    • 前端自动化工具
    • React&React Native生态-探索学习
    • 移动前端技术
    • 移动web UI框架
    • 动画
    • 性能调优
  • Front-End Develop 项目与工具
    • 相关工具
    • Front-End Develop 开源项目
  • Front-End Questions
  • Front-End 需要了解的数据结构与算法
• 延伸可扩展的方向
  • Node.js
  • Mongodb
  • WebGL
  • Chrome扩展开发
  • 桌面应用程序开发
  • 移动应用程序开发
  • V8 引擎文献
• 社区
• 码农周刊JavaScript和前端部分优秀文章集合

Front-End Develop 文档

初略读懂Front-End Develop要做些什么

Web Front-End Stack：这张图非常详细。

Welcom to Front-End Develop

W3C组织提供了官网的地址： w3.org ，可以去查询最近实现的标准以及将来可能实现的讨论。

Front-End Develop Language

web前端开发可能包括HTML,CSS,JavaScript,Web API,SVG,WebGL,MathML等，语言是编程的基础，火狐的MDN出了一份比较通略的文档，可以快速查看 Web 技术文档 。

HTML&HTML5 文档

• 无处不在的html ：HTML是Web的核心语言，也是最基础的语言；
• XHTML2 Working Group Home Page
• HTML5 API Search ：可以快速的查询某个HTML5的API；
• HTML5 Rocks ：通过这个网站可以搜索到很多关于HTML5的教程；

书籍：

• 图灵程序设计丛书:HTML5权威指南

CSS&CSS3 文档

CSS Style Guide

• 编码规范 by @mdo ：开发灵活，稳定，可持续 HTML 和 CSS 代码的规范，每一项都有很详细的解释；
• css guide lines
• 通用 CSS 笔记、建议与指导 ：本文档第一部分将探讨语法、格式以及分析 CSS 结构；第二部分将围绕方法论、思维框架以及编写与规划 CSS 的看法；

CSS Language

• 学习CSS布局 ：教授的是现在广泛使用于网站布局领域的CSS基础；
• CSS3 Tutorial 《CSS3 教程》 ：CSS3 Tutorial 是一本关于 CSS3 的开源书，作者利用业余时间写了本书，图文并茂，用大量实例带你一步一步走进 CSS3 的世界；
• Magic of CSS
• CSS词汇表 ：查询CSS的词汇；
• CSS参考

Sass Guide

• Sass基础知识 ：Sass官网，讲述Sass/SCSS应用的基础知识，变量、函数、条件、循环、宏等等；
• Sass中文网 ：中文大，给E文不好的小朋友们；
• Sass Guidelines ：这是由Sass专家 Hugo Giraudel 撰写的一份“编写稳健、可维护和可扩展的Sass”的指南，这份指南已被翻译成中文；
• Sass meister ：在线Sass/SCSS调试器；

PostCss

• Post Css

JavaScript 文档

注明：JavaScript文档将引用 justjavac/free-programming-books-zh_CN#JavaScript 所整理的免费图书以及自己所收集的资料；

JavaScript Style Guide

• Google JavaScript 代码风格指南 ：Google风格指南不但指出每条规范，还解释了为什么这样写的原因，同时给出了对与错的实例；
• Airbnb JavaScript 规范 ：A mostly reasonable approach to JavaScript，跟Google规范类似；
• Google JSON 风格指南：该风格指南是对在Google创建JSON APIs而提供的指导性准则和建议。总体来讲，JSON APIs应遵循JSON.org上的规范。这份风格指南澄清和标准化了特定情况，从而使Google的JSON APIs有一种标准的外观和感觉。这些指南适用于基于RPC和基于REST风格的API的JSON请求和响应；
• Javascript编程指南 ( 源码 )

JavaScript Language

• 重新介绍 JavaScript（JS 教程） ：是火狐推出的一系列的JS教程，为什么会有这一篇“重新介绍”呢？因为 JavaScript 堪称世界上被人误解最深的编程语言。虽然常被视作“玩具语言”，但它看似简洁外衣下，还隐藏着强大的语言特性。 JavaScript 目前广泛应用于一大批知名应用中，对于网页和移动开发者来说，深入理解 JavaScript 就尤有必要；
• JavaScript 标准参考教程（alpha）
• javascript 的 12 个怪癖
• JavaScript 秘密花园
• JavaScript核心概念及实践 ：(PDF) (此书已由人民邮电出版社出版发行，但作者依然免费提供PDF版本，希望开发者们去购买，支持作者)；
• 《JavaScript 模式》：“JavaScript patterns”中译本；
• 命名函数表达式探秘 ：(注:原文由 为之漫笔 翻译，原始地址无法打开，所以此处地址为我博客上的备份)；
• 学用 JavaScript 设计模式 ：(开源中国)
• 深入理解JavaScript系列 ：汤姆大叔2011年翻译的一系列的文章，很值得一读；
• ECMAScript 6 入门 ：(作者：阮一峰)
• JavaScript Promise迷你书 ：讲述Promise实现；
• You-Dont-Know-JS：(深入JavaScript语言核心机制的系列图书)；

Front-End Develop Fly

如果你想飞起来，这正是好去处。

了解常用库与框架的使用文档

• jQuery
  • 简单易懂的JQuery魔法
  • How to write jQuery plugin
• underscore.js
  • Underscore.js中文文档
• backbone.js
  • backbone.js入门教程 (PDF)
  • Backbone.js入门教程第二版
  • Developing Backbone.js Applications(中文版)
• AngularJS
  • AngularJS最佳实践和风格指南
  • AngularJS中译本
  • AngularJS入门教程
  • 构建自己的AngularJS
  • 在Windows环境下用Yeoman构建AngularJS项目
  • 大型应用下的 AngularJS 性能
  • Angular Modules 可以搜索Angular.JS可用的各种插件，模块等等。
  • AngularJS性能优化心得
• Zepto.js
  • Zepto.js 中文文档
• Sea.js
  • Hello Sea.js
• impress.js
  • impress.js的中文教程
• CoffeeScript
  • CoffeeScript Cookbook
  • The Little Book on CoffeeScript中文版
  • CoffeeScript 编码风格指南
• ExtJS
  • Ext4.1.0 中文文档
• Meteor
  • Discover Meteor
• TypeScript
  • TypeScript 指南
  • TypeScript手册翻译系列
• requirejs
  • RequireJS 中文网
• vue.js
  • vue 官方网站

JavaScript 日志

前端代码异常日志与监控

开放网络标准

理解OAuth 2.0

HTTP 文档

下面两篇文章不会对 HTTP 的细节进行深究，而是从够高和更结构化的角度将 HTTP 协议的元素进行分类讲解，可以先阅读 HTTP 协议漫谈 和 图解Http协议 来对HTTP有一个大概的了解。

• HTTP协议
• HTTP/2协议的背景、内容、实现和未来
• HTTP 下午茶
• HTTP接口设计指南
• 白话 HTTPS & SSL/TSL ：你肯定能阅读明白。

深入全面了解，可阅读 HTTP权威指南 。

缓存策略

cache是提高应用性能重要的一个环节，必需要有所了解。

Web缓存机制系列

前端自动化工具

现在的前端自动化工具主要如下三个流派，目测涵盖90%以上经常使用。

• Grunt JavaScript世界的构建工具
• Gulp 用自动化构建工具增强你的工作流
• Webpack

React&React Native生态-探索学习

• React&React Native生态-探索学习

移动前端技术

• 移动端尺寸基础知识
• 移动端高清、多屏适配方案
• 移动端开发小记 - Flexbox

移动web UI框架

• 微信的We UI
• 淘宝的SUI
• 百度的GMU
• 豆瓣的CardKit

动画

• 搞定这些疑难杂症，向css3动画说yes

性能调优

• web移动端性能调优及16ms优化
• 无线性能优化：域名收敛
• 缓存机制浅析 移动端 Web 加载性能优化
• 移动端网络优化－同样适用于HTML5页面
• 移动H5前端性能优化指南
• 权威的前端性能指南

Front-End Develop 项目与工具

工欲善其事，必先利其器。开源项目与工具的使用，将极大的提高前端开发之效率。

相关工具

1. 开发工具

• Sublime Text ：前端开发好用到爆；
• Atom ：Github出品的一个类似Sublime Text编辑器，长的蛮像的，快捷键也非常类似；
• Vundle.vim：使用vim开发前端的利剑，包括其他语言；

Sublime Text常用的插件：

• Emmet：zen coding的升级版，对于前端来说，可是必备插件;
• sublimelint：用于代码的校验，支持 HTML、CSS、JS、PHP、Java、C++ 等16种语言;
• JsFormat ：用于JavaScript格式化;
• jQuery ：jQuery语法提示;
• Underscore ：Underscore语法提示;
• DocBlockr ：快速编写注释;
• SublimeCodeIntel ：智能语法分析提示;
• ColorPicker ：快速选取颜色
• HTML-CSS-JS Prettify ：html/css/js 格式化
• Alignment ：用于代码对齐;
• WakaTime ：用于记录编程时间；
• Seti_UI ：好看的主题，包括文件icon；
• OmniMarkupPreviewer ：将MD文件渲染成网页，可以在浏览器中查看；
• Babel ：ES6语法高亮；

Atom常用的插件：

• TypeScript：支持TypeScript编译；
• run-in-browser ：支持运行网页；
• Emmet ：快速编写HTML；
• minimap ：右侧小地图；
• color-picker ：CSS颜色取色器；
• autoprefixer ：自动补全CSS前缀；
• autocomplete-paths ：对路径选择进行增强；
• autocomplete-python ：对Python提示进行增强；
• docblockr ：编写注释好帮手；
• file-icons ：美化编辑器图标；
• linter-jshint ：JavaScript语法检查；

vim常用的插件：

Bundle 'christoomey/vim-run-interactive' Bundle 'Valloric/YouCompleteMe' Bundle 'croaky/vim-colors-github' Bundle 'danro/rename.vim' Bundle 'majutsushi/tagbar' Bundle 'kien/ctrlp.vim' Bundle 'pbrisbin/vim-mkdir' Bundle 'scrooloose/syntastic' Bundle 'slim-template/vim-slim' Bundle 'thoughtbot/vim-rspec' Bundle 'tpope/vim-bundler' Bundle 'tpope/vim-endwise' Bundle 'tpope/vim-fugitive' Bundle 'tpope/vim-rails' Bundle 'tpope/vim-surround' Bundle 'vim-scripts/ctags.vim' Bundle 'vim-scripts/tComment' Bundle "mattn/emmet-vim" Bundle "scrooloose/nerdtree" Bundle "Lokaltog/vim-powerline" Bundle "godlygeek/tabular" Bundle "msanders/snipmate.vim" Bundle "jelera/vim-javascript-syntax" Bundle "altercation/vim-colors-solarized" Bundle "othree/html5.vim" Bundle "xsbeats/vim-blade" Bundle "Raimondi/delimitMate" Bundle "groenewege/vim-less" Bundle "evanmiller/nginx-vim-syntax" Bundle "Lokaltog/vim-easymotion" Bundle "tomasr/molokai" Bundle "klen/python-mode" Bundle "leafgarland/typescript-vim" Bundle "scrooloose/nerdcommenter" 

• HTML5 Please ：HTML5与CSS3技术评估
• Mobile HTML5 ：HTML5兼容性速查表
• HTML5 Cross Browser Polyfills

2. 源代码管理工具

• Github：声望日盛-全球最大的“同性”网站；
• Github For Mac：设计的非常美观的git管理客户端，它能取代命令行所获得的功能；
• Gitcafe ：国内的Github，相比之下拥有速度优势；
• Git@OSC ：也是类似的项目，在国内，可以免费建立1000+私有项目；

3. Mac工具

关于Mac平台的使用，推荐大家阅读 入门精选

• HomeBrew ：OS X上非常优秀的包管理工具；
• HomeBrew-Cask ：简洁优雅的Mac OS X软件安装体验；
• iTerm 2 ：OS X上一个增强版的shell终端；
• oh-my-zsh ：OS X上用来增强shell命令行的工具；
• Dash ：Dash is an API Documentation Browser and Code Snippet Manager. Dash stores snippets of code and instantly searches offline documentation sets for 150+ APIs (for a full list, see below). You can even generate your own docsets or request docsets to be included；
• tmux ：终端复用神器，帮助在Mac或者Linux上做开发的程序员在使用终端时更加得心应手；
• MacVim：Mac下GUI vim编辑器；
• Xcode ：也许你用不上，安装Xcode主要是为了Xcode command line tools工具包，你也可以选择不安装Xcode，使用xcode-select --install跳过Xcode的安装；
• Postman Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件。

4. VPN

• 云梯VPN

5. ES6编译

• babel

6. gulp工具

• gulp-clean ：用于清理;
• gulp-notify ：用于打印消息文本;
• gulp-rename ：用于修改名字;
• gulp-concat ：用于合并文件;
• gulp-zip ：用于生成一个zip压缩包;
• gulp-minify-css ：用于压缩css;
• gulp-autoprefixer ：用于给css添加前缀;
• gulp-imagemin ：用于给图片进行优化;
• gulp-uglify ：用于压缩js;
• amd-optimize ：用于AMD模块引用编译；
• gulp-import-css ：如果css文件是通过import导入的可以使用此插件进行合并优化;
• gulp-rev-replace ：用于替换;
• gulp-useref ：引入使用build标记，进行替换;
• gulp-rev ：生成md5文件名;
• gulp-filter ：对文件进行过滤;
• gulp-header ：压缩之后将注释写入到文件的头部
• gulp-if ：进行逻辑判断
• gulp-size ：获取文件大小
• gulp-less ：编译less文件
• gulp-sass ：编译sass文件
• gulp-file-include ：对文件进行引入
• gulp-sourcemaps ：生成map文件
• gulp-livereload ：自动刷新

7.webpack

• raw-loader ：将文件require进来；
• url-loader ：可以将图片require进来；
• css-loader ：require css文件；
• eslint-loader ：语法检查；
• less-loader ：less loader；
• extract text plugin for webpack ：CSS文件提取；

8.服务

• Travis-CI
• Coveralls
• Slack
• js bin
• zenHub
• trello

Front-End Develop 开源项目

想查看优秀的开源项目，可以访问 《Front-End Develop 项目精选》 。

1. 有趣味的开源项目

• Web Developer技能树：类似《魔兽世界》中的天赋树；
• octotree：浏览器扩展(Chrome,Firefox,Safari和Opera)显示GitHub树格式的代码；
• passport-bnet：暴雪提供的Nodejs版SDK
• hexo：编写博客使用的工具
• traceur-compiler：可以运行未来的JavaScript的JavaScript；
• EpicEditor：可以嵌入网页的Markdown编辑器；
• gitbook：用于生成在线书籍的工具；
• kityminder：作为一款在线的脑图编辑工具，它有着不亚于 native 脑图工具的交互体验；
• api-wow-docs：暴雪提供的魔兽世界API文

其他工具： http://123.jser.us/

Front-End Questions

• Front-end-Developer-Interview-Questions ：面试题集合；
• 中文前端开发面试题 中文前端开发面试题
• Mars - mobile needs a hero ：腾讯出品的移动端实践；
• mobileTech：收集了移动端出现的问题以及解决思路与技巧；
• 移动web资源整理 ：移动web资源整理；

Front-End 需要了解的数据结构与算法

• 数据结构与算法（JS 版） (@进击的Luke)
• What are the 10 algorithms one must know in order to solve most algorithm problems
• 基础算法
• 那些少人所知而又有用的数据结构（StackOverflow）
• 高级数据结构大全

延伸可扩展的方向（全栈）

延伸可扩展的方向是指，脱离了浏览器环境的编程。

关于编译，强烈建议阅读 工程中的编译原理--Jison入门篇

如果你想发展为全栈，强烈建议阅读 Growth: 全栈增长工程师指南

Node.js

入门

• Node入门
• 七天学会NodeJS
• Nodejs Wiki Book
• Node.js 包教不包会

文档

• nodejs中文文档
• express.js 中文文档
• koa 中文文档
• express框架

阅读

• 使用 Express + MongoDB 搭建多人博客
• Learn You The Node.js For Much Win! (中文版)
• Node debug 三法三例
• 深入浅出Nodejs读书笔记
• NodeJS的代码调试和性能调优
• 在 Node.js 应用中集成 Redis
• Node.js 应用程序的 5 条性能建议
• 国内Nodejs 2015汇总

Mongodb

• the-little-mongodb-book-cn

Chrome扩展开发

• Chrome扩展及应用开发

桌面应用程序开发

• 使用node-webkit构建桌面应用程序（一）
• 使用node-webkit构建桌面应用程序（二）
• youdao出品的HEX
• electron

移动应用程序开发

• ionic中文指南
• React Native 中文版

WebGL

• WebGL 中文版

v8 引擎文献

可以先通过阅读 V8引擎简介 来了解JavaScript现在最好的引擎是怎样的，然后访问 Chrome V8 来获取最新的资料，API文档可以访问 v8-docs 。

• V8 Javascript 引擎设计理念
• JavaScript引擎的性能优化
• V8引擎中的hidden class
• JavaScript V8 性能小贴士

社区

访问：社区列表

码农周刊JavaScript和前端部分优秀文章集合

访问： 码农周刊JavaScript和前端部分优秀文章集合