2017-Web 进阶路线图
2017 Web 进阶路线图
前言
本书囊括了笔者五年来在前端工程领域的实践总结，笔者希望对于不同等级的开发者都能有所收获。本书最核心的目标
- 希望对于没有经验的开发者能够在本书选定的最短路径上快速成为一名合格的现代前端开发者。每一小节都会讲解最基础的语法或者使用要点，但是不会长篇大论地介绍语法细节这些应该查看文档的内容。通过简单的示例快速上手之后，笔者会介绍很多工程当中的具体实践。可能刚入门的开发者并不能理解这些实践的意义或者价值，但是首先保证能用，而后在自己的实践中慢慢回味，逐渐明了。
- 而对于有一定前端开发经验的开发者，本书能够帮你梳理现代纷繁复杂的前端开发状况，探寻百花齐放的工具库背后蕴藏的设计理念与编程范式，最终融会贯通，形成自己的前端工程化思想与体系。
本书最大的优势在于形成了完整的知识体系结构，让你合理归纳自己学到的知识，将知识放在它该在的地方。另外笔者想强调的是，无论
序
第一部分 初窥门径，看山是山
Hyper Text Markup Language，10 页
HTML 语法基础，5 页
HTML
- 介绍基本的
div 、p、a、script ( asyhc 属性) - 介绍
meta 属性doctype viewport - 介绍
HTML 方面的优化小知识 - HTML5 Boilerplate
H5，3 页
- 介绍
HTML5 规范，讲明H5 到底是什么 - 介绍
H5 实现的典型事件，譬如地理位置、触感等等 - 基本的基于
H5 的小Demo
Semantic HTML，2 页
- 介绍语义化
HTML 布局
CSS,20 页
CSS 语法基础，3 页
- 介绍
CSS 基础选择器，包含选择器优先级 CSS 引入方式- 介绍
BEM 命名法
CSS 元素样式，5 页
- 介绍基本的尺寸设置，介绍尺寸单位，还有
width 、height/line-heght ( 垂直居中) 等属性 - 介绍基本的文本属性，包括字体大小、文本省略、文本换行等
- 介绍基本的背景属性
CSS 元素定位：盒模型与文档流，3 页
- 介绍盒模型，包括内边距，边框，外边距，连写情况下顺序
( 上下 左右；上右下左) ，以及边距合并，百分比值效果 - 介绍文档流，，介绍基本定位方法，提及
float - 介绍所谓的七种居中方法
Flexbox 与网格系统，3 页
- 介绍
CSS 网格系统的理念与传统做法 - 介绍
Flexbox 基础语法 - 介绍
Flexbox 的Polyfill - 介绍
Flexbox 的使用示范
SCSS，2 页
SCSS 语法基础与基本用法，建议使用node-sass 编译SCSS 文件组织与命名规范(BEM-SCSS ) - 常用的
SCSS 辅助库，home.scss，等Todo
CSS 工程实践，4 页
CSS 样式指南，1 页- CSS Linting，
1 页 CSS 目录结构，1 页- CSS reset，
1 页
JavaScript，25.5 页
JavaScript 语法基础，9 页
JavaScript 和ECMScript 的演化过程，1 页JavaScript 基本变量定义、声明( 变量提升) ，2 页node 环境搭建(npm ，cnpm,nvm 的基本使用，babel-node 的安装),2 页es6 模块系统( 简单命令行例子，babel-node 运行) ，1 页- 介绍变量赋值方法，解构赋值，
1 页 - 常见类型列表和类型转换，
2 页JavaScript 数据结构，4.5 页 - 数组类型，
1.5 页 - 字符串类型，
1.5 页 - 时间与日期类型，
1.5 页
JavaScript 控制流，3 页
- 循环，
2 页 - 异常处理，
1 页JavaScript 函数，6 页 - 函数定义，
1 页 - 函数参数，
1 页 - 函数调用，
2 页 - 词法作用域与闭包，
2 页JavaScript 类与对象，6 页 - class，属性定义
( 语法糖) ，1 页 - 方法，构造器
( 单例模式) ，原型，快速ORM ，3 页 - 类继承，
2 页DOM，
16.5 页元素选择与操作，
4.5 页 DOM 选择器，选择器polyfill ，1.5 页- 属性的判断和获取，
1.5 页 - 常见元素操作
( 元素创建、插入) ，1.5 页事件响应，
4 页 event 对象与事件绑定及参数传递，2 页- 事件分发传递、常用事件列表，
2 页Ajax，
4 页 XHR 对象，1 页- fetch，
1 页 - cors，
2 页客户端存储，
4 页 - Cookie，
1 页 - localstorage，session storage，
2 页 - websql，indexdb，
1 页常用的前端工具库，
9 页jQuery，
5 页jQuery 基础，2 页 jQuery 选择器，0.5 页jQuery 元素操作，0.5 页jQuery 事件绑定，0.5 页jQuery 动画，0.5 页
jQuery Plugins，2 页
本章节介绍部分优秀的
fullPage.js，1 页LightBox，1 页你并不需要
jQuery ，1 页Lodash/Underscore，
2 页Lodash/Underscore 基础，1 页你并不需要
Lodash/Underscore ，1 页Pattern Library，
2 页jQuery UI，
1 页BootStrap，
1 页React 初探数据流驱动的页面，
2 页- 本部分主要介绍
React 设计思想，从命令式编程到声明式编程的变化，及以jQuery 与React 实现相同功能的例子对比。搭建你的脚手架，
7.5 页create-react-app，
2.5 页 - 引导建立
hello-world app ，2 页 - 介绍
yarn ，0.5 页webpack 入门，5 页 JavaScript 模块化发展历程与webpack 介绍，1 页webpack 的hello-world 应用引导，1.5 页- 基于
webpack 的react 最简应用搭建，2.5 页 - 列举一些
boilerplate 及评价，0.5 页React 组件，16 页JSX，
3 页 JSX 基础与转化，1 页- 语法，
2 页组件基本介绍，
4 页 - 组件声明，说明
createClass 与继承的关系，2 页 - state，
1 页 - props，
1 页 - context，
1 页组件生命周期，
3 页 - 正常生命周期，
2 页 - 无状态组件生命周期，
1 页组件样式，
4 页 - 行内样式设定，
1 页 CSS 样式, 类名与模块化，2 页- 基于
context 的主题传递，1 页组件中
DOM 处理，2 页 - findDOMNode,0.5
refs 与jQuery 的封装使用,1.5 页React 事件交互React 事件绑定与处理
React 合成事件
React 事件列表
React Router
路由配置
路由控制
React 技术栈
MobX
MobX 设计思想
Observable
Redux
Redux 设计思想
简单的Redux 实例
简单的MobX 实例
第二部分 登堂入室，看山不是山
第五章 深入JavaScript 工程实践
JavaScript 静态类型
JavaScript 函数式编程
JavaScript 异步编程
Promise
Generator
Async/Await
JavaScript 面向对象
琢磨不透的this
原型链与继承
JavaScript 类的几种实现方式
JavaScript 数据绑定
脏检测
ES6 Proxy
JavaScript 性能优化与样式规范
变量
数据类型
函数
React 工程实践
React 设计模式与样式指南
High-Order Component
Stateless Functional Component
Pretty Component
React 优化
包体优化
React 动画
CSS 动画
JavaScript 动画
React Transition
基于React 的Pattern Library
Material UI
antd
第五章 深入React 内部原理
简单的Virtual DOM 实现
React Diff 算法
React setState
React Fiber
Virtual DOM Alternatives
前端状态管理
Redux 的得与失
渐进的前端状态管理
常见的状态管理模式
合理的状态设置
前端测试
单元测试
组件测试
自动化测试
前端性能优化
浏览器渲染原理
前端性能评测
资源加载
首页与关键路径
渲染策略
NodeJS
NodeJS 初窥
常用NodeJS 框架
Express
Koa
服务端渲染
跨平台开发利器Electron
移动开发
Mobile First
本部分介绍移动开发的常见注意点，包括响应式尺寸、响应式布局、移动开发中存在的点击问题等。
React Native
介绍
微信小程序
介绍微信小程序的基本用法，能够基于微信小程序开发简单的
第三部分 融会贯通，看山还是山
GUI 应用程序架构变迁
MVC
MVP&MVVM
Flux Unidirectional Data Flow
REST 表现层状态转化
Hyper Text Transport Protocol
HTTP 协议基础
HTTP 请求与响应
HTTP 缓存
HTTPS 与HTTP/2
RESTful API
RESTful API 最佳实践
REST 的不足与GraphQL
前端工程化
前后端分离与全栈
合理的使用工具
渐进式的工程架构
微服务与微前端
模块化
介绍常见的模块化形式：CommonJS、AMDJS、
组件化
介绍