全栈工程师学习路线

2,932 阅读15分钟

某培训机构的课程表,不想去培训的,可以按照这个自学。

1 第一阶段JAVASCRIPT高级

1 1 JavaScript高级

  • 1 1 1 call、apply、bind、new等原理解析
  • 1 1 2 原型链深入
  • 1 1 3 闭包深入
  • 1 1 4 执行上下文和作用域链
  • 1 1 5 作用域链

1 2 ES6深入学习

  • 1 2 1 常量
  • 1 2 2 解构
  • 1 2 3 模板字符串
  • 1 2 4 展开操作符
  • 1 2 5 解构操作符
  • 1 2 6 箭头函数
  • 1 2 7 数组新方法
  • 1 2 8 类和继承
  • 1 2 9 生成器
  • 1 2 10 迭代器和集合
  • 1 2 11 手写一个符合 Promise/A+规范的类库

1 3 V8内存管理

  • 1 3 1 JavaScript中的垃圾收集
  • 1 3 2 JavaScrpt中的内存管理
  • 1 3 3 V8垃圾回收机制
  • 1 3 4 引用记数
  • 1 3 5 标记清除
  • 1 3 6 标记整理和增量标记

2 第二阶段VUE.JS全家桶实战

2 1 基础篇

  • 2 1 1 什么是VUE?
  • 2 1 2 VUE的使用
  • 2 1 3 VUE常见的指令
  • 2 1 4 VUE的事件绑定和属性绑定
  • 2 1 5 Vue中的计算属性
  • 2 1 6 computed和watch的应用
  • 2 1 7 表单中的数据绑定
  • 2 1 8 VUE中的修饰符
  • 2 1 9 自定义过滤器和指令
  • 2 1 10 VUE实例上的方法
  • 2 1 11 VUE中的生命周期
  • 2 1 12 AXIOS应用
  • 2 1 13 async
  • 2 1 14 await

2 2 组件篇(模态框)和路由篇(权限控制)

  • 2 2 1 什么是组件和组件的应用
  • 2 2 2 组件的属性和校验
  • 2 2 3 组件之间的通信
  • 2 2 4 EventBus应用
  • 2 2 5 组件slot用法
  • 2 2 6 vue router的基础应用
  • 2 2 7 编程式导航
  • 2 2 8 路由的嵌套
  • 2 2 9 路由守卫
  • 2 2 10 路由元信息

2 3 vuex篇(商品收藏)

  • 2 3 1 什么是vuex
  • 2 3 2 vuex应用(state/getter/mutation/action)
  • 2 3 3 vuex中的模块拆分

2 4 Vue全家桶项目

  • 2 4 1 Vue-cli3.0项目搭建
  • 2 4 2 服务器端构建koa+mongodb
  • 2 4 3 MintUI和ElementUI组件实战
  • 2 4 4 路由配置和动画
  • 2 4 5 如何Mock后台数据
  • 2 4 6 数据获取和axios应用拦截器
  • 2 4 7 基于JWT的注册登录权限管理
  • 2 4 8 公共组件封装
  • 2 4 9 上拉刷新、下拉加载、图片懒加载
  • 2 4 10 课程购买
  • 2 4 11 微信和支付宝支付
  • 2 4 12 使用vuex项目布署和上线

2 5 项目优化扩展篇和PWA原理

  • 2 5 1 路由懒加载
  • 2 5 2 页面与渲染
  • 2 5 3 SSR之Nuxt
  • 2 5 4 Vue骨架屏
  • 2 5 5 Vue-devtools开发插件
  • 2 5 6 手写自己的Vue组件库
  • 2 5 7 组件的单元测试
  • 2 5 8 Vue中的插件
  • 2 5 9 PWA构建和配置
  • 2 5 10 错误处理
  • 2 5 11 中间件
  • 2 5 12 路由
  • 2 5 13 Skeleton
  • 2 5 14 App Shell模型
  • 2 5 15 手写一款MVVM框架
  • 2 5 16 响应式开发的原理

3 第三阶段REACT全家桶实

3 1 基础篇

  • 3 1 1 模块化和组件化
  • 3 1 2 React的属性
  • 3 1 3 校验和参数传递
  • 3 1 4 React的状态和双向数据绑定
  • 3 1 5 React中的单向数据流
  • 3 1 6 受控组件和非受控组件
  • 3 1 7 React表单处理

3 2 进阶篇

  • 3 2 1 create-react-app原理分析
  • 3 2 2 JSX原理和虚拟DOM原理
  • 3 2 3 setState原理实现
  • 3 2 4 React中的事务处理
  • 3 2 5 使用Immutablejs优化项目性能
  • 3 2 6 React生命周期和动画原理
  • 3 2 7 React错误处理和Hooks
  • 3 2 8 React性能优化(react_perf、pureComponent)
  • 3 2 9 React新的Context Api
  • 3 2 10 fragments React中的高阶组件
  • 3 2 11 React新一代的Fiber架构
  • 3 2 12 手写一款React框架

3 3 路由和Redux篇

  • 3 3 1 路由配置
  • 3 3 2 路由懒加载
  • 3 3 3 路由重定向
  • 3 3 4 路由之权限管理
  • 3 3 5 受保护的路由
  • 3 3 6 手写一个完整的React-router4路由库
  • 3 3 7 Redux核心概念
  • 3 3 8 Action/Reducer/Store
  • 3 3 9 Redux数据流
  • 3 3 10 react-redux连接React组件
  • 3 3 11 redux仓库
  • 3 3 12 redux-logger 打印日志
  • 3 3 13 redux-promise 中间件执行异步任务
  • 3 3 14 redux-thunk 中间件执行异步任务
  • 3 3 15 redux-saga 中间件执行副作用
  • 3 3 16 手写Redux、react-redux、redux-logger、redux-promise、redux-thunk、redux-saga类库

3 4 SSR和mobx篇

  • 3 4 1 客户端渲染VS服务端渲染
  • 3 4 2 React中的服务端渲染
  • 3 4 3 同构的原理和意义
  • 3 4 4 SSR中使用路由
  • 3 4 5 SSR中使用Redux
  • 3 4 6 observable | computed | autorun | when | reaction
  • 3 4 7 mobx实战
  • 3 4 8 手写一个mobx类库

3 5 Ant-Design和AntDesignPro篇

  • 3 5 1 Button、Modal、Loading、Notification、Message、List、Carousel等UI组件
  • 3 5 2 布局组件、表单和复杂表格组件
  • 3 5 3 手写Antdesign组件
  • 3 5 4 让create-react-app可配的命令行工具roadhog
  • 3 5 5 可插拔的企业级react应用框架umi
  • 3 5 6 基于redux和redux-saga的数据流方案dva
  • 3 5 7 开箱即用的中台前端/设计解决方案AntDesignPro
  • 3 5 8 手写dva

4 第四阶段微信小程序&微信公众号&ReactNative

4 1 微信小程序

  • 4 1 1 微信小程序
  • 4 1 2 页面结构构建
  • 4 1 3 页面样式定义
  • 4 1 4 基础组件
  • 4 1 5 后端开发接口
  • 4 1 6 支付功能
  • 4 1 7 小程序版珠峰课堂

4 2 微信公众号

  • 4 2 1 微信API
  • 4 2 2 消息中间件
  • 4 2 3 微信公众号内的图片、音视频、图文、Ticket管理及三方接口调用
  • 4 2 4 客户端
  • 4 2 5 服务端
  • 4 2 6 微信三方的请求转发交互

4 3 ReactNative

  • 4 3 1 UIExplorer项目
  • 4 3 2 css盒子模型和样式
  • 4 3 3 css元素的浮动
  • 4 3 4 flexbox布局
  • 4 3 5 ReactNative长度单位
  • 4 3 6 RN事件
  • 4 3 7 React动画原理
  • 4 3 8 实现一个Navigator
  • 4 3 9 App架构之目录结构、路由和组件
  • 4 3 10 App架构之网络和Container
  • 4 3 11 App架构之命名空间
  • 4 3 12 ReactNative第三方插件
  • 4 3 13 珠峰课堂项目实战

5 第五阶段NODE.JS

5 1 Node.js核心模块

  • 5 1 1 EventLoop和事件队列
  • 5 1 2 process全局对象
  • 5 1 3 events事件处理模块
  • 5 1 4 commonjs原理解析
  • 5 1 5 深入字符编码
  • 5 1 6 Buffer对象
  • 5 1 7 fs文件模块
  • 5 1 8 压缩与解压缩
  • 5 1 9 加密和签名算法
  • 5 1 10 stream流的原理和应用
  • 5 1 11 多进程与集群
  • 5 1 12 tcp和http服务
  • 5 1 13 多语言、防盗链、正向和反向代理服务器

5 2 express&koa

  • 5 2 1 路由配置
  • 5 2 2 处理参数
  • 5 2 3 使用中间件
  • 5 2 4 模板
  • 5 2 5 静态文件服务器
  • 5 2 6 重定向
  • 5 2 7 cookie和session
  • 5 2 8 手写express框架
  • 5 2 9 手写koa框架

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

  • 5 3 1 内置对象
  • 5 3 2 中间件
  • 5 3 3 路由
  • 5 3 4 控制器
  • 5 3 5 服务 单元测试
  • 5 3 6 应用部署
  • 5 3 7 多进程模型和进程间通信
  • 5 3 8 安全和国际化

5 4 单元测试&集群和负载均衡

  • 5 4 1 测试用例和需求分析
  • 5 4 2 单元测试框架mocha
  • 5 4 3 爬虫利器
  • 5 4 4 Puppeteer 实战
  • 5 4 5 Jest+Enzyme实现React单元测试
  • 5 4 6 cluster的工作原理和负载均衡算法
  • 5 4 7 pm2使用

5 5 服务器布署

  • 5 5 1 购买自己的域名
  • 5 5 2 域名备案
  • 5 5 3 购买服务器配置
  • 5 5 4 服务器应用环境安装
  • 5 5 5 配置服务器
  • 5 5 6 项目远程部署
  • 5 5 7 项目发布与更新

6 第六阶段前端工程化和性能优化

6 1 webpack

  • 6 1 1 webpack4实战
  • 6 1 2 webpack4优化(dll、resolve、模块热替换、压缩、代码分割、可视化工具)
  • 6 1 3 Webpack4源码分析
  • 6 1 4 懒加载原理、热更新原理
  • 6 1 5 编写自定义Loader(style-loader css-loader less-loader等)
  • 6 1 6 编写自定义Plugin(html-webpack-plugin)
  • 6 1 7 Webpack的事件机制tapable和AST抽象语法树
  • 6 1 8 如何编写Babel插件
  • 6 1 9 手写一款自己的Webpack

6 2 服务器布署

  • 6 2 1 前端埋点上报
  • 6 2 2 前端错误上报
  • 6 2 3 前端性能上报
  • 6 2 4 前端行为监控上报
  • 6 2 5 前端恢复上线与A/B测试
  • 6 2 6 网络缓存技术分析

6 3 前端性能优化

  • 6 3 1 webpack 优化方案
  • 6 3 2 浏览器缓存原理和最佳设置策略
  • 6 3 3 CDN缓存优化
  • 6 3 4 EventLoop异步更新
  • 6 3 5 避免回流和重绘
  • 6 3 6 节流与防抖
  • 6 3 7 通过Performance监控性能
  • 6 3 8 TCP网络调优

6 4 浏览器渲染原理

  • 6 4 1 浏览器内核
  • 6 4 2 DOM树
  • 6 4 3 CSS规则树
  • 6 4 4 渲染树
  • 6 4 5 回流和重绘

6 5 网络安全

  • 6 5 1 Web漏洞的分析与防御
  • 6 5 2 XSS(跨站脚本攻击)
  • 6 5 3 CSRF(跨站请求伪造)
  • 6 5 4 防SQL注入
  • 6 5 5 HTTPS加密

7 第七阶段计算机网络&服务器和运维

7 1 七层网络协议

  • 7 1 1 TCP/IP协议族的网络模型
  • 7 1 2 IP协议以及简单路由机制
  • 7 1 3 TCP连接的本质
  • 7 1 4 TCP三次握手和四次挥手
  • 7 1 5 TCP协议之滑动窗口和Nagle算法
  • 7 1 6 HTTP、HTTPS和HTTP2的区别和联系
  • 7 1 7 常用网络命令
  • 7 1 8 网络调优实战

7 2 Linux

  • 7 2 1 Linux与Windows的不同
  • 7 2 2 Linux安装和虚拟机的使用
  • 7 2 3 桥接、NAT、Host-Only等网络连接
  • 7 2 4 快照、克隆、挂载点和分区
  • 7 2 5 linux常用命令 文件处理、搜索、链接、帮助、解压与解压缩、用户和组
  • 7 2 6 Shell编程

7 3 Nginx

  • 7 3 1 nginx的安装和使用
  • 7 3 2 模块和基本配置
  • 7 3 3 正向反向代理等应用场景
  • 7 3 4 CDN
  • 7 3 5 浏览器缓存
  • 7 3 6 跨域
  • 7 3 7 防盗链

7 4 Docker

  • 7 4 1 虚拟机
  • 7 4 2 Linux容器
  • 7 4 3 Docker核心概念
  • 7 4 4 Docker架构
  • 7 4 5 Docker镜像
  • 7 4 6 Docker容器
  • 7 4 7 Dockerfile
  • 7 4 8 Docker数据盘
  • 7 4 9 网络配置
  • 7 4 10 docker-compose

8 第八阶段数据库

8 1 Mongodb

  • 8 1 1 Mongodb安装和使用

  • 8 1 2 Mongodb的系统架构

  • 8 1 3 Mongodb高级查询

  • 8 1 4 Mongodb索引

  • 8 1 5 Mongodb安全与权限

  • 8 1 6 mongoose模块之Schema

  • 8 1 7 mongoose模块之Model

8 2 Mysql

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

8 3 Redis

  • 8 3 1 Redis安装和使用
  • 8 3 2 5种数据结构及使用场景
  • 8 3 3 API的理解和使用
  • 8 3 4 Redis客户端

9 第九阶段项目实战

9 1 Egg.js+AntDesignPro+MySQL 开发企业级CMS系

  • 9 1 1 脚手架生成项目
  • 9 1 2 配置后台代理
  • 9 1 3 后台首页实现布局模版
  • 9 1 4 封装顶部导航
  • 9 1 5 左侧权限菜单导航
  • 9 1 6 全部删除
  • 9 1 7 搜索
  • 9 1 8 为角色分配权限
  • 9 1 9 为角色分配用户
  • 9 1 10 文章分类
  • 9 1 11 文章管理
  • 9 1 12 广告轮播图

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

  • 9 2 1 什么是实时通信
  • 9 2 2 什么是Websocket
  • 9 2 3 websocket和http的对比
  • 9 2 4 使用socket.io实现聊天室
  • 9 2 5 匿名聊天
  • 9 2 6 有用户名的聊天和用户列表
  • 9 2 7 用户私聊
  • 9 2 8 划分不同的聊天房间
  • 9 2 9 消息持久化
  • 9 2 10 支持QQ表情

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

  • 9 3 1 用superagent+cheerio爬取网页内容
  • 9 3 2 数据持久化到mysql数据库
  • 9 3 3 用户个性化邮箱订阅标签
  • 9 3 4 数据更新按兴趣分发推送邮件
  • 9 3 5 用es实现全文检索

9 4 React+Redux开发珠峰课堂使用canvas开发flappy bird

  • 9 4 1 webpack环境搭建
  • 9 4 2 底部页签导航
  • 9 4 3 动画
  • 9 4 4 redux改变课程分类
  • 9 4 5 实现头部轮播图
  • 9 4 6 课程列表列表
  • 9 4 7 下拉刷新
  • 9 4 8 上拉加载
  • 9 4 9 记录滚动条位置
  • 9 4 10 课程详情页面
  • 9 4 11 用户注册和登录
  • 9 4 12 受保护的我的课程页面
  • 9 4 13 Redux开发插件
  • 9 4 14 使用canvas开发flappy bird
    • 画布和画图
    • background实现
    • 实现大地
    • 绘制管道
    • 绘制小鸟
    • 碰撞检测
    • 场景管理
  • 9 4 15 画布和画图
  • 9 4 16 background实现
  • 9 4 17 实现大地
  • 9 4 18 绘制管道
  • 9 4 19 绘制小鸟
  • 9 4 20 碰撞检测
  • 9 4 21 场景管理

9 5 使用three.js开发微信小游戏跳一跳

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

10 第九阶段前端设计模式

10 1 创建型设计模式

  • 10 1 1 工厂模式
  • 10 1 2 建造者模式
  • 10 1 3 原型模式
  • 10 1 4 单例模式

10 2 结构型设计模式

  • 10 2 1 外观模式
  • 10 2 2 适配器模式
  • 10 2 3 代理模式
  • 10 2 4 装饰者模式
  • 10 2 5 组合模式

10 3 行为型设计模式

  • 10 3 1 观察者模式
  • 10 3 2 状态模式
  • 10 3 3 策略模式
  • 10 3 4 命令模式
  • 10 3 5 访问者模式
  • 10 3 6 中介者模式
  • 10 3 7 迭代器模式

11 第十阶段前端数据结构和算法

11 1 算法的基础知识

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

11 2 算法的衡量和优化

  • 11 2 1 时间复杂度和空间复杂度
  • 11 2 2 复杂度的本质
  • 11 2 3 合并排序(分治策略)
  • 11 2 4 递归函数复杂度分析(树状图)
  • 11 2 5 递归表达式分析法
  • 11 2 6 递归数学归纳法分析
  • 11 2 7 主定理 *选学

11 3 排序算法

  • 11 3 1 排序算法介绍
  • 11 3 2 基于比较的排序算法
  • 11 3 3 快速排序
  • 11 3 4 快速排序复杂度和优化
  • 11 3 5 合并排序的优化
  • 11 3 6 计数排序
  • 11 3 7 基数排序
  • 11 3 8 桶排序
  • 11 3 9 外部排序

11 4 递归

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

11 5 数据结构

  • 11 5 1 数组
  • 11 5 2 双向链表
  • 11 5 3 反转单向链表
  • 11 5 4 堆
  • 11 5 5 栈
  • 11 5 6 队列