參考：https://shenlvmeng.github.io/blog/2017/05/12/Frontend-FAQ-part1/

框架模式不是一門寫代碼的學問，而是一門管理與組織代碼的學問。其本質是一種軟件開發(fā)的模型。與設計模式不同，設計模式是在解決某類特定問題時總結抽象出的公共方法，是方法論的范疇，一種框架模式往往使用了多種設計模式，且和技術棧有耦合的關系。

視圖（View）從本質上講是數(shù)據(jù)在圖像上的一種體現(xiàn)和映射。用戶在操作圖像時可以達到操作數(shù)據(jù)的目的，在數(shù)據(jù)更改后，需要重新將數(shù)據(jù)映射到視圖上。這實際上就是MVC的出發(fā)點。

image.png

• View: 放置視圖相關的代碼，原則上里面不應該有任何業(yè)務邏輯。
• Controller: 放置視圖與模型之間的映射，原則上這里應該很薄，他只放一些事件綁定相關的代碼(router)，但并不實現(xiàn)真正的功能，他只是一個橋梁。
• Model: 這里的model不是說實體類，它是主要實現(xiàn)業(yè)務邏輯的地方。

開發(fā)流程是先創(chuàng)建視圖組件，再將之關聯(lián)到Model上，通過View修改Model中的值時，Model會觸發(fā)綁定在之上的所有View的更新。Backbone是個MVC典型的例子。這么做部分分離了視圖和邏輯。但是，在情況復雜時，Model的代碼量將會大大膨脹。

MVP因此而生，其中Presenter（分發(fā)器）代替了原來的Controller，分擔了Model的部分功能。針對上面的問題，Presetner隔斷了Model和View，當M改變時，會通知P去更新視圖。業(yè)務邏輯和綁定邏輯從V和M中分離出來到P中。使得MVP三方分工更加鮮明。絕大多數(shù)的PHP框架都是MVP類型的。

image.png

MVVM是Model-View-ViewModel的縮寫。在MVVM中，View和ViewModel是雙向或單向數(shù)據(jù)綁定的關系。當ViewModel反應了Model中的數(shù)據(jù)模型，并綁定到視圖屬性上，反過來，視圖屬性變化后也會通過ViewModel影響Model。React，Vue這些流行的前端框架都是MVVM類型的。

image.png

不管是MVC還是MVP或MVVM，他們都是數(shù)據(jù)驅動的。核心上基于M推送消息，V或P來訂閱這個模型。使用者需要維護的不再是UI樹，而是抽象的數(shù)據(jù)。當UI的狀態(tài)一旦多起來，這種框架模式的優(yōu)勢就很明顯了。