# 前言

对前端学习路线的总结，对自己已掌握技术以及后面应该学习的技术的参考。

# 前端入门

# HTML

[x] 掌握基本元素 [x] HTML 语义化 [x] 行内元素与块级元素的区别 [x] HTML 新增元素 [x] 媒体元素等，需要时查找下即可

# CSS

• [x] 基础用法，熟记各种属性
• [x] CSS3 各种属性用法
• [x] *FC，主要是 BFC。以及层叠上下文等了解内部机制
• [x] 各种布局方法以及常用小技巧
• [x] 预处理器，Sass、Less、Stylus 等
• [x] 动画效果
  • transition
  • @keyframe
• [x] 编码规范以及性能优化

# JavaScript

• [x] DOM 熟记各种操作、属性
• [x] BOM
• [x] ES
  • 基本语法、数据类型、运算符等
  • 内置对象：Array、Object、Date、JSON、String、Number...，熟记常用的方法
  • 函数
• [x] JS 事件
  • 熟悉两种绑定方式以及各种事件
  • 事件对象
  • 事件委托
  • 实现基本交互和特效

# 前端进阶

# JS 进阶

• [x] 作用域和闭包
• [x] this 指向和原型链
• [x] 正则表达式
• [x] Ajax
  • 跨域，jsonp、CORS、
• [x] 理解异步编程
  • 任务队列
• [x] 面向对象编程
  • 封装、继承、多态
  • 属性读写权限、设置器、访问器
  • 工厂模式
  • 单例模式
  • 构造函数模式
  • 组合构造函数和原型模式
• [x] 模块化
  • 模块化思想
  • AMD、CMD、CommonJS
  • RequireJS
  • ES6 Module
• [x] jQuery 的学习
  • 封装方法和插件的思想
  • 简单封装自己的 DOM 操作库
• [x] ES6+
  • let/const
  • 解构、剩余、Iterator
  • Set、Map、Symbol
  • 内置对象的拓展
  • 箭头函数
  • Promise
  • Generator、async、await
  • Class、Extends super
  • Proxy、reflect
  • Module

# 移动端适配

• [x] 响应式布局
  • viewport、像素比等概念
  • 流式布局 和 rem 布局
  • 弹性盒子
  • 响应式图片
  • media query
• [x] Bootstrap
  • 理解其栅格系统
  • 理解其类的定义和使用
• [x] 移动端事件
  • touch
  • gesture
  • scroll

# 工程化

• [x] Git
  • 常用命令：add/commit、push/pull
  • 分支：创建、切换、合并
  • 其他操作，需要时百度或者收藏一些
• [x] GitHub、GitLab 等远程仓库
• [x] Gulp
• [x] Webpack
• [x] rollup
• [x] Linux 命令
• [x] npm、yarn

# 框架

• [x] 了解 MVC、MVP、MVVM 原理

• [x] 组件化思想

• [ ] Backbone.js

  • 限于了解 MVC

• [x] React

  • [x] 高阶组件
  • [x] React-Router
  • [x] Redux
  • [x] Ant Design
  • [ ] 中间件
  • [ ] SSR

• [x] Vue

  • [x] Vue-Router
  • [x] Vuex
  • [ ] iView、element-UI、Mint-UI
  • [ ] SSR

# 性能优化

• [x] CSS 重构
  • 选择器的使用及嵌套层级
  • 去掉无用代码、工具压缩
• [ ] JavaScript 性能优化
  • [x] DOM 的回流和重绘
  • [x] 精简代码、工具压缩
  • [ ] 高性能的 JavaScript
• [ ] 框架的性能优化
• [ ] 服务器端渲染：SSR

# JS 高阶

• [ ] 设计模式
  • [x] 单例模式
  • [x] 工厂模式
  • [ ] 策略模式
  • [x] 观察者模式
  • [ ] 模板方法模式
  • [ ] 代理模式
  • [ ] 装饰者模式
  • [ ] 适配器模式
• [ ] 函数式编程
• [x] 数据结构和算法
  • [x] 堆栈、队列
  • [x] 集合
  • [x] 二叉树
  • [x] 图
  • [x] 排序算法
  • [x] 查找算法
  • [x] 动态规划
  • [x] 贪心算法
• [x] TypeScript
  • 类型系统
  • 接口
  • 模块和命名空间

# 全栈之路

# 后台语言

• [ ] NodeJS
  • 核心概念
  • 核心模块
  • 处理请求
  • 中间件转发
• [ ] Express/Koa 框架

# 数据库

• [ ] MongoDB
• [ ] MySql
• [ ] GraphQL

# 部署

• [ ] ngnix
• [ ] pm2

# 数据可视化之路

# SVG

• [x] SVG 元素和属性
• [x] d3 之 SVG

# Canvas

• [x] 原生 Canvas
• [ ] d3 之 Canvas
• [ ] Canvas 3d：WebGL
• [ ] three.js：WebGL 封装库

# 数据可视化库

• [ ] d3
• [ ] G2/G6/F2
• [ ] three.js
• [ ] ECharts
• [ ] HighCharts

# 原生 APP 之路

• [ ] H5
• [ ] 小程序
• [ ] ReactNative
• [ ] Cordova
• [ ] Ionic