MVC、MVP及MVVM之間的關係

來源:互聯網
上載者:User

標籤:管理系統   互動   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之間的關係

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: