適用人群:
-
1-3年經驗的前端開發工程師
-
掌握前端開發必須的HTML、JS、CSS基礎知識
-
希望能進入BAT、小米、360等一線互聯網大公司工作
教學目標:
本課程主要面向1-3年工作經驗的前端開發同學,講師通過在自己在阿里巴巴等國內一流互聯網公司的多年開發和面試經驗,整理出一線大型互聯網公司中高級工程師必備的核心技能,以線下面授前端架構師課程學習、課后作業 、討論答疑和多人協作項目實戰等方式,幫助學員在較短時間內達到阿里P6級以上水平。
課程大綱:
一、Z峰高級全棧架構課基礎部分
-
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.reactredux
-
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.reactrouterdom
-
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.ReactTransitiongroup
1.react動畫的實現原理 2.使用React-Transition-group庫開發todo動畫應用
7.項目實戰ReactZ峰課堂1.0項目
8.源碼級Vue+React深度解析與實現
-
1.手寫Vue雙向綁定實現
-
2.Vue虛擬DOM和React虛擬DOM的區別
-
3.如何實現一個 Virtual DOM 算法
-
4.通過源碼徹底搞明白setState的更新機制
-
5.手寫包含虛擬DOM、事件監聽、基本組件生命周期等功能的React庫
五.node高級
1.http深入和tcp詳解
2.express
-
1.手寫express框架
-
2.中間件的實現原理、bodyParser、cookie-parser、static、模板原理
3.Koa
-
1.手寫Koa框
-
2.中間件的實現原理、bodyParser、cookie-parser、static、模板原理
4.Linux
5.Mongodb
6.Z峰博客(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云布署等功能。
7.Z峰聊天室項目實戰(react+socket.io+mongodb)
8.MySQL
9.Z峰爬蟲(cheerio+request+mysql)
10.Redis
11.Nginx
12.Docker
13.單元測試
14.集群和負載均衡
15.前端性能監控與性能優化、行為監控與安全防范
16.項目部署
17.安全
18.功能測試與性能測試
19.全鏈路優化
六、前端設計模式(選講)
創建型設計模式
結構型設計模式
行為型設計模式
七、算法&數據結構(選講)
-
1.時間復雜度
-
2.空間復雜度
-
3.常見排序算法
-
1.冒泡排序、優化
-
2.選擇排序
-
3.插入排序
-
4.歸并排序
-
5.快速排序式
-
6.計數排序
-
7.桶排序
-
8.基數排序
-
4.鏈表(鏈表反轉、鏈表是否有環)
-
5.樹(高度、前序、中序、后序、廣度優先算法、反轉)
-
6.二叉樹搜索算法
-
7.青蛙跳臺階問題-動態規劃算法
-
8.React虛擬DOM Diff算法實現







