MVC、MVP及MVVM之間的關係

介紹

　　寫這篇隨筆徹底是爲了加深本身的印象，畢竟寫比看能得到得更多，另外本人對這三種模式的認識仍是淺薄的，有待在之後的工做學習中有更深刻的理解，所以難免會有誤解，這裏推薦你們閱讀廖雪峯關於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'

 

---

 說明：本文爲原創做品，如有參考會在文中說起，若有遺漏，涉及侵權，請聯繫本人，將當即修正。