MVC晰奖,MVP 和 MVVM 的圖示

轉(zhuǎn)自阮一峰http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

復(fù)雜的軟件必須有清晰合理的架構(gòu),否則無法開發(fā)和維護稚配。

MVC(Model-View-Controller)是最常見的軟件架構(gòu)之一畅涂,業(yè)界有著廣泛應(yīng)用港华。它本身很容易理解道川,但是要講清楚,它與衍生的 MVP 和 MVVM 架構(gòu)的區(qū)別就不容易了立宜。

昨天晚上冒萄,我讀了《Scaling Isomorphic Javascript Code》,突然意識到橙数,它們的區(qū)別非常簡單尊流。我用幾段話,就可以說清灯帮。

(題圖:攝于瓦倫西亞崖技,西班牙逻住,2014年8月)

一、MVC

MVC模式的意思是迎献,軟件可以分成三個部分瞎访。

  • 視圖(View):用戶界面。
  • 控制器(Controller):業(yè)務(wù)邏輯
  • 模型(Model):數(shù)據(jù)保存

各部分之間的通信方式如下吁恍。

  1. View 傳送指令到 Controller
  2. Controller 完成業(yè)務(wù)邏輯后扒秸,要求 Model 改變狀態(tài)
  3. Model 將新的數(shù)據(jù)發(fā)送到 View,用戶得到反饋

所有通信都是單向的冀瓦。

二伴奥、互動模式

接受用戶指令時,MVC 可以分成兩種方式翼闽。一種是通過 View 接受指令拾徙,傳遞給 Controller。

另一種是直接通過controller接受指令感局。

三锣吼、實例:Backbone

實際項目往往采用更靈活的方式,以

為例蓝厌。

1. 用戶可以向 View 發(fā)送指令(DOM 事件)玄叠,再由 View 直接要求 Model 改變狀態(tài)。

2. 用戶也可以直接向 Controller 發(fā)送指令(改變 URL 觸發(fā) hashChange 事件)拓提,再由 Controller 發(fā)送給 View读恃。

3. Controller 非常薄,只起到路由的作用代态,而 View 非常厚寺惫,業(yè)務(wù)邏輯都部署在 View。所以蹦疑,Backbone 索性取消了 Controller西雀,只保留一個 Router(路由器)

四、MVP

MVP 模式將 Controller 改名為 Presenter歉摧,同時改變了通信方向艇肴。

1. 各部分之間的通信,都是雙向的叁温。

2. View 與 Model 不發(fā)生聯(lián)系再悼,都通過 Presenter 傳遞。

3. View 非常薄膝但,不部署任何業(yè)務(wù)邏輯冲九,稱為"被動視圖"(Passive View),即沒有任何主動性跟束,而 Presenter非常厚莺奸,所有邏輯都部署在那里丑孩。

五、MVVM

MVVM 模式將 Presenter 改名為 ViewModel灭贷,基本上與 MVP 模式完全一致嚎杨。

image.png

唯一的區(qū)別是,它采用雙向綁定(data-binding):View的變動氧腰,自動反映在 ViewModel枫浙,反之亦然。AngularEmber都采用這種模式古拴。

(完)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末箩帚,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子黄痪,更是在濱河造成了極大的恐慌紧帕,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,383評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件桅打,死亡現(xiàn)場離奇詭異是嗜,居然都是意外死亡,警方通過查閱死者的電腦和手機挺尾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評論 3 385
  • 文/潘曉璐 我一進店門鹅搪,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人遭铺,你說我怎么就攤上這事丽柿。” “怎么了魂挂?”我有些...
    開封第一講書人閱讀 157,852評論 0 348
  • 文/不壞的土叔 我叫張陵甫题,是天一觀的道長。 經(jīng)常有香客問我涂召,道長坠非,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,621評論 1 284
  • 正文 為了忘掉前任果正,我火速辦了婚禮炎码,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘舱卡。我一直安慰自己辅肾,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,741評論 6 386
  • 文/花漫 我一把揭開白布轮锥。 她就那樣靜靜地躺著,像睡著了一般要尔。 火紅的嫁衣襯著肌膚如雪舍杜。 梳的紋絲不亂的頭發(fā)上新娜,一...
    開封第一講書人閱讀 49,929評論 1 290
  • 那天,我揣著相機與錄音既绩,去河邊找鬼概龄。 笑死,一個胖子當(dāng)著我的面吹牛饲握,可吹牛的內(nèi)容都是我干的私杜。 我是一名探鬼主播,決...
    沈念sama閱讀 39,076評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼救欧,長吁一口氣:“原來是場噩夢啊……” “哼衰粹!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起笆怠,我...
    開封第一講書人閱讀 37,803評論 0 268
  • 序言:老撾萬榮一對情侶失蹤铝耻,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后蹬刷,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,265評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,582評論 2 327
  • 正文 我和宋清朗相戀三年辜梳,在試婚紗的時候發(fā)現(xiàn)自己被綠了官疲。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,716評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡迂卢,死狀恐怖兽赁,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情冷守,我是刑警寧澤刀崖,帶...
    沈念sama閱讀 34,395評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站拍摇,受9級特大地震影響亮钦,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜充活,卻給世界環(huán)境...
    茶點故事閱讀 40,039評論 3 316
  • 文/蒙蒙 一蜂莉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧混卵,春花似錦映穗、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春辕录,著一層夾襖步出監(jiān)牢的瞬間睦霎,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評論 1 266
  • 我被黑心中介騙來泰國打工走诞, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留副女,地道東北人。 一個月前我還...
    沈念sama閱讀 46,488評論 2 361
  • 正文 我出身青樓蚣旱,卻偏偏與公主長得像碑幅,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子塞绿,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,612評論 2 350

推薦閱讀更多精彩內(nèi)容