全棧工程師學習路線

某培訓機構的課程表，不想去培訓的，可以按照這個自學。

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 隊列