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

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