12.29學習記錄

一、3-1 前端框架的分析

What

框架中的框就是“約束”，架就是“支撐”，框架會控制我們書寫程式碼時的結構、依賴關係以及互動關係。簡單點來說就是我們按照框架的要求來寫業務，而與業務無關的一些內容由框架完成，提高開發效率。

Why

原生JS搞不定了（主要不是技術問題，而是成本、效率問題）。

How

通過實戰開發學會框架的使用

二、3-2 前端框架要解決的問題

傳統的原生開發方式的不足

1. 程式碼層面問題
2. 效率問題
3. 多頁應用問題

程式碼層面問題

1. 缺失規範，程式碼混亂 -> 結構化開發
2. 缺少限制，容易衝突 -> 獨立檔案，獨立作用域
3. 缺少支撐，能力要求高 -> 提供支援，只關注業務

效率問題

1. 關注所有流程 -> 關注業務
2. 團隊效率低 -> 並行開發
3. 測試效率低 -> 模組測試，自動化測試

多頁應用的問題

1. 路由體驗問題（多次請求，時間長，使用者體驗不好） -> 使用單頁路由
2. 無頁面切換效果 -> 可以新增過程動畫
3. 浪費伺服器資源 -> 減少伺服器請求

框架開發的不足

1. 相容性問題，SEO不好
2. 有場景要求，開發自由度降低
3. 黑盒開發，框架本身有出錯的風險
4. 有學習成本

三、3-3 三大框架對比

Angular

1. 背景：2009年釋出，Google
2. 主要版本：1.x, 2.x, 4.x, 5.x(beta)
3. 基於html的大而全的MVC框架（對js和css的關注較少）

React

1. 背景：2013年5月開源，Facebook
2. 最新版本：16.x
3. 基於js的檢視層框架（可以把html、css都轉換到js裡來處理；檢視層框架指只關注頁面的顯示，而不像Angular的MVC框架（資料也在頁面中處理））

Vue

1. 背景：2014年2月開源，尤雨溪，現加入阿里Weex團隊
2. 主要版本：0.1x，1.x，2.x
3. 基於html的檢視層框架

框架對比

其他維度

適用場景

1. Angular：後端開發人員構建CURD型別應用
2. React：前端開發人員構建複雜的Web應用
3. Vue：前端開發人員快速構建Web應用