MVVM 介紹(轉(zhuǎn)載)

我于 2011 年在 500px 找到自己的第一份 iOS 開發(fā)工作钧嘶。雖然我已經(jīng)在大學里做了好幾年 iOS 外包開發(fā),但這才是我的一個真正的 iOS 開發(fā)工作俗他。我被作為唯一的 iOS 開發(fā)者被招聘去實現(xiàn)擁有漂亮設(shè)計的 iPad 應(yīng)用嚷狞。在短短七周里,我們就發(fā)布了 1.0 并持續(xù)迭代登澜,添加了更多特性,但從本質(zhì)上就缆,代碼庫也變得更加復(fù)雜了帖渠。

有時我感覺就像我不知道在做什么。雖然我知道自己的設(shè)計模式——就像任何好的編程人員那樣 —— 但我太接近我在做的產(chǎn)品以至于不能客觀地衡量我的架構(gòu)決策的有效性竭宰。當隊伍中來了另外一位開發(fā)者時空郊,我意識到我們陷入困境了份招。

從沒聽過 MVC ?有人稱之為 Massive View Controller(重量級視圖控制器)狞甚,這就是我們那時候的感覺锁摔。我不打算介紹令人汗顏的細節(jié),但說實在的哼审,如果我不得不再次重來一次谐腰,我絕對會做出不同的決策。

我會修改一個關(guān)鍵架構(gòu)涩盾,并將其帶入我從那時起就在開發(fā)的各種應(yīng)用十气,即使用一種叫做 Model-View-ViewModel 的架構(gòu)替換 Model-View-Controller。

所以春霍,MVVM 到底是什么砸西?與其專注于說明 MVVM 的來歷,不如讓我們看一個典型的 iOS 是如何構(gòu)建的址儒,并從那里了解 MVVM:


我們看到的是一個典型的 MVC 設(shè)置芹枷。Model 呈現(xiàn)數(shù)據(jù),View 呈現(xiàn)用戶界面莲趣,而 View Controller 調(diào)節(jié)它兩者之間的交互鸳慈。Cool!

稍微考慮一下喧伞,雖然 View 和 View Controller 是技術(shù)上不同的組件走芋,但它們幾乎總是手牽手在一起,成對的絮识。你什么時候看到一個 View 能夠與不同 View Controller 配對绿聘?或者反過來?所以次舌,為什么不正規(guī)化它們的連接呢熄攘?


這更準確地描述了你可能已經(jīng)編寫的 MVC 代碼。但它并沒有做太多事情來解決 iOS 應(yīng)用中日益增長的重量級視圖控制器的問題彼念。在典型的 MVC 應(yīng)用里挪圾,許多邏輯被放在 View Controller 里。它們中的一些確實屬于 View Controller逐沙,但更多的是所謂的“表示邏輯(presentation logic)”哲思,以 MVVM 屬術(shù)語來說,就是那些將 Model 數(shù)據(jù)轉(zhuǎn)換為 View 可以呈現(xiàn)的東西的事情吩案,例如將一個NSDate轉(zhuǎn)換為一個格式化過的NSString棚赔。

我們的圖解里缺少某些東西,那些使我們可以把所有表示邏輯放進去的東西。我們打算將其稱為 “View Model” —— 它位于 View/Controller 與 Model 之間:


看起好多了靠益!這個圖解準確地描述了什么是 MVVM:一個 MVC 的增強版丧肴,我們正式連接了視圖和控制器,并將表示邏輯從 Controller 移出放到一個新的對象里胧后,即 View Model芋浮。MVVM 聽起來很復(fù)雜,但它本質(zhì)上就是一個精心優(yōu)化的 MVC 架構(gòu)壳快,而 MVC 你早已熟悉纸巷。

現(xiàn)在我們知道了什么是 MVVM,但為什么我們會想要去使用它呢眶痰?在 iOS 上使用 MVVM 的動機瘤旨,對我來說,無論如何凛驮,就是它能減少 View Controller 的復(fù)雜性并使得表示邏輯更易于測試裆站。通過一些例子,我們將看到它如何達到這些目標黔夭。

此處有三個重點是我希望你看完本文能帶走的:

MVVM 可以兼容你當下使用的 MVC 架構(gòu)。

MVVM 增加你的應(yīng)用的可測試性羽嫡。

MVVM 配合一個綁定機制效果最好本姥。

如我們之前所見,MVVM 基本上就是 MVC 的改進版杭棵,所以很容易就能看到它如何被整合到現(xiàn)有使用典型 MVC 架構(gòu)的應(yīng)用中婚惫。讓我們看一個簡單的PersonModel 以及相應(yīng)的 View Controller:

@interfacePerson:NSObject- (instancetype)initwithSalutation:(NSString*)salutation firstName:(NSString*)firstName lastName:(NSString*)lastName birthdate:(NSDate*)birthdate;

@property(nonatomic,readonly)NSString*salutation;

@property(nonatomic,readonly)NSString*firstName;

@property(nonatomic,readonly)NSString*lastName;

@property(nonatomic,readonly)NSDate*birthdate;

@end

Cool!現(xiàn)在我們假設(shè)我們有一個PersonViewController魂爪,在viewDidLoad里先舷,只需要基于它的model屬性設(shè)置一些 Label 即可。

- (void)viewDidLoad {

[superviewDidLoad];

if(self.model.salutation.length>0)

?{self.nameLabel.text= [NSStringstringWithFormat:@"%@ %@ %@",self.model.salutation,self.model.firstName,self.model.lastName];

}else{self.nameLabel.text= [NSStringstringWithFormat:@"%@ %@",self.model.firstName,self.model.lastName];

}

NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];

[dateFormatter setDateFormat:@"EEEE MMMM d, yyyy"];

self.birthdateLabel.text= [dateFormatter stringFromDate:model.birthdate];

}

這全都直截了當滓侍,標準的 MVC〗ǎ現(xiàn)在來看看我們?nèi)绾斡靡粋€ View Model 來增強它。

@interfacePersonViewModel:NSObject- (instancetype)initWithPerson:(Person *)person;

@property(nonatomic,readonly) Person *person;

@property(nonatomic,readonly)NSString*nameText;

@property(nonatomic,readonly)NSString*birthdateText;

@end

我們的 View Model 的實現(xiàn)大概如下:

@implementationPersonViewModel

- (instancetype)initWithPerson:(Person *)person {self= [superinit];

if(!self)

returnnil;

_person = person;if(person.salutation.length>0)

?{

_nameText = [NSStringstringWithFormat:@"%@ %@ %@",self.person.salutation,self.person.firstName,self.person.lastName];

}else{

_nameText = [NSStringstringWithFormat:@"%@ %@",self.person.firstName,self.person.lastName];

}

NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];

[dateFormatter setDateFormat:@"EEEE MMMM d, yyyy"];

_birthdateText = [dateFormatter stringFromDate:person.birthdate];returnself;

}

@end

Cool撩笆!我們已經(jīng)將viewDidLoad中的表示邏輯放入我們的 View Model 里了捺球。此時,我們新的viewDidLoad就會非常輕量:

- (void)viewDidLoad?

{? ??

[superviewDidLoad];

self.nameLabel.text=self.viewModel.nameText;

self.birthdateLabel.text=self.viewModel.birthdateText;

}

所以夕冲,如你所見氮兵,并沒有對我們的 MVC 架構(gòu)做太多改變。還是同樣的代碼歹鱼,只不過移動了位置泣栈。它與 MVC 兼容,帶來更輕量的 View Controllers

可測試南片,嗯掺涛?是怎樣?好吧铃绒,View Controller 是出了名的難以測試鸽照,因為它們做了太多事情。在 MVVM 里颠悬,我們試著盡可能多的將代碼移入 View Model 里矮燎。測試 View Controller 就變得容易多了,因為它們不再做一大堆事情赔癌,并且 View Model 也非常易于測試诞外。讓我們來看看:

SpecBegin(Person)NSString*salutation =@"Dr.";NSString*firstName =@"first";NSString*lastName =@"last";NSDate*birthdate = [NSDatedateWithTimeIntervalSince1970:0];

it (@"should use the salutation available. ", ^{

Person *person = [[Person alloc] initWithSalutation:salutation firstName:firstName lastName:lastName birthdate:birthdate];

PersonViewModel *viewModel = [[PersonViewModel alloc] initWithPerson:person];

expect(viewModel.nameText).to.equal(@"Dr. first last");

});

it (@"should not use an unavailable salutation. ", ^{

Person *person = [[Person alloc] initWithSalutation:nilfirstName:firstName lastName:lastName birthdate:birthdate];

PersonViewModel *viewModel = [[PersonViewModel alloc] initWithPerson:person];

expect(viewModel.nameText).to.equal(@"first last");

});

it (@"should use the correct date format. ", ^{

Person *person = [[Person alloc] initWithSalutation:nilfirstName:firstName lastName:lastName birthdate:birthdate];

PersonViewModel *viewModel = [[PersonViewModel alloc] initWithPerson:person];

expect(viewModel.birthdateText).to.equal(@"Thursday January 1, 1970");

});

SpecEnd

如果我們沒有將這個邏輯移入 View Model,我們將不得不實例化一個完整的 View Controller 以及伴隨的 View灾票,然后去比較我們 View 中 Lable 的值峡谊。這樣做不只是會變成一個麻煩的間接層,而且它只代表了一個十分脆弱的測試】裕現(xiàn)在既们,我們可以按意愿自由地修改視圖層級而不必擔心破壞我們的單元測試。使用 MVVM 帶來的對于測試的好處非常清晰正什,甚至從這個簡單的例子來看也可見一斑啥纸,而在有更復(fù)雜的表示邏輯的情況下,這個好處會更加明顯婴氮。

注意到在這個簡單的例子中斯棒, Model 是不可變的,所以我們可以只在初始化的時候指定我們 View Model 的屬性主经。對于可變 Model荣暮,我們還需要使用一些綁定機制,這樣 View Model 就能在背后的 Model 改變時更新自身的屬性罩驻。此外穗酥,一旦 View Model 上的 Model 發(fā)生改變,那 View 的屬性也需要更新鉴腻。Model 的改變應(yīng)該級聯(lián)向下通過 View Model 進入 View迷扇。

在 OS X 上,我們可以使用 Cocoa 綁定爽哎,但在 iOS 上我們并沒有這樣好的配置可用蜓席。我們想到了 KVO(Key-Value Observation),而且它確實做了很偉大的工作课锌。然而厨内,對于一個簡單的綁定都需要很大的樣板代碼祈秕,更不用說有許多屬性需要綁定了。作為替代雏胃,我個人喜歡使用 ReactiveCocoa请毛,但 MVVM 并未強制我們使用 ReactiveCocoa。MVVM 是一個偉大的典范瞭亮,它自身獨立方仿,只是在有一個良好的綁定框架時做得更好。

我們覆蓋了不少內(nèi)容:從普通的 MVC 派生出 MVVM统翩,看它們是如何相兼容的范式仙蚜,從一個可測試的例子觀察 MVVM,并看到 MVVM 在有一個配對的綁定機制時工作得更好厂汗。如果你有興趣學習更多關(guān)于 MVVM 的知識委粉,你可以看看這篇博客,它用更多細節(jié)解釋了 MVVM 的好處娶桦,或者這一篇關(guān)于我們?nèi)绾卧谧罱捻椖坷锸褂?MVVM 獲得巨大的成功的文章贾节。我同樣還有一個經(jīng)過完整測試,基于 MVVM 的應(yīng)用衷畦,叫做C-41栗涂,它是開源的。去看看吧祈争,如果你有任何疑問戴差,請告訴我

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末铛嘱,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子袭厂,更是在濱河造成了極大的恐慌墨吓,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,490評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件纹磺,死亡現(xiàn)場離奇詭異帖烘,居然都是意外死亡,警方通過查閱死者的電腦和手機橄杨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,581評論 3 395
  • 文/潘曉璐 我一進店門秘症,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人式矫,你說我怎么就攤上這事乡摹。” “怎么了采转?”我有些...
    開封第一講書人閱讀 165,830評論 0 356
  • 文/不壞的土叔 我叫張陵聪廉,是天一觀的道長瞬痘。 經(jīng)常有香客問我,道長板熊,這世上最難降的妖魔是什么框全? 我笑而不...
    開封第一講書人閱讀 58,957評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮干签,結(jié)果婚禮上津辩,老公的妹妹穿的比我還像新娘。我一直安慰自己容劳,他們只是感情好喘沿,可當我...
    茶點故事閱讀 67,974評論 6 393
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著鸭蛙,像睡著了一般摹恨。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上娶视,一...
    開封第一講書人閱讀 51,754評論 1 307
  • 那天晒哄,我揣著相機與錄音,去河邊找鬼肪获。 笑死寝凌,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的孝赫。 我是一名探鬼主播较木,決...
    沈念sama閱讀 40,464評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼青柄!你這毒婦竟也來了伐债?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤致开,失蹤者是張志新(化名)和其女友劉穎峰锁,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體双戳,經(jīng)...
    沈念sama閱讀 45,847評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡虹蒋,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,995評論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了飒货。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片魄衅。...
    茶點故事閱讀 40,137評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖塘辅,靈堂內(nèi)的尸體忽然破棺而出晃虫,到底是詐尸還是另有隱情,我是刑警寧澤莫辨,帶...
    沈念sama閱讀 35,819評論 5 346
  • 正文 年R本政府宣布傲茄,位于F島的核電站毅访,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏盘榨。R本人自食惡果不足惜喻粹,卻給世界環(huán)境...
    茶點故事閱讀 41,482評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望草巡。 院中可真熱鬧守呜,春花似錦、人聲如沸山憨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,023評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽郁竟。三九已至玛迄,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間棚亩,已是汗流浹背蓖议。 一陣腳步聲響...
    開封第一講書人閱讀 33,149評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留讥蟆,地道東北人勒虾。 一個月前我還...
    沈念sama閱讀 48,409評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像瘸彤,于是被迫代替她去往敵國和親修然。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,086評論 2 355

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