[TOC] [http://dmitrysoshnikov.com](http://dmitrysoshnikov.com/) [珠峰前端架構師VIP精品課程](http://www.html5train.com/kecheng/detail_1445662) [珠峰前端架構師課程](http://www.zhufengpeixun.cn/main/course/index.html)的內容進行分章節講解： # JavaScript 高級 * 1.call、apply、bind、new 等手寫實現 * 2. 原型鏈和閉包深入 * 3. 執行上下文和作用域鏈 * 4. 深拷貝和淺拷貝 * 5. 防抖和節流 * 6. 詞法分析和語法分析 * 7. 常量、解析、模板字符串、展開運算符、解構操作符、箭頭函數、數組新方法、生成器和迭代器 * 8. Symbol 元編程、Set 和 Map 應用以及 WeakMap、Object.defineProperty 以及下一代 Proxy&Reflect、ESModule 實現、瀏覽器和 Node.js 中的 EventLoop * 9. V8 內存管理、垃圾收集、引用記數、標記清除、標記整理和增量標記 * 10. 高階函數、發布訂閱和觀察者模式、Promise 核心應用、generator 和實現 co 庫、async+await 原理、實現完整的 PromiseA + 類庫，包含 reace、all、finally、try 等方法 # 模塊化 * JavaScript模塊化發展的演進歷史 CommonJS、AMD、CMD、ES6模塊的演進歷史 * 目前最主流的模塊化實現方案: CommonJS 到 ES Module * 手寫 CommonJS 的簡單實現 * 手寫實現 Promise A+ 類庫 * Nodes核心原理，手寫Stream的源碼 * Node事件原理和發布訂閱設計模式 * 文件系統遍歷算法(同步、異步、深度、廣度、先序、中序、后序) * 文件系統遍歷算法(同步、異步、深度、廣度、先序、中序、后序) * 用TCP實現HTTP和Websocket協議 * 手寫一款HTTP服務命令行工具，包括壓縮、緩存、斷點續傳、文件上傳等功能 * Cookie 和Session 原理 # 前端工程化 * gulp的基本用法以及實現原理 * 常用插件(壓縮、合并、編譯、預覽服務、自動注入) * node.js中自定義流的高級用法 * 實現自定義插件(auto-prefixer) * webpack4實戰 * [2.webpack4優化(resolve、模塊熱替換、壓縮、代碼分割、可視化工具)](javascript:;) * [3.Webpack4源碼分析](javascript:;) * [4.編寫自定義Loader](javascript:;) * [5.編寫自定義Plugin](javascript:;) * [6.Webpack的事件機制tapable和AST抽象語法樹](javascript:;) * [7.如何編寫Babel插件](javascript:;) * [8.手寫一款自己的Webpack](javascript:;) # Vue 全家桶 * [1.Vue 基礎 什么是 Vue?、Vue 的使用、Vue 常見的指令、Vue 的事件綁定和屬性綁定、Vue 中的計算屬性、computed 和 watch 的應用、表單中的數據綁定、手寫 Vue 中的響應式原理、MVVM 手寫實現](javascript:;) * [2.Vue 應用 Vue 中的修飾符、自定義過濾器和指令、Vue 實例上的方法、Vue 中的生命周期、Axios 應用 async 和 await、vue-cli3.0 實戰、render 方法詳解和使用 jsx 語法](javascript:;) * [3\. 封裝自己的 ElementUI 組件 什么是組件和組件的應用、組件的屬性和校驗、組件之間的通信、EventBus 應用、組件 slot 用法、封閉自己的樹型組件、日歷組件、異步加載的省市級聯組件、基于 element-ui/iview 二次封裝表格組件和樹型組件、組件的單元測試和集成測試](javascript:;) * [4\. 路由篇 VueRouter 的基礎應用、編程式導航、路由嵌套、路由守衛、路由元信息、實現動態權限菜單、按鈕及權限認證、登錄權限、手寫實現 VueRouter 源碼](javascript:;) * [5.vuex vuex 應用 (state、getter、mutation、action)、手寫實現中的 state、getter、commit、dispatch、actions/mutations、模塊化](javascript:;) * [6.PWA manifest.json 配置、service worker 生命周期、fetch 請求攔截、cache api 以及緩存策略、Notification API、cache api 以及緩存策略、Notification API、workbox 應用、 Vue 實戰 PWA](javascript:;) * [7.Vue SSR 服務器端渲染 SSR 原理和設計理念、集成 koa 實現服務器端渲染、webpack 構建 Vue SSR 項目、集成路由及代碼分割、集成 VueSSR 和 Vuex 實現數據同步](javascript:;) * [8\. 項目優化 路由懶加載、頁面預渲染、SSR 原理和 Nuxt 實戰、Vue 骨架屏、Vue-devtools 開發插件、Vue 動畫原理](javascript:;) * [9.Vue 全家桶項目 Vue-cli3.0 項目搭建、服務器構建 (koa2+mongodb)、cube-ui 組件化實戰、路由配置和動畫、如何 Mock 后臺數據、數據獲取和 axios 應用攔截器、基于 JWT 的注冊登錄權限管理、公共組件封裝、上拉刷新、下拉加載、圖片懶加載、課程購買、微信和支付寶支付、使用 vuex 實現購物車、項目布署和上線](javascript:;) # React ## 核心篇 * React 核心 * 模塊化和組件化 * React 的屬性、校驗和參數傳遞 * React 的狀態和雙向數據綁定 * React 中的單向數據流 * 受控組件和非受控組件 * React 表單雙向數據綁定 * 新舊 Context 上下文環境 * DOM 獲取之 Ref * 新舊生命周期函數 * children 屬性的使用 ## 進階篇 * create-react-app 原理分析 * JSX 原理和虛擬 DOM 原理 * setState 異步原理實現和事務實現 * 使用 Immutablejs 和 PureComponent 優化性能 * React 動畫 react動畫的實現原理 使用React-Transition-group庫開發todo動畫應用 * ErrorBoundary、Suspense 和 Fragment * React Hooks+Redux 實戰 * React 性能分析 * React 中的高階組件和 render props * React 新一代的 Fiber 架構 * 從零實現一款包含完整 dom-diff 算法的 React ## 路由篇 * 路由配置 * 路由懶加載 * 路由重定向 * 路由之權限管理 * 受保護的路由 * 手寫一個完整的 React-router4 路由庫 ## redux 篇 * redux 核心概念 action、reducer、store * 手寫實現 redux、react-redux、connected-react-router 完整功能庫 * 手寫 redux-logger、redux-promise、redux-thunk、redux-saga、redux-actions、reselect、redux-persist 完整類庫 ## React 服務器端渲染 SSR * [1\. 客戶端渲染 VS 服務器端渲染](javascript:;) * [2.React 中的服務器端原理](javascript:;) * [3\. 同構的原理和意義](javascript:;) * [4.SSR 中使用路由跳轉和 redux](javascript:;) * [5.SEO 優化和預渲染](javascript:;) * [6.Koa2+next.js 服務器端渲染實戰](javascript:;) ## 中間件 * [1.手寫applyMiddle和compose(中間件原理)](javascript:;) * [2.手寫redux-logger,redux-thunk,redux-promise](javascript:;) * [3.手寫自定義本地緩存中間件](javascript:;) * [4.redux-saga](javascript:;) * [5.redux-immutable](javascript:;) ## react路由 * [1.HashRouter,BrowserRouter的區別](javascript:;) * [2.Link,NavLink的使用(extact絕對匹配,state帶參數跳轉)](javascript:;) * [3.Route組件三種渲染方式(component,render,children)](javascript:;) * [4.路由參數以及子路由的使用(params)](javascript:;) * [5.withRouter,PrivateRouter的用法](javascript:;) * [6.Prompt組件阻止跳轉](javascript:;) * [7.重定向(Redirect組件)](javascript:;) * [8.手寫HashRouter Route等組件](javascript:;) ## mobx 篇 * [1. observable、computed、autorun、when、reaction 實戰](javascript:;) * [2. 手寫一個 mobx 類庫](javascript:;) ## 源碼級Vue+React深度解析與實現 * [1.手寫Vue雙向綁定實現](javascript:;) * [2.Vue虛擬DOM和React虛擬DOM的區別](javascript:;) * [3.如何實現一個 Virtual DOM 算法](javascript:;) * [4.通過源碼徹底搞明白setState的更新機制](javascript:;) * [5.手寫包含虛擬DOM、事件監聽、基本組件生命周期等功能的React庫](javascript:;) ## Ant-Design 篇 * [1.Button、Modal、Loading、Notification、Message、List、Carousel 等 UI 組件](javascript:;) * [2. 布局、表單和復雜表格組件](javascript:;) * [3. 手寫 Antdesign 表單組件](javascript:;) ## Ant-DesignPro 篇 * [1.nunjucks、yaml、mockjs、roadhog](javascript:;) * [2.umi 配置靜態和動態路由、權限和動畫、UMI 實現原理](javascript:;) * [3.dva 創建應用、集成 AntDesign、定義路由和 UI 組件、鏈接倉庫、使用 effects 和 reducers、手寫實現 dva](javascript:;) * [4. 使用 AntDesignPro 開發企業級后臺系統](javascript:;) ## typescript * 開發環境、基本語法、面向對象編程、泛型、類型系統 * 前端工程化 TS 應用、聲明文件、TypeScript+React 集成開發 # node 高級 * node 核心模塊 * EventLoop 和事件隊列 * process 全局對象 * commonjs 原理解析 * 深入字符編碼 * Buffer 對象 * fs 文件模塊 * 壓縮與解壓縮 * 加密與簽名算法 * Stream 流的原理和應用 * 多線程與集群 * tcp、udp 和 http 服務器 * 多語言、防盜鏈、正向和反向代碼服務器 ## http深入和tcp詳解 * [1.七層網絡協議分析](javascript:;) * [2.TCP連接和Nagle算法](javascript:;) * [3.使用`wireshark`學習七層網絡協議](javascript:;) * [4.DNS服務器詳解](javascript:;) * [5.Node靜態服務器實現與緩存機制的實現](javascript:;) * [6.HTTP常用報文的實際應用](javascript:;) * [7.Node Stream的應用與文件分片上傳策略](javascript:;) * [8.RestfulAPI設計和使用](javascript:;) * [9.CDN和OSS的使用](javascript:;) * [10.HTTPS安全通信過程分析](javascript:;) ## Express * 手寫express框架 * 中間件的實現原理、bodyParser、cookie-parser、static、模板原理 ## Koa * 手寫Koa框架 * 中間件的實現原理、bodyParser、cookie-parser、static、模板原理 路由配置、參數處理、使用中間件、模板、靜態文件中間件、重定向、cookie 和 session、JWT 權限認證 ## 企業級開發框架 Egg.js * 項目架構、配置路由、靜態文件服務、模板引擎、遠程接口服務、計劃任務 * 集成 MYSQL、restful 接口、sequelize 持久化工具、國際化、擴展工具方法、中間件、運行環境、單元測試、服務器部署和運維 * 自定義插件和框架 * egg.js+antdesign開發前后端分離應用 ## Linux * [1.Linux介紹](javascript:;) * [2.Linux文件和目錄](javascript:;) * [3.Linux用戶和組權限](javascript:;) * [4.Linux命令](javascript:;) * [5.Shell腳本](javascript:;) ## Mongodb * Mongodb安裝和使用 * Mongodb的系統架構 * Mongodb高級查詢 * Mongodb索引 * Mongodb安全與權限 * mongoose模塊之Schema * mongoose模塊之Model * mongoose 實戰 使用Model對文檔進行增刪改查 ## MySQL * [1.MYSQL 安裝與使用](javascript:;) * [2.MYSQL 系統架構](javascript:;) * [3\. 數據處理之增刪改查](javascript:;) * [4\. 數據類型和約束分頁](javascript:;) * [5\. 索引和慢查詢性能分析](javascript:;) * [6\. 數據庫安全之防止 SQL 注入](javascript:;) * [7\. 數據庫設計 ER 圖設計](javascript:;) * [8\. 數據庫事務、鎖和日志隔離級別](javascript:;) * [9\. 數據庫設計之三大范式](javascript:;) * [10\. 基于角色的權限訪問控制（Role-Based Access Control）](javascript:;) ## 珠峰爬蟲(cheerio+request+mysql) * [1.發出HTTP請求獲取指定URL中的內容](javascript:;) * [2.使用cheerio的語法操作網頁元素，提取需要的元素](javascript:;) * [3.將數據保存到mysql數據庫中](javascript:;) * [4.建立web服務器顯示這些數據](javascript:;) * [5.使用計劃任務自動執行更新任務](javascript:;) * [6.布署項目到阿里云中并配置反向代理](javascript:;) ## Redis * [1.Redis 安裝和使用](javascript:;) * [2.5 種數據結構及使用場景](javascript:;) * [3.API 的理解和使用](javascript:;) * [4.Redis 客戶端](javascript:;) * [5\. 發布訂閱](javascript:;) * [6\. 事務](javascript:;) * [7\. 備份和恢復](javascript:;) ## GraphQL ## Nginx * nginx的安裝和使用 * 模塊和基本配置 * 正向反向代理等應用場景 * CDN * 瀏覽器緩存 * 跨域 * 防盜鏈 ## Docker * [1.Docker介紹和安裝](javascript:;) * [2.Dockerfile](javascript:;) * [3.存儲和鏡像倉庫](javascript:;) * [4.Dock實戰](javascript:;) ## 單元測試 * [1.測試用例和需求分析](javascript:;) * [2.單元測試框架mocha/ava](javascript:;) * [3.爬蟲利器 Puppeteer 實戰](javascript:;) * [4.Jest+Enzyme實現React單元測試](javascript:;) ## 集群和負載均衡 * [1.cluster的工作原理和負載均衡算法](javascript:;) * [2.pm2工具](javascript:;) ## 前端性能監控與性能優化、行為監控與安全防范 * [1.針對重繪重排的優化策略](javascript:;) * [2.如何發現性能短板與各個短板的優化](javascript:;) * [3.前端埋點上報](javascript:;) * [4.前端錯誤上報](javascript:;) * [5.前端性能上報](javascript:;) * [6.前端行為監控上報](javascript:;) * [7.前端恢復上線與A/B測試](javascript:;) * [8.網絡緩存技術分析](javascript:;) * [9.瀏覽器渲染過程分析(DOM樹、RenderObject、繪圖上下文)](javascript:;) ## 服務器布署 * TCP/IP 協議族網絡模型、IP 協議以及簡單路由、TCP 連接的本質、TCP 三次握手和加次揮手、路由和網關、滑動容器和 Nagle 算法、HTTPS、網絡命令、網絡調優、wireshark 抓包實戰 * 域名、備案、服務器、環境配置、安全設置、遠程部署、發布與更新 * 集群的負載均衡、PM2 實戰 ## 項目部署 * npm script工作流 * shell 腳本布署 ## 安全 * [1.XSS的原理與代碼實戰](javascript:;) * [2.CSRF的原理與代碼實戰](javascript:;) ## 功能測試與性能測試 * [1.測試用例和需求分析](javascript:;) * [2.常用功能測試框架基礎使用(mocha/ava)](javascript:;) * [3.常用性能測試框架基礎使用(Benchmark)](javascript:;) ## 持續集成和布署 * jenkins job * shell 集成 * 集成 nginx 和 git * 持續集成和布署 * travis gitlab ci ## 全鏈路優化 * DNS優化 * 請求速度優化 * 渲染優化之 JS css image html * 緩存優化 * 服務器優化 * 數據庫優化 # 五 、綜合項目實戰 ## Egg.js+AntDesignPro+MySQL全家桶開發 * 腳手架生成項目 * 配置后臺代理 * 后臺首頁實現布局模版 * 封裝頂部導航 * 左側權限菜單導航] * 全部刪除 * 搜索 * 為角色分配權限 * 為角色分配用戶 * 分類和文章 * 廣告輪播圖 ## React Mongodb聊天室 * [1.什么是實時通信](javascript:;) * [2.什么是Websocket](javascript:;) * [3.websocket和http的對比](javascript:;) * [4.使用socket.io實現聊天室](javascript:;) * [5.匿名聊天](javascript:;) * [6.有用戶名的聊天和用戶列表](javascript:;) * [7.用戶私聊](javascript:;) * [8.劃分不同的聊天房間](javascript:;) * [9.消息持久化](javascript:;) * [10.支持QQ表情](javascript:;) ## 個性化新聞爬蟲 * [1.用superagent+cheerio爬取網頁內容](javascript:;) * [2.數據持久化到數據庫](javascript:;) * [3.用戶個性化訂閱標簽](javascript:;) * [4.數據更新分發推送郵件](javascript:;) * [5.用es實現全文檢索](javascript:;) ## React實戰-珠峰課堂 * [1.webpack環境搭建](javascript:;) * [2.底部頁簽導航](javascript:;) * [3.動畫](javascript:;) * [4.redux改變課程分類](javascript:;) * [5.實現頭部輪播圖](javascript:;) * [6.課程列表列表](javascript:;) * [7.下拉刷新](javascript:;) * [8.上拉加載](javascript:;) * [9.記錄滾動條位置](javascript:;) * [10.課程詳情頁面](javascript:;) * [11.用戶注冊](javascript:;) * [12.用戶登錄](javascript:;) * [13.受保護的我的課程頁面](javascript:;) * [14.Redux開發插件](javascript:;) ## Canvas開發憤怒的小鳥 * 畫布和畫圖 * background實現 * 實現大地 * 繪制管道 * 繪制小鳥 * 碰撞檢測 * 場景管理之場景0,1 * 場景管理之2,3 ## 使用 three.js 開發微信小游戲跳一跳 * [1.基礎信息屬性配置](javascript:;) * [2.幾何體創建以及相機鏡頭位置改變](javascript:;) * [3.更新相機坐標實現視覺動畫](javascript:;) * [4.綁定事件實現jumper跳躍功能](javascript:;) * [5.回顧思路梳理邏輯](javascript:;) * [6.最終完成實現成功和失敗的處理和重置操作](javascript:;) * [7.場景管理之場景0,1](javascript:;) * [8.場景管理之2,3](javascript:;) ## 前端設計模式 ## 創建型設計模式 * [1.工廠模式](javascript:;) * [2.建造者模式](javascript:;) * [3.原型模式](javascript:;) * [4.單例模式](javascript:;) ## 結構型設計模式 * [1.外觀模式](javascript:;) * [2.適配器模式](javascript:;) * [3.代理模式](javascript:;) * [4.裝飾者模式](javascript:;) * [5.組合模式](javascript:;) ## 行為型設計模式 * [1.觀察者模式](javascript:;) * [2.狀態模式](javascript:;) * [3.策略模式](javascript:;) * [4.命令模式](javascript:;) * [5.訪問者模式](javascript:;) * [6.中介者模式](javascript:;) * [5.迭代器模式](javascript:;) # 算法&數據結構(選講) ## 算法基礎 * 輸入、輸出和數據級 * 計算能力的變革 * CPU、寄存器和內存 * 二分查找 * 插入排序 * 冒泡排序 ## 算法的衡量和優化 * 時間復雜度和空間復雜度 * 復雜度的本質 * 遞歸函數復雜度分析 * 遞歸表達式分析法 * 遞歸數學歸納法分析 * 主定理 ## 排序算法 * 排序算法介紹 * 基于比較的排序算法 * 合并排序/優化和分治策略排序 * 快速排序 * 快速排序復雜度和優化 * 計數排序 * 基數排序 * 桶排序 * 外部排序 ## 數據結構 * 數組 * 雙向鏈表 * 反轉單向鏈表 * 堆 * 棧 * 隊列 ## 進階算法 * 動態規劃的概念 * LCS 問題的子結構 * 填表法 * 構造結果 ## BAT 面試真題 * 反轉二叉樹 * 解析 query 字符串 * 取 N 個數字為 M * 火車排序問題和隊列 * 網格走法動態規劃 * 兩個棧實現一個隊列 * 二叉樹搜索算法 * 青蛙跳臺階問題-動態規劃算法 * React虛擬DOM Diff算法實現 ## 前端數據處理 * [1.前端處理數據的場景](javascript:;) * [2.數據的流處理(map/reduce/filter/zip/flatten/permuations…)](javascript:;) * [3.排序和分組](javascript:;) * [4.函數式編程庫Ramda](javascript:;) * [5.倒排表和笛卡爾積](javascript:;) ## 遞歸 * [1.分段函數](javascript:;) * [2.斐波那契數列、數組的flatten、全排列](javascript:;) * [5.深拷貝/深比較](javascript:;) * [4.DOM遍歷/DOM的查詢（CSS選擇器）的實現](javascript:;) * [1. 遞歸的基本概念](javascript:;) * [2. 遞歸圖形的繪制](javascript:;) * [3. 遞歸和窮舉問題](javascript:;) * [4. 組合問題](javascript:;) * [5. 遞歸空間優化](javascript:;) * [6. 回溯算法](javascript:;) * [7. 重復子問題優化](javascript:;) * [8. 尾遞歸](javascript:;) * [9. 搜索問題 (8 皇后)](javascript:;) * [10. 深度優先搜索和廣度優先搜索](javascript:;) ## 字符串算法 * KMP算法 * 正則表達式高級應用 * 構建模板引擎原理 * 路由解析引擎原理 ## 閉包和函數式編程 * 函數節流 * Y-組合子 * Hindley-Milner 類型系統 ## 算法的分析方法 * 內存/CPU/線程/進程/緩存 * map/reduce/笛卡爾積的時間復雜度 ## 前端常用數據結構 * 棧和隊列 * 鏈表 * 樹 * 哈希表 * Facebook Immutable * 操作系統調度問題 * 循環鏈表和輪播圖 * 字典樹和輸入提示問題 ## 回溯算法—游戲編程 * 八皇后問題 * 解決數獨問題 * 尋路和A\* ## 動態規劃 * 鋼條切割問題 * 最長子串/子序列 * 最優二項搜索樹 * 青蛙跳臺階問題-動態規劃算法 ## 前端場景 * DOM diff 算法和樹的編輯距離 * 超大瀑布流和虛擬化 * 插值、運動函數和貝塞爾曲線 * 數據可視化基礎算法介紹 ## 機器學習算法 * 模型、測試和訓練 * 分類問題 * 神經網絡