MVC、MVVM和單向資料流的對比
今天聽了部門的高T分享的react和其他框架思想的對比，真的是受益匪淺，所以特地把高T分享的總結一下。
前端開發本質上是一種展現層開發，我思考了一下這句話，這句話用人話說就是前端開發本身就是寫介面的。但是別人能把寫介面的能總結成下面一個迴圈，我發現這真的是能力了。如下圖，有略微的改動：
(
下面就開始進入正題了。
基於MVC的前端開發
簡單的MVC
先看下圖：
- 使用者操作介面
- 當用戶操作的檢視的時候會派發一個事件給Action
- 當Action接受到這個事件的時候，呼叫Model對應的方法
演進的前端MVC
- 使用者操作介面
- 當用戶操作的檢視的時候會派發一個事件給Action
- 當Action接受到這個事件的時候，呼叫Model對應的方法
- Model得知view改變了，然後進行相應的操作，改變自身所儲存的資料
- 當Model改變了，派發一個事件給Action
進一步複雜的前端MVC
- 使用者操作介面
- 當用戶操作的檢視的時候會派發一個事件給Action
- 當Action接受到這個事件的時候，呼叫Model對應的方法
- Model得知view改變了，然後進行相應的操作，改變自身所儲存的資料
- 當Model改變了，派發一個事件給Action
- 當Action知道Model的資料變化的時候，呼叫views中的方法
- view改變自身
但是這樣是有下面兩個問題的，
- 互動增加導致view的控制程式碼迅速膨脹，最終導致程式碼不可維護
- Model的控制程式碼也會變多，
以至於出現下面的狀況：
前端的MVVM
雖然mvc有以上的弊端，但是因為沒有一個好的架構思想去取代他，所以也只能用MVC了，但是隨著前端angular的橫空出世，倡導的MVVM思想也隨之深入人心，先看下圖：
- view和viewModel的資料雙向繫結
- 當用戶操作view的時候，viewmodel也進行物件對應的變化
這樣，我們能通過操作Model來控制view的顯示，一個頁面的比如能拆分為小功能(註冊/登陸、表單提交、XXX功能)這樣每個功能對應一個Model，我們就能模組化的管理Model，就變為了下圖：
所以當用戶操作介面的時候，我們viewModel就知道是哪部分發生了變化，對應的viewModel就進行改變。
React一種新的思想
瞭解React的都知道，React對強大的功能就是vdom，能夠計算出最有效也是花費最小的vdom和真實dom的差異並進行改變。
下圖為MVVM的整體設計思路：
- 使用者操作view
- dispatch view事件給狀態管理
- 狀態管理工具更新狀態/進行到下一個狀態
- 根據新的狀態，render view
React遵從的是單向的資料流：
- 存在一個Model到React的對映關係，即view的渲染方法
- view並不知道自己對應Modle哪一塊
- 於是每次Model的變更，view全部更新。React的vdom演算法保證了render的高效
MVVM和React
要解決的問題： 複雜的web互動導致view更新邏輯的爆炸
解決思路：
- MVVM：記錄Model、雙向繫結，Model變更時更新view對應部分
- React：實現view高效更新演算法，Model變更時更新整個view
MVVM的實現是在工程上進行解決，React在解決思路(演算法)上進行解決