MVC、MVP及MVVM之間的關係

標籤：管理系統   互動   rip   理解   前端架構   前端   模型   span   hello   

介紹

　　寫這篇隨筆完全是為了加深自己的印象，畢竟寫比看能獲得得更多，另外本人對這三種模式的認識還是淺薄的，有待在以後的工作學習中有更深入的理解，因此不免會有誤解，這裡推薦大家閱讀廖雪峰關於MVVM的介紹，以及阮一峰的MVC，MVP 和 MVVM的圖示及談談MVC模式，相信您會有更深刻的理解。

概要

MVC、MVP及MVVM都是一種架構模式，為瞭解決圖形介面應用程式複雜性管理問題而產生的應用架構模式。

發展曆程

MVC模式概要

1.即Model、View、Controller即模型、視圖、控制器。

• View：它是提供給使用者的操作介面，是程式的外殼；
• Model：是程式需要操作的資料和資訊；
• Controller：接收View層傳遞過來的指令，選取Model層對應的資料，進行相應操作。

2.舉一個現實中的類似的例子，MVC如同一家商鋪的運作模式，View層相當於是這家商鋪的店面，Model層相當於這家商鋪的倉庫，Controller層相當於是這家商鋪的執行部門。

3.MVC有如下兩種模式，不管哪種模式，MVC的通訊都是單向的，由圖也可以看出，View層會從Model層拿資料，因此MVC中的View層和Model層還是存在耦合的。

MVP模式概要

1.MVP是從MVC進化而來，即Model、View、Presenter；View和Model同MVC中的M和V，MVP只是將MVC中的Controller變成了Presenter；

2.由上面對MVC的介紹中我們可以得知，MVC中的View層和Model層是存在耦合的，但其實我們不提倡View層與Model層有直接的互動；MVP就是這樣一種思想的體現，View層與Model的互動只能通過Presenter；

3.MVP與MVC還有一點不同是，它的通訊是雙向的，如所示，有兩個方向：V—>P—>M，M—>P—>V

MVVM模式概要

 1.MVVM是由MVP進化而來，MVVM模式基本上與MVP相同，只是把MVP中的P變成了VM，即ViewModel，

2.MVVM中的資料可以實現雙向繫結，即View層資料變化則ViewModel中的資料也隨之變化，反之ViewModel中的資料變化，則View層資料也隨之變化

 

3.這裡以前端架構VUE舉例說明MVVM，當然還有許多有名的架構都用的是MVVM模式；MVVM的好處就是資料驅動，資料變，則頁面變，這樣就能用簡單的代碼，實現比較複雜的邏輯操作；因此MVVM架構比較適合邏輯複雜的前端項目，比如一些管理系統等。

1）準備視圖層

<p>Hello, {{ name }}!</p>          --View層 --VUE中的單向綁定

<input v-model="name">             --View層 --VUE中的雙向繫結

2）準備資料層

data: {            name: ‘‘               --Model層        }

3）至於VM層，VUE架構已封裝好，預知詳情可閱讀廖雪峰的部落格；

4）得益於MVVM架構，我們此時想改變視圖層的<p>標籤和<input>標籤中的name屬性的值，只需要通過如下方式即可，這樣頁面中就會顯示“Jack”的名字，如果不是MVVM架構，我們則需要通過document.getElementById(‘name‘).innerHTML = ‘jack‘，這種操作dom節點的方式來改變頁面的值。

this.name = ‘jack‘

 

 說明：本文為原創作品，若有參考會在文中提及，如有遺漏，涉及侵權，請聯絡本人，將立即修正。

MVC、MVP及MVVM之間的關係