MVC和MVVM
這倆最大的區別其實就是後者多了一個響應式的現代前端框架——以前是控制器去控制頁面更新,完全要手操,但現在只要資料變更,框架自動接管,這就是響應式更新。兩個V裡面,一個仍然是View,而另一個則是ViewModel——這就是一個專門響應式更新頁面的分層設計。C不再手動管理頁面的更新,完全委託給框架去管理。
而這裡的MVVM其實嚴格來說指的是帶有檢視和資料繫結的框架,一般的實現都是雙向的。但React比較特殊,它的資料流是單向的,而Angular就不太一樣。雙向繫結確實很爽,但一旦規模膨脹,就會變得非常混亂,有時候我不希望資料被雙向更新——而React從一開始的設計裡面就要求你手動實現,也算是一種強制你去管理,但犧牲了便捷性。
Angular的新特性Signals其實挺值得一說的。乍看之下它這個跟React 的狀態機制很像,都是根據資料變動只更新特定的和該資料有關的介面,但兩者的原理很不同。R那裡是依賴一個vDOM,每次更新其實都要diff比對一邊,規模大了下來是有效能開銷的。但A這裡的訊號就是直接定位到DOM去更新,根本不用比對。訊號在這裡本質上是一個繫結到DOM的訂閱,就好像我跟你之間的約定,資料變了我就直接通知你,而不需要每次所有人都問一遍去比對。
後端的MVC則是指的是當前的標準結構:Models、Controller、Service。分別負責定義資料結構,HTTP預處理和分流,以及實際的業務處置。這個跟前端其實差不多,最大區別其實是V由C來控制,把東西在後端搞好之後,拋到前端去。所以最開始兩者是一體的。到後面Web應用越來越複雜,這一套才被直接搬到前端去,V在這裡從整個html變成了直接操作的DOM物件。但就因為資料層和渲染層的互動特別麻煩,後續才有了各種框架誕生,將單純的M和VM區分開來,因此才延展出了兩個V(其中一個是對V的對映,即ViewModel)的MVVM,而資料變動導致的渲染更新則交給架構中的狀態來專門管理,不再由C直接操作。C的職能從這裡被拆分出去,在不複雜的情況下根本不用單獨加,而更複雜的時候則成了統一管理狀態的部分。