前端開發學習路線圖

一、HTML5+CSS3模塊

1. HTML標簽
2. 瀏覽器內核差異性
3. H5新增標簽
4. 語意化
5. 標簽與屬性
6. CSS基本語法規范
7. CSS常用選擇器與技巧
8. CSS復合選擇器
9. 數值與單位
10. CSS Hack
11. 盒子模型
12. 媒體查詢與回應式
13. 過渡與影片
14. 彈性盒子模型
15. 浮動
16. 定位
17. CSS高級技巧（雪碧圖、滑動門和三角形繪制等）
18. Chrome除錯工具
19. CSS企業級應用技巧
20. 網頁常見問題解決方案
21. PhotoShop應用
22. 專案實戰開發流程
23. 復雜頁面的設計與排版
24. CSS模塊化開發
25. CSS字體圖示應用
26. 常見布局解決方案

二、移動端M站模塊

1. 移動端螢屏比例
2. 移動端瀏覽器
3. 物理像素與設備獨立像素
4. ViewPort視口相關
5. 主流移動端社適配解決方案
6. 百分比布局
7. Flex布局的優勢
8. Rem處理移動端
9. 媒體查詢多終端適配
10. 百度地圖移動端布局分析

三、JavaScript編程模塊

1. JavaScript概述
2. JavaScript發展歷史
3. 基礎語法
4. 資料型別
5. 數值精密計算
6. 字串
7. 物件
8. 陣列
9. 函式
10. 運算子
11. 資料型別轉換
12. 錯誤處理機制
13. 編程風格
14. Object物件
15. Array物件
16. 包裝物件
17. Number物件
18. String物件
19. Math物件
20. Date物件
21. RegExp物件
22. JSON物件
23. 面向物件編程
24. this關鍵字
25. prototype物件
26. 原型與原型鏈深入剖析
27. 作用域深入決議
28. Object物件與繼承
29. 面向物件編程模式
30. 異步編程
31. 定時器
32. Promise物件
33. 嚴格模式
34. DOM編程
35. 事件型別
36. windows物件
37. 瀏覽器環境
38. History物件
39. Cookie
40. 同源策略
41. 設計模式
42. MVC與MVVM

四、JQuery模塊

1. jQuery介紹
2. jQuery優勢
3. jQuery API詳解
4. 鏈式編程與隱式迭代
5. 原始碼決議
6. 插件使用與封裝
7. jQuery Ajax
8. jQuery影片
9. jQuery實作網站特效

五、BootStrap模塊

1. 第三方UI組件庫
2. BootStrap參考
3. BootStrap全域CSS樣式
4. 柵格系統與回應式
5. 拆解柵格系統原始碼
6. 柵格系統原理決議
7. BootStrap JavaScript插件
8. 組件應用
9. BootStrap定制需求

六、HTML5新特性模塊

1. 語意化標簽
2. 本地存盤
3. 離線快取
4. H5連貫性
5. 多媒體相關
6. 性能提升
7. 呼叫原生API
8. Canvans
9. Canvans游戲

七、Node.js、MySQL與Ajax模塊

1. Ajax的應用
2. 原生XHR物件
3. 同步與異步
4. Http協議
5. Https協議
6. 封裝ajax
7. jQuery Ajax
8. 同源策略
9. 跨域問題及解決方案
10. JSON決議
11. CORS與JSONP
12. 前端模板引擎Template
13. PostMan工具
14. Node.js開發環境
15. Commons.js規范
16. 模塊化
17. NPM與CNPM鏡像
18. 核心模塊
19. RestFulAPI
20. Express框架
21. Koa2框架
22. 中間件
23. 模板引擎
24. 靜態資源管理
25. 路由相關
26. MySQl資料庫使用
27. Node.js鏈接MySql

八、模塊化

1. 模塊化歷程
2. js模塊化
3. Require.js
4. Sea.js
5. Node.js的Commons.js規范

九、JavaScript新標準（ES6/7/8）模塊

1. ES6的目標
2. Bable決議
3. Let與Const命令
4. 變數與解構賦值
5. 字串擴展
6. 陣列擴展
7. 函式擴展
8. 物件擴展
9. Set與Map資料結構
10. Proxy物件
11. Promise物件
12. Generator物件
13. Async與await
14. Class類
15. Class類的繼承
16. Module模塊
17. 編程風格

十、工程化

1. Gulp自動化處理
2. Gulp管理專案壓縮
3. 合并、重命名操作
4. Gulp配置熱更新
5. Webpack靜態打包模塊器
6. Webpack入口起點
7. Webpack輸出
8. Webpack模式
9. Webpack Loads
10. Webpack插件
11. Webpack配置
12. Webpack模塊
13. 熱模塊替換
14. 構建目標
15. 開發中的Server
16. 監聽打包模塊
17. 模塊打包熱更新
18. 生產環境與開發環境分離
19. 打包優化之CodeSplitting代碼分離
20. 打包優化之懶加載
21. 打包優化之快取處理
22. Less與sass的CSS預處理語言

十一、小程式模塊

1. 小程式開發
2. 小程式框架
3. 小程式組件
4. 小程式API
5. 小程式服務端相關
6. 小程式工具應用
7. 自定義組件
8. 優化
9. 組件與生命周期
10. 小程式分包加載
11. 小程式性能分析與優化
12. 小程式云端能力
13. 云服務器
14. 云資料庫
15. 云存盤
16. 云呼叫
17. 配額
18. 小程式發布
19. 多平臺小程式
20. MpVue
21. Wepy

十二、React模塊

1. Create React App
2. React最佳實戰
3. JSX語法
4. 元素渲染
5. 組件
6. Props與State
7. 事件處理
8. 條件渲染
9. 串列與Key
10. 表單相關
11. 狀態提升
12. 組合與繼承
13. 代碼分割code-splitting
14. 代碼分割lazy
15. Context物件
16. 錯誤邊界處理
17. Refs與DOM
18. 碎片化和Fragments
19. 高階組件
20. 性能優化
21. 靜態型別檢查
22. 受控組件與非受控組件
23. Hook新特性

十三、React輕量級框架之DvaJS

1. Dva開發體驗
2. React資料流解決方案
3. 插件機制
4. 支持XHR
5. Dva API
6. 定義路由
7. 定義Model
8. Connect物件
9. 優化加載方式
10. 優化路由配置
11. 路由原理
12. Dva開發復雜SPA

十四、React輕量級框架之UmiJS

1. 可拔插企業級框架
2. 約定式路由
3. 開箱即用
4. 高性能
5. 靜態頁面匯出
6. 支持TypeScript
7. 與Dva融合
8. 按需加載
9. 服務器端渲染SSR
10. 基本配置
11. WebPack配置
12. immer優化開發
13. 動態加載
14. 語言設定
15. DII二次啟動提速
16. 打包與部署

十五、Vue模塊

1. Vue基礎
2. Vue實力物件
3. 模板語法
4. 計算屬性
5. 偵聽器
6. Class與Style系結
7. 組件相關
8. Props資料傳遞
9. 插槽
10. 自定義事件
11. 動態組件
12. 異步組件
13. 邊界處理
14. 過渡與影片
15. 混入
16. 自定義指令
17. 渲染函式與JSX
18. 插件
19. 過濾器
20. 單檔案組件
21. TypeScript支持
22. 生產環境部署
23. 路由相關
24. 狀態管理
25. 服務端渲染
26. 深入回應式原理
27. 封裝組件
28. npm發布組件
29. MVVM雙向資料系結原理
30. $nextTick原理
31. 發布訂閱模式
32. 權限管理

十六、Angular模塊

1. Angular引入
2. 雙向資料系結
3. MVC模式
4. Angular服務
5. Angular路由
6. 表單相關
7. 依賴注入

十七、框架原理與進階

1. TypeScript
2. TS靜態型別檢查
3. React支持TypeScript
4. Vue支持TypeScript
5. Vue雙向資料系結原理
6. 模擬實作Vue框架資料系結
7. RxJS
8. Redux API
9. React-Redux
10. Redux-thunk
11. Redux-Saga
12. Redux深入理解
13. Redux應用技巧
14. Redux常見問題與解決方案
15. Redux異步相關
16. Vuex API
17. 異步與同步
18. Reducers
19. Actions
20. modules
21. getters
22. 插件
23. 嚴格模式
24. 熱多載
25. React服務端渲染解決方案next.js
26. Vue服務端渲染解決方案nuxt.js

十八、UI組件庫

1. Antd組件庫介紹
2. Antd UI設計風格
3. 組件引入
4. 按需加載
5. 常見組件詳解
6. 組件庫原始碼分析
7. 定制主題
8. 常見問題規避與解決方案
9. ELement UI組件庫引入
10. Vue-cli@3版本引入
11. 全加載與按需加載
12. 自定義主題

十九、協同開發模塊

1. SVN與Git介紹
2. SVN客戶端與服務器端搭建
3. SVN管理版本
4. SVN沖突解決
5. SVN多人協作開發
6. Git環境搭建
7. Git分布式
8. Git版本庫管理
9. Git前進和后退、修改與撤銷
10. git分支管理
11. git沖突解決
12. GitHub遠程倉庫關聯
13. gitee遠程倉庫關聯

二十、大資料可視化

1. Echarts
2. D3.js
3. three.js
4. AntV（G2）
5. 全國地圖
6. 世界地圖
7. 發散點描繪
8. 雙軸線
9. 折線圖
10. 散點圖
11. 條形圖
12. 熱力圖
13. 環形圖
14. 路線圖
15. 3DMap
16. 引數調優

二十一、微信相關

1. 公眾號開發
2. JSSDK相關開發
3. 展示
4. 分享
5. 支付
6. 錄音

二十二、WebApp與混合開發

1. Cordova
2. phoneGap
3. 混可開發介紹
4. 布局處理
5. Vant組件庫
6. 原生互動
7. Webpack打包優化
8. 除錯工具應用
9. WebView深入理解

二十三、React-Native

1. 環境搭建
2. Android SDK
3. Props
4. State
5. 基礎API
6. 特定平臺代碼
7. 無障礙功能
8. 改進用戶體驗
9. 多平臺支持
10. 發布定制React-Native包

二十四、Flutter模塊

1. 環境搭建
2. 體驗Flutter
3. Widget
4. Flutter for Web開發
5. 執行基本布局操作
6. 控制位置和大小
7. 處理形狀
8. 操作文本
9. 資源與圖片
10. 路由與導航
11. 國際化