理解javascript中的MVVM開發(fā)模式

?MVVM的全稱是Model View ViewModel,這種架構(gòu)模式最初是由微軟的MartinFowler作為微軟軟件的展現(xiàn)層設(shè)計模式的規(guī)范提出,它是MVC模式的衍生物,MVVM模式的關(guān)注點在能夠支持事件驅(qū)動的UI開發(fā)平臺,例如HTML5,[2][3]?WindowsPresentation Foundation?(WPF),?Silverlight?和 t?ZK framework,Adobe Flex。

?對這種模式的實現(xiàn),大部分都是通過在view層聲明數(shù)據(jù)綁定來和其他層分離的,這樣就方便了前端開發(fā)人員和后端開發(fā)人員 的分工,前端開發(fā)人員在html標(biāo)簽中寫對viewmodel的綁定數(shù)據(jù),model和viewmodel是后端開發(fā)人員通過開發(fā)應(yīng)用的邏輯來維護這兩層。

同其他的mv*家族成員一樣,Model代表特定領(lǐng)域的數(shù)據(jù)或者應(yīng)用所需的數(shù)據(jù),一個典型的特定領(lǐng)域的數(shù)據(jù)如用戶信息【用戶名,頭像,email,電話】,或者一首音樂的信息【歌曲名,發(fā)行年份,專輯】;

??????????Model僅僅關(guān)注數(shù)據(jù)信息,不關(guān)心任何行為;她不格式化數(shù)據(jù)或者影響數(shù)據(jù)在瀏覽器中的展現(xiàn),這些不是他的職責(zé);格式化數(shù)據(jù)是view層的任務(wù),同時業(yè)務(wù)邏輯層被封裝在viewmodel中,用來和model進行交互。

??????????在Model層做的一個比較意外的行為是對數(shù)據(jù)的驗證,比如當(dāng)用戶輸入email的時候,判斷email的格式是否正確。

??????????在KnockoutJS中,Model基本是按照上面的定義來實現(xiàn)的,但是會有通過ajax調(diào)用服務(wù)器服務(wù)來進行讀寫Model數(shù)據(jù)。


View

??????????View是指應(yīng)用中和用戶直接交互的部分,他是一個交互式的UI來表示ViewModel的狀態(tài),View被認為是主動的,而不是被動的?這句話的意思是說被動的View在應(yīng)用中不關(guān)心model的領(lǐng)域,model的領(lǐng)域在controller中維護;MVVM的主動式的View包含數(shù)據(jù)綁定,事件和需要理解model和viewmodel的行為,盡管這些行為可以和屬性對應(yīng),view仍然需要響應(yīng)viewmodel的事件,同時View不負責(zé)控制狀態(tài)。

??????????KnockoutJS的view層就是一個簡單的html文檔,它里面會有關(guān)聯(lián)到viewmodel的數(shù)據(jù)聲明,同時KnockoutJS的view層顯示從ViewModel中獲取的數(shù)據(jù),傳遞命令給viewmodel,并且更新viewmodel改變的狀態(tài)。


ViewModel

??????????可以認為ViewModel是一個專門用于數(shù)據(jù)轉(zhuǎn)換的Controller,它可以把Model中的信息轉(zhuǎn)換為View中的信息,同時從View專遞命令給Model;

從這個意義上來說,ViewModel看上去更像一個Model,但是它控制著View的很多顯示邏輯,同時ViewModel也暴漏一些方法用來維護view的狀態(tài),根據(jù)View的行為和事件來更新model;

??????????綜上,ViewModel位于UI層的后面,暴漏數(shù)據(jù)給View,可以認為是View層的數(shù)據(jù)和行為的源;


優(yōu)點:

1.MVVM使并行開發(fā)更加容易,使前端開發(fā)和后端開發(fā)人員互不影響。

2.抽象化View層,減少了代碼中的業(yè)務(wù)邏輯

3.ViewModel比事件驅(qū)動更容易測試

4.ViewModel的測試不用關(guān)心uI的自動化和交互

缺點:

1.對于簡單的ui,使用MVVM有點太重

2.聲明式的數(shù)據(jù)綁定不利于調(diào)試,因為命令式的代碼可以和容易的設(shè)置斷點,這種模式就不利于設(shè)置這樣的斷點

3.在不挑剔(non-trivial)的應(yīng)用里數(shù)據(jù)綁定可以創(chuàng)建大量的簿記(book-keeping)。你也不想結(jié)束于綁定比被綁定的對象更復(fù)雜的情況。

4.在大的應(yīng)用中,在獲取大量的概要(generalization)前很難設(shè)計視圖-模型層

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前言 談起MVC,MVP和MVVM這三個最耳熟能詳?shù)腁ndroid框架,相信大家對它們都不陌生,但在實際的情況下,...
    ghroost閱讀 4,024評論 0 40
  • 前言: 本文主要是對常見設(shè)計模式的一些分析,以及講述在Android項目中實現(xiàn)Mvvm模式的兩種方式。通過Data...
    Yagami3zZ閱讀 45,488評論 29 117
  • 前言 一直覺得對于具體功能模塊的設(shè)計模式來說,沒有什么值得研究和討論的。覺得iOS提供的MVC模式已經(jīng)能夠很好的利...
    淡淡如水舟閱讀 2,978評論 3 30
  • 最近老在思索自己與產(chǎn)品經(jīng)理的匹配度,從行業(yè)出發(fā),是否喜歡該行業(yè)?以互聯(lián)網(wǎng)行業(yè)為例,畢業(yè)之后是想做朝九晚五的工作還是...
    forwarder閱讀 480評論 0 0
  • 第一章,初遇 8月的風(fēng),吹在蘇糖糖的臉頰上, 蘇糖糖身穿淡粉色的連衣裙,裙子在膝蓋上一點點,背著一個灰色的雙肩...
    十秒萌定你閱讀 400評論 1 1

友情鏈接更多精彩內(nèi)容