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在解決思路(演算法)上進行解決