angular是MVC模式還是MVVM架構(gòu)模式

下面僅是個人對angular是MVC或者MVVM的理解癌佩。

首先在討論angular是哪種模式之前备闲,我們得先了解什么是MVVM和MVC蝇棉。

MVVM vs MVC

總體介紹

首先喜最,兩者都是一種架構(gòu)思想俐末。都是從后端演變而來愈案。

具體的演變流程:傳統(tǒng)MVC ——> MVP ——> MVVM

MVC

- M - Model? 數(shù)據(jù):數(shù)據(jù)實體,用來保存頁面要展示的數(shù)據(jù)。比如ajax獲取的數(shù)據(jù)鹅搪。

- V - View 視圖,顯示數(shù)據(jù)的頁面遭铺,一般為html丽柿。

- C - Controller 控制器: 控制整個業(yè)務邏輯,負責處理數(shù)據(jù),比如數(shù)據(jù)的獲取,以及數(shù)據(jù)的過濾,進而影響數(shù)據(jù)在視圖上的展示魂挂。

MVVM

M - Model 數(shù)據(jù):它是與應用程序的業(yè)務邏輯相關(guān)的數(shù)據(jù)的封裝載體

V - View 視圖:它專注于界面的顯示和渲染

VM - ViewModel 視圖-數(shù)據(jù):它是View和Model的粘合體甫题,負責View和Model的交互和協(xié)作

Angular是MVC還是MVVM

先下定論,準確的說可以理解為MVC形式的前端框架涂召,但是也可以說是MVVM形式的框架坠非。緣由慢慢道來。

一果正、MVC

首先:

V即視圖層是沒有任何爭議的炎码,即代表的就是頁面展示層盟迟,即視圖層。用來顯示渲染數(shù)據(jù)潦闲,展示用戶所看到的內(nèi)容攒菠。在angular中視圖就是在@componet裝飾器中組裝的html模板。

M:即數(shù)據(jù)模型歉闰,在angular中可以認為是從服務端獲取的數(shù)據(jù)辖众,因為angular提倡的是組件化、模塊化開發(fā)和敬。所以不建議將與后臺交互的業(yè)務邏輯凹炸、數(shù)據(jù)請求與組件混合,而是專門放在服務即service中單獨處理昼弟,通過依賴注入(DI)的形式將獲取到的數(shù)據(jù)注入到所應用的組件啤它。所以可以將service服務層認為就是MVC中的M層。

C: 即控制器私杜,控制器的作用就是提供頁面顯示的屬性蚕键、跟頁面相關(guān)的業(yè)務邏輯。那么在angular中可以理解為組件衰粹。因為在angular中組件通過裝飾器@component修飾锣光,并組裝所需要的元數(shù)據(jù),而模板所需要的屬性铝耻、數(shù)據(jù)都是在組件即@component所修飾的類中定義的誊爹。而組件只是負責為視圖提供屬性值數(shù)據(jù)和跟頁面相關(guān)的業(yè)務邏輯處理后的數(shù)據(jù),不直接參與數(shù)據(jù)與后端的交互瓢捉。所有频丘,C就是angular中的組件。

綜上所述泡态,angular完全可以認為是MVC形式的前端框架搂漠。

二、MVVM

那么angular為什么又可以理解為是MVVM形式的框架呢某弦?

個人覺得桐汤,MVVM的劃分相對MVC來說更細一點,或者說MVVM可以認為是從VMC中抽離出來的一部分靶壮。那如何得以體現(xiàn)呢怔毛,下面闡述完MVVM之后 ,和上面一對比腾降,則一目了然拣度。

V: 即視圖層,這個還是不變的,都是代表了用戶能看到的內(nèi)容抗果。在angular中它就是html模板筋帖。通過html模板來達到與用戶之間的交互。

M: 即模型窖张,模型對應的就是模型數(shù)據(jù)幕随。如果要把angular理解為MVVM形式的話,那這塊就要理解為是MVC形式中M和C的結(jié)合體宿接。為什么呢赘淮?下面從MVVM形式的角度來理解。在MVVM中M既擔任了視圖層V所需要的基本數(shù)據(jù)睦霎,也擔任了從后臺獲取的數(shù)據(jù)梢卸,即通過ajax請求后臺獲取數(shù)據(jù)的工作。只不過在angular中副女,建議是控制器負責與頁面交互的基本數(shù)據(jù)和業(yè)務邏輯處理蛤高,而與后臺交互的例如ajax處理放到了服務service中。我們也完全可以直接在組件控制器中執(zhí)行完所有操作碑幅,不必分層處理戴陡,所以可以認為M(MVC)+ C(MVC)= M(MVVM)。在angular中可以理解為M就是組件控制器和服務service兩者的結(jié)合沟涨。

VM: 即視圖模型恤批,視圖模型的作用是用來連接V視圖層和M數(shù)據(jù)模型層的橋梁。所以為什么上面說可以認為MVVM是MVC的演變或者細化裹赴,其實兩者的角度不同而已喜庞。MVVM中的VM是將M中的數(shù)據(jù)提供給V用于展示,同時將V中用戶改變的數(shù)據(jù)同步到M中棋返。同樣在angular中也是這樣實現(xiàn)的延都,在angular中當改變了數(shù)據(jù)之后頁面就會變化,而頁面用戶操作之后睛竣,M中的數(shù)據(jù)就會自動更新晰房。

綜上所述,angular也可以認為是MVVM的前端框架射沟。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末嫉你,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子躏惋,更是在濱河造成了極大的恐慌,老刑警劉巖嚷辅,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件簿姨,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機扁位,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進店門准潭,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人域仇,你說我怎么就攤上這事刑然。” “怎么了暇务?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵泼掠,是天一觀的道長。 經(jīng)常有香客問我垦细,道長择镇,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任括改,我火速辦了婚禮腻豌,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘嘱能。我一直安慰自己吝梅,他們只是感情好,可當我...
    茶點故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布惹骂。 她就那樣靜靜地躺著苏携,像睡著了一般。 火紅的嫁衣襯著肌膚如雪析苫。 梳的紋絲不亂的頭發(fā)上兜叨,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天,我揣著相機與錄音衩侥,去河邊找鬼国旷。 笑死,一個胖子當著我的面吹牛茫死,可吹牛的內(nèi)容都是我干的跪但。 我是一名探鬼主播,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼峦萎,長吁一口氣:“原來是場噩夢啊……” “哼屡久!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起爱榔,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤被环,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后详幽,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體筛欢,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡浸锨,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了版姑。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片柱搜。...
    茶點故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖剥险,靈堂內(nèi)的尸體忽然破棺而出聪蘸,到底是詐尸還是另有隱情,我是刑警寧澤表制,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布健爬,位于F島的核電站,受9級特大地震影響夫凸,放射性物質(zhì)發(fā)生泄漏浑劳。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一夭拌、第九天 我趴在偏房一處隱蔽的房頂上張望魔熏。 院中可真熱鬧,春花似錦鸽扁、人聲如沸蒜绽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽躲雅。三九已至,卻和暖如春骡和,著一層夾襖步出監(jiān)牢的瞬間相赁,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工慰于, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留钮科,地道東北人。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓婆赠,卻偏偏與公主長得像绵脯,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子休里,可洞房花燭夜當晚...
    茶點故事閱讀 42,792評論 2 345

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