設計模式

MVP設計模式

　　傳統的前端開發用的是MVP設計模式，代碼分爲三部分，即數據層（Model）、呈現層/控制層（Presenter）、視圖層（View）

　　

 　　例以下方的一個jQuery的案例

　　

　　這裏的M層比較弱，由於沒有用ajax獲取遠程數據

　　V層能夠理解成HTML結構，用來負責頁面的顯示內容

　　P層理解成jQuery代碼，用來響應圖層的指令，處理業務邏輯，是三層中最核心的一層，而業務邏輯也是View和Model的中轉站（參考最開始的示意圖）

　　可是這種設計模式的問題在，大多時候的代碼都是在操做DOM

 

MVVM設計模式

　　Vue框架用的就是MVVM設計模式，以下圖

　　

　　其中的M層負責存儲數據，視圖層V負責顯示數據，中間的ViewModel層爲Vue自帶的一層

　　編寫代碼時，重點在於模型層Model和視圖層View，只要固定寫好View層，經過M層數據的改變，VM層自動改變，而不須要關注VM具體是如何實現的（其實是用了ES5裏的Object.defindeProperties和虛擬DOM）

　　這種設計模式的重點就在模型層Model