到底还要学什么才能成为2020年前端架构师！？

整理参考自某培训机构，内容很全面，作为学习方向指导很不错，建议大家收藏，可以通过以下知道自己该学什么，该掌握什么。
希望大家可以一起进步一起加油！

由于内容较长，大家可以先看思维导图再详细阅读 点击这里

01Vue.js全家桶

源码篇

• MVVM响应式原理
• 手写实现Vue3.0响应式原理
• 手写实现Vue-router
• 手写实现vuex中的state、getter、commit、 dispatch、 action/mutation、模块化
• Vue源码分析，包括响应式原理、虚拟DOM、DOMDIFF、 模板编译和代码生成

封装自己的Vue组件库

• 什么是组件和组件的应用
• 组件的属性和校验
• 组件之间的通信
• EventBus应用
• 组件slot用法
• 从零封装树形组件
• 从零封装日历组件
• 从零封装表单组件
• 从零封装模态窗口组件
• 从零封装轮播图组件
• 从零封装表格组件
• 从零封装上拉加载和下拉刷新组件
• 从零封装异步加载的省市级联组件
• 基于element-ui/iview 二次封装
• 组件的单元测试和集成测试

路由篇(权限控制)

• vue router的基础应用
• 编程式导航
• 路由的嵌套
• 路由重定向
• 路由守卫
• 路由懒加载
• 路由元信息
• 实现动态权限
• 菜单、按钮及权限认证、登录权限

Vue SSR服务器端渲染

• SSR原理和设计理念
• 集成KOA实现服务器端渲染
• webpack构建Vue SSR项目
• 集成路由及代码分割
• 集成VueSSR和Vuex实现数据同步

VueSSR服务器端渲染

• 路由懒加载
• 页面预渲染
• SSR之Nuxt实战
• Vue骨架屏
• Vue-devtools开发插件
• Vue动画原理

Vue全家桶项目

• Vue cli3.0项目搭建
• 服务器构建koa2+mongodb
• CubeU|组件实战
• 路由配置和动画
• 数据获取和axios应用拦截器
• 如何Mock后台数据
• 基于JWT的注册登录权限管理
• 公共组件封装
• 上拉刷新、下拉加载、 图片懒加载
• 使用vuex
• 项目布署和上线

02Node.JS

Node.js核心模块

• EventL oop和事件队列
• process全局对象
• events事件处理模块
• commonjs原理解析
• 深入字符编码
• Buffer对象
• fs文件模块
• 压缩与解压缩
• 加密和签名算法
• stream流的原理和应用
• 多进程与集群
• tcp和http服务
• cookie和session原理
• 多语言、防盗链、正向和反向代理服务器

Node框架

• express路由配置
• express处理参数
• express使用中间件
• express模板引擎
• express静态文件服务器
• express重定向
• cookie和session原理
• 1比1手写express框架
• 1比1手写koa2框架
• JWT权限认证原理

webpack 工程化

• webpack4实战entry、 output、 loaders. plugins、 文件指纹
• webpack4优化(dll、resolve、 模块热替换、压缩、代码分割、
  可视化工具)
• Webpack4源码分析,懒加载原理、热更新原理
• 编写自定义Loader(style- loader css-loader less-loader等)
• 编写自定义Plugin(html-webpack -plugin)
• 编写Babel treeshaking插件
• Webpack的事件机制tapable和AST抽象语法树
• 手写自己的Webpack4

03React全家桶

手写React15源码

• 实现虚拟DOM
• 实现类组件、函数组件和原生组件的渲染
• 实现setState
• 实现DOM-DIFF
• 实现DOM更新
• 实现合成事件和事务机制

React16.8源码

• 虚拟DOM
• Fiber架构算法和数据结构
• Hooks的原理和实现

优化篇

• JSX原理和虚拟DOM原理
• setState异步原理实现
• React中的事务实现
• 使用Immutablejs和PureComponent
• React中 的高阶组件和render props
• ErrorBoundary、Suspense和Fragment
• 实现React骨架屏webpack插件
• React中的图片和组件懒加载
• React中的长列表优化，只渲染可视区域DOM
• Jest+Enzyme实现React单元测试

路由篇

• 路由配置和二级路由
• 路由懒加载
• 路由重定向
• 路由之权限管理和受保护的路由
• 手写1个完整的React-router4路由库
  • HashRouter和BrowserRouter
  • Route
  • Switch
  • Link和NavLink
  • Prompt
  • Redirect

Redux篇

• Redux核心用法Action/Reducer/Store
• 手写实现Redux、react- redux、connected react- router
• 手写Redux、react-redux、 redux-logger、 redux-promise、
  redux- thunk、redux- saga、redux- actions、reselect、 re
  dux- persist等经典redux中间件类库

React服务器端渲染SSR

• 客户端渲染VS服务端渲染
• React中的服务端渲染
• 同构的原理和意义
• SSR中使用路由
• SSR中使用Redux
• SEO优化
• 预渲染
• Koa2+Next.js服务器端渲染实战

mobx篇

• mobx实战 observable、computed、 autorun、 when、 reaction
• 手写一个mobx类库

React组件库开发。

• 从零实现Antdesign表单组件
• 从零实现Antdesign拖拽上传组件
• 从零实现Antdesign树型组件
• 从零实现轮播图组件

React工程化实践

• nunjucks模版引擎、yaml配置与法I mock.js模拟数据
• 可配置的create-react- appI具roadhog,手写实现roadhog
• umi配置静态和动态路由、权限和动画、UMI实现原理，手写实
  现UMI
• dva创建应用、集成AntDesign、 定义路由和UI组件、链接仓库、使用effects和reducers
• 手写实现dva和核心库redux- saga
• 使用Button、Modal、 Loading、 Notifhcation、 Message、 List、Carousel等AntDesign组件

专题

V8内存管理

• JavaScript中的垃圾收集
• JavaScript中的内存管理
• V8垃圾回收机制分类
• 引用计数、标记清除、标记整理和增量标记

Typescript

• 开发环境
• TypeScript安装和编译
• 数据类型
• 函数
• 类
• 接口
• 泛型
• 结构类型系统
• 类型变换
• 模块VS命名空间
• 类型声明
• 声明文件
• Typescript+React集成开发
• Typescript工程化

PWA

• manifest.json配置
• service worker生命周期
• fetch
• 请求拦截
• cache api以及缓存策略
• Notification
• API
• workbox应用
• Vue中应用PWA

微前端原理与实战。

• 微前端背景
• 微前端工程化
• 同时支持angular、vue、react的微前端框架实战
• 从零编写一个微前端框架
  • 初始化工程
  • app相关概念
  • 路由拦截
  • 执行流程(核心)
  • location事件

GraphQL

• GraphQL概念
• 使用GraphQL查询和变更数据
• 后端搭建GraphQL服务器
• ReactHooks和GraphQL项目实战

GraphQL+Nest.js微服务开发

• Nest.js模块定义
• Nest实现后端微服务
• TypeScript+Nest.js项目构建
• GraphQL的服务器搭建与查询操作

flutter

• dart语法
• flutter环境配置
• 常用组件
• 布局
• 导航和动画
• flutter项目实战

uni-app

• 调试
• 使用hbuilder
• flex布局
• 多端发布
• 路由和动画
• 微信分享
• uni- app项目实战

ReactNative

• UIExplorer项目
• css盒子模型和样式
• css元素浮动
• flexbox布局
• ReactNative长度单位
• RN事件
• React动画原理
• 实现一个Navigator
• App架构之目录结构、路由和组件
• App架构之网络和Container
• App架构之命名空间
• ReactNative第三方插件
• 项目实战

阿里企业级开发框架egg.js

• 项目架构
• 配置路由
• 静态文件中间件
• 模版引擎
• 远程接口服务
• 计划任务
• 集成MYSQL
• Restful接口
• Sequelize持久化工具
• 国际化
• 扩展工具方法
• 中间件
• 运行环境
• 单元测试
• 服务器部署和运维
• 手写自己的Egg.js框架，包括 egg-core、egg-init、 egg-cluster
• 定义插件和框架,手写egg-sock-et.插件

网络安全

• Web漏洞的分析与防御
• CSRF(跨站请求伪造)
• XSS(跨站脚本攻击)

前端性能优化

• webpack优化方案
• 浏览器缓存原理和最佳设置策略
• CDN缓存优化
• EventLoop异步更新
• 避免回流和重绘
• 节流与防抖
• 通过Performance监控性能

计算机网络

• OSI七层模型
• TCP/IP参考模型
• 物理层
• 数据链路层
  • 以太网
  • 总线型拓扑
  • 冲突检测
  • MAC地址
  • 以太网帧
  • ARP协议
• 互联网层(网络层)
  • IP协议
  • 选址
  • 子网掩码和子网划分
• 传输层
  • TCP数据包
  • TCP序列号
  • 滑动窗口的拥塞检测
  • 三次握手和四次挥手
  • UDP协议
  • DNS协议
• 应用层
  • HTTP协议
  • HTTTPS协议

Linux

• Linux与Windows的不同
• Linux安装和虚拟机的使用
• 桥接、NAT、Host- Only等网络连接
• 快照、克隆、挂载点和分区
• Linux常用命令 VI编辑器、用户与权限管理、服务管理、软件管
  理、网络管理、系统命令
• Shell实战监控服务和主机网络状态

Nginx

• nginx的安装和使用
• 模块和基本配置
• 正向反向代理等应用场景
• CDN
• 浏览器缓存
• 跨域
• 防盗链
• rewrite
• 负载均衡集群

Docker

• 虚拟机
• Linux容器
• Docker核心概念
• Docker架构
• Docker镜像
• Docker容器
• Dockerfle
• Docker数据盘
• 网络配置
• docker- compose

CI/CD持续集成

• jenkins job
• shell集成
• 集成nginx和git
• 持续集成和部署
• travis gitlab ci

Mongodb

• Mongodb安装和使用
• Mongodb的系统架构
• Mongodb高级查询
• Mongodb索引
• Mongodb安全与权限
• mongoose模块之Schema
• mongoose模块之Model

Mysql

• MYSQL安装与使用
• MYSQL系统架构
• 数据处理之增删改查
• 数据类型和约束分页
• 索引和慢查询性能分析
• 数据库安全之防止SQL注入
• 数据库设计ER图设计
• 数据库事务和锁|
• 数据库设计之三大范式
• 分组和聚合函数
• 基于角色的权限访问控制(Role- Based Access Control)

Redis

• 5种数据结构及使用场景
• API的理解和使用
• Redis客户端
• 发布订阅
• 事务
• 备份和恢复

01设计模式

UML模型图

• 用例图
• 类图和对象图
  • 依赖关系(Dependence)
  • 泛化关系(Generalization)
  • 实现关系(lmplementation)
  • 关联关系
  • 聚合关系
  • 组合关系
• 活动图
• 时序图
• 协作图
• 组件图
• 部署图

面向对象

• 什么是面向对象
• 封装、继承和多态
• 面向对象和面向过程

设计原则

• 开放封闭原则
• 单一职责原则
• 里氏替换原则
• 依赖倒置原则
• 接口隔离原则
• 迪米特法则
• 合成复用原则

创建型模式

• 建造者模式(Builder)
• 原型模式(Prototype)
• 单例模式(Singleton)
• 抽象工厂模式(Abstract Factory)
• 工厂方法模式(Factory Method)

结构型模式

• 适配器模式(Adapter)
• 桥接模式(Bridge)
• 组合模式(Composite)
• 装饰模式(Decorator)
• 外观模式(Facade)
• 享元模式(Flyweight)
• 代理模式(Proxy)

行为型模式

• 命令模式(Command)
• 解释器模式(nterpreter)
• 迭代器模式(lterator)
• 中介者模式(Mediator)
• 备忘录模式(Memento)
• 观察者模式(Observer)
• 职责链模式(Chain of Responsibility)
• 状态模式(State)
• 策略模式(Strategy)
• 模板方法模式(Template Method)
• 访问者模式(Visitor)

02前端数据结构和算法

算法的基础知识

• 输入、输出和数量级I计算能力的变革
• CPU、寄存器和内存1二分查找I插入排序I冒泡排序

算法的衡量和优化

• 时间复杂度和空间复杂度|复杂度的本质
• 合并排序|递归函数复杂度分析
• 递归表达式分析法|递归数学归纳法分析
• 主定理

排序算法

• 排序算法介绍
• 基于比较的排序算法
• 合并排序优化
• 快速排序
• 快速排序复杂度和优化
• 计数排序
• 基数排序
• 桶排序
• 外部排序

递归

• 递归的基本概念
• 递归图形的绘制
• 递归和穷举问题
• 组合问题
• 递归空间优化
• 回溯算法
• 重复子问题优化
• 尾递归
• 搜索问题(8皇后)
• 深度优先搜索和广度优先搜索

数据结构

• 数组
• 双向链表
• 反转单向链表
• 堆
• 栈
• 队列

进阶算法

• 动态规划的概念
• LCS问题的子结构
• 填表法
• 构造结果

BAT面试真题

• 反转二叉树
• 解析Query字符串
• 取N个数字为M
• 火车排序问题和队列
• 网格走法动态规划
• 两个栈实现一个队列

实战项目

express +mongoose博客

初始化项目和依赖的模块
跑通路由
使用bootstrap渲染模板
实现用户注册的功能
实现用户的登录功能
新增发表文章
增加登录状态判断中间件
成功和失败时的消息提示
实现上传头像并在导航的右上角显
示个人信息
实现会话功能并控制菜单显示
首页显示文章列表
删除文章
更新文章
实现搜索功能
实现分页的功能

Typescript + React+ Redux课堂

webpack环境搭建
底部页签导航
React动画
Redux改变课程分类
实现头部轮播图
课程列表列表
长列表优化(只渲染可视区域)
下拉刷新(节流)
上拉加载(防抖)
记录滚动条位置
课程详情
用户注册和登录
受保护的个人中心

Egg.js+AntDesignPro +MySQL开发企业级管理系统

用户注册和登录
JWT权限认证
用户头像上传
用户手机号注册与登录
页面和按钮菜单权限
用户列表管理
为角色分配权限
为角色分配用户
egg.js+mysq|实现后端接口

React+Mongodb+websocket开发多人聊天室

什么是实时通信
什么是Websocket
websocket和http的对比
使用socket.io实现聊天室
匿名聊天
有用户名的聊天和用户列表
用户私聊
划分不同的聊天房间
消息持久化

cheerio+mysql+nodemailer 开发个性化新闻爬虫

用superagent+cheerio爬取网页内容
数据持久化到mysq|数据库
用户个性化邮箱订阅标签
数据更新按兴趣分发推送邮件
用ElasticSearch实现全文检索

使用canvas开发开发flappy bird

canvas基础知识
画布和画图
background实现
实现大地
绘制管道
绘制小鸟
碰撞检测
场景管理

使用three.js开 发微信小游戏跳-跳

基础信息属性配置
几何体创建以及相机镜头位置改变
更新相机坐标实现视觉动画
绑定事件实现jumper跳跃功能
回顾思路梳理逻辑
最终完成实现成功和失败的处理和重置操作
场景管理之场景