一、高級基礎部分
1.ES6/ES7語法和原理實現
2.異步發展過程:callback、promise、generator、co、async/await等異步流程控制(async和await的實現原理)
3.promise設計模式原理及在es6中的應用,手寫一個符合promise A+規范的promise實現
4.Node基礎與實戰
5.Node事件原理和發布定閱設計模式
6.函數式編程
二、模塊化的演進
JavaScript模塊化發展的演進歷史 CommonJS、AMD、CMD、ES6模塊的演進歷史
目前最主流的模塊化實現方案: CommonJS 到 ES Module
手寫 CommonJS 的簡單實現
三、前端工程化構建工具
1.gulp的基本用法以及實現原理
2.常用插件(壓縮、合并、編譯、預覽服務、自動注入)
3.node.js中自定義流的高級用法
4.實現自定義插件(auto-prefixer)
5.webpack基本用法以及運行原理
6.常見的loader以及plugin(DllPlugin等)
7.Webpack工作原理分析
8.編寫自定義Loader、編寫自定義Plugin
9.webpack優化(resolve、模塊熱替換、壓縮、代碼分割、可視化工具)
四.React全家桶
1.react
1.為什么采用組件化的方式
2.react環境搭建
3.JSX語法的使用(createElement,render的原理實現)
4.JSX表達式的用法
5.JSX的屬性(className,htmlFor,style,dangerouslyInnerHTML)
6.組件使用(類聲明,函數聲明)
7.組件的屬性和狀態(屬性的檢驗以及setState詳解)
8.復合組件
9.組件的聲明周期
10.受控組件 非受控組件
11.children屬性的使用
12.項目實戰留言板
2.Redux
1.手寫redux庫(getState,createStore,dispatch,subscribe,applyMiddlewar
e,combineReducer,compose,bindActionCreators)
3.react&-redux
1.高階組件的原理和使用
2.react高級屬性context上下文
3.react-redux實現todoList
4.手寫react-redux(Provider和connect原理解析)
4.中間件
1.react
● 1.為什么采用組件化的方式
● 2.react環境搭建
● 3.JSX語法的使用(createElement,render的原理實現)
● 4.JSX表達式的用法
● 5.JSX的屬性(className,htmlFor,style,dangerouslyInnerHTML)
● 6.組件使用(類聲明,函數聲明)
● 7.組件的屬性和狀態(屬性的檢驗以及setState詳解)
● 8.復合組件
● 9.組件的聲明周期
● 10.受控組件 非受控組件
● 11.children屬性的使用
● 12.項目實戰留言板
2.redux
● 1.手寫redux庫(getState,createStore,dispatch,subscribe,applyMiddlewar e,combineReducer,compose,bindActionCreators)
3.react-redux
● 1.高階組件的原理和使用
● 2.react高級屬性context上下文
● 3.react-redux實現todoList
● 4.手寫react-redux(Provider和connect原理解析)
4.中間件
● 1.手寫applyMiddle和compose(中間件原理)
● 2.手寫redux-logger,redux-thunk,redux-promise
● 3.手寫自定義本地緩存中間件
5.react-router-dom
● 1.HashRouter,BrowserRouter的區別
● 2.Link,NavLink的使用(extact絕對匹配,state帶參數跳轉)
● 3.Route組件三種渲染方式(component,render,children)
● 4.路由參數以及子路由的使用(params)
● 5.withRouter,PrivateRouter的用法
● 6.Prompt組件阻止跳轉
● 7.重定向(Redirect組件)
● 8.手寫HashRouter Route等常用組件
6.React-Transition-group
● 1.react動畫的實現原理
● 2.使用React-Transition-group庫開發todo動畫應用
7.項目實戰React珠峰課堂1.0
● 1.webpack環境搭建
● 2.底部頁簽導航
● 3.動畫
● 4.redux改變課程分類
● 5.實現頭部輪播圖
● 6.課程列表列表
● 7.下拉刷新
● 8.上拉加載
● 9.記錄滾動條位置
● 10.課程詳情頁面
● 11.用戶注冊
● 12.用戶登錄
● 13.受保護的我的課程頁面
● 14.Redux開發插件
8.源碼級Vue+React深度解析與實現
● 1.手寫Vue雙向綁定實現
● 2.Vue虛擬DOM和React虛擬DOM的區別
● 3.如何實現一個 Virtual DOM 算法
● 4.通過源碼徹底搞明白setState的更新機制
● 5.手寫包含虛擬DOM、事件監聽、基本組件生命周期等功能的React庫
五.node高級
1.http深入和tcp詳解
● 1.七層網絡協議分析
● 2.TCP連接和Nagle算法
● 3.使用wireshark學習七層網絡協議
● 4.DNS服務器詳解
● 5.Node靜態服務器實現與緩存機制的實現
● 6.HTTP常用報文的實際應用
● 7.Node Stream的應用與文件分片上傳策略
● 8.RestfulAPI設計和使用
● 9.CDN和OSS的使用
● 10.HTTPS安全通信過程分析
2.Express
● 1.手寫express框架
● 2.中間件的實現原理、bodyParser、cookie-parser、static、模板原理
3.Koa
● 1.手寫Koa框架
● 2.中間件的實現原理、bodyParser、cookie-parser、static、模板原理
4.Linux
● 1.Linux介紹
● 2.Linux文件和目錄
● 3.Linux用戶和組權限
● 4.Linux命令
● 5.Shell腳本
5.Mongodb
● 1.Mongodb安裝和使用
● 2.Mongodb的系統架構
● 3.Mongodb高級查詢
● 4.Mongodb索引
● 5.Mongodb安全與權限
● 6.mongoose模塊之Schema
● 7.mongoose模塊之Model
● 8.使用Model對文檔進行增刪改查
6.珠峰博客(express+mongodb+mongodb)
● 基于bootstrap+express+mongodb實現一個包括用戶管理、文章管理、多看留言、分頁查詢、 搜索、文件上傳、pv留言統計等功能完整的博客系統。使用了express的路由、ejs模板和serve-favicon、 morgan、cookie-parser、body-parser、express-session、connect-mongo、connect-flash、uuid、 async等內置各種中間件以及其它發路徑保護等自定義中間件,并擴展了富文本編輯器、markdown和heroku云布署等功能。
● 1.項目初始化
● 2.用戶管理
● 3.文章管理
● 4.分頁查詢
● 5.搜索
● 6.文件上傳
● 7.PV留言統計
7.珠峰聊天室項目實戰(react+socket.io+mongodb)
● 1.什么是實時通信
● 2.什么是Websocket
● 3.websocket和http的對比
● 4.使用socket.io實現聊天室
● 5.匿名聊天
● 6.有用戶名的聊天和用戶列表
● 7.用戶私聊
● 8.劃分不同的聊天房間
● 9.消息持久化
● 10.支持QQ表情
8.MYSQL
● 1.MYSQL安裝與使用
● 2.MYSQL系統架構
● 3.數據處理之增刪改查
● 4.數據類型和約束分頁
● 5.索引和慢查詢性能分析
● 6.數據庫安全之防止SQL注入
9.珠峰爬蟲(cheerio+request+mysql)
● 1.發出HTTP請求獲取指定URL中的內容
● 2.使用cheerio的語法操作網頁元素,提取需要的元素
● 3.將數據保存到mysql數據庫中
● 4.建立web服務器顯示這些數據
● 5.使用計劃任務自動執行更新任務
● 6.布署項目到阿里云中并配置反向代理
10.Redis
● 1.Redis安裝和使用
● 2.5種數據結構及使用場景
● 3.API的理解和使用
● 4.Redis客戶端
11.Nginx
● 1.nginx的安裝和使用
● 2.模塊和基本配置
● 3.正向反向代理等應用場景
12.Docker
● 1.Docker介紹和安裝
● 2.Dockerfile
● 3.存儲和鏡像倉庫
● 4.Dock實戰
13.單元測試
● 1.測試用例和需求分析
● 2.單元測試框架mocha/ava
● 3.自動化測試之selenium
14.集群和負載均衡
● 1.cluster的工作原理和負載均衡算法
● 2.pm2工具
15.前端性能監控與性能優化、行為監控與安全防范
● 1.針對重繪重排的優化策略
● 2.如何發現性能短板與各個短板的優化
● 3.前端埋點上報
● 4.前端錯誤上報
● 5.前端性能上報
● 6.前端行為監控上報
● 7.前端恢復上線與A/B測試
● 8.網絡緩存技術分析
● 9.瀏覽器渲染過程分析(DOM樹、RenderObject、繪圖上下文)
16.項目部署
● 1.npm script工作流
● 2.shell腳本布署
17.安全
● 1.XSS的原理與代碼實戰
● 2.CSRF的原理與代碼實戰
18.功能測試與性能測試
● 1.測試用例和需求分析
● 2.常用功能測試框架基礎使用(mocha/ava)
● 3.常用性能測試框架基礎使用(Benchmark)
19.全鏈路優化
● 1.DNS優化
● 2.請求速度優化
● 3.渲染優化之 JS css image html
● 4.緩存優化
● 5.服務器優化
● 6.數據庫優化
六、前端設計模式(選講)
創建型設計模式
● 1.工廠模式
● 2.建造者模式
● 3.原型模式
● 4.單例模式
結構型設計模式
● 1.外觀模式
● 2.適配器模式
● 3.代理模式
● 4.裝飾者模式
● 5.組合模式
行為型設計模式
● 1.觀察者模式
● 2.狀態模式
● 3.策略模式
● 4.命令模式
● 5.訪問者模式
● 6.中介者模式
● 5.迭代器模式
七、算法&數據結構(選講)
1.時間復雜度
2.空間復雜度
3.常見排序算法
● 1.冒泡排序、優化
● 2.選擇排序
● 3.插入排序
● 4.歸并排序
● 5.快速排序式
● 6.計數排序
● 7.桶排序
● 8.基數排序
4.鏈表(鏈表反轉、鏈表是否有環)
5.樹(高度、前序、中序、后序、廣度優先算法、反轉)
6.二叉樹搜索算法
7.青蛙跳臺階問題-動態規劃算法
8.React虛擬DOM Diff算法實現