淺談 MVC & MVVM

為什麼要分層？

實踐單一職責原則，將工作項拆分，各單元只專注在自己的工作上。
而前後端分離的概念更甚者把資料的提供與畫面的呈現完全拆分開來。

MVC 這個名字是來源自桌面應用程式的架構，而在 web 世界裡，其實 MVC 真正的名字應是叫做 Model2，但是因為同樣都有 model、controller、view 的結構，所以名字常被誤用，久而久之，大家也都習慣稱其為 MVC，以下內容也都以 MVC 稱呼之。

MVC 是最基本且常見的分工架構，MVC 架構中將工作分成三層：

在 server side render 的架構下，整個網頁包含資料和視覺呈現都是在後端處理，瀏覽器只是顯示整份 html。

現代的網頁為了讓使用者有更好的使用體驗，不要每個動作或是切換頁面都重新刷新整個頁面。誕生了client side render 的做法，一開始載入 document 時只是一個空的 html，所有的資料都是之後用動態載入，再埋入 html 裡面。

可以看到，這樣的架構下，server 是不處理有關 view 呈現的工作，都是交由前端在瀏覽器完成。而圖中那個 view 區塊事實上是可以進一步拆成前端的 MVC 或是 MVVM。

來看看，把前後端整合起來，會長怎樣呢？

基於前端需求所發展出的架構。
分層如下：

Model:
通常是與 server 介接取得資料，或是處理 client 端預先載入的資料。
View:
負責視覺的呈現。
View-model:
在 view 與 view-model 之間的橋樑，達成資料雙向綁定的效果。當 view 有動作被觸發，會自動更新 model，model 有資料更新也會自動更新 view。由於實現了雙向綁定，view-model的內容會即時呈現在 view 層，前端開發者再也不必繁複地通過 js 或是 jQuery 操縱 DOM 去更新 view，而 view 和 model 也就此解耦合，前端的工作分工更為乾淨。常見使用 MVVM 的框架有 angular, vue。