iOS-MVVM-框架介紹
我于 2011 年在 500px 找到自己的第一份 iOS 開發(fā)工作。雖然我已經(jīng)在大學(xué)里做了好幾年 iOS 外包開發(fā)，但這才是我的一個(gè)真正的 iOS 開發(fā)工作。我被作為唯一的 iOS 開發(fā)者被招聘去實(shí)現(xiàn)擁有漂亮設(shè)計(jì)的 iPad 應(yīng)用。在短短七周里，我們就發(fā)布了 1.0 并持續(xù)迭代，添加了更多特性，但從本質(zhì)上，代碼庫也變得更加復(fù)雜了。
有時(shí)我感覺就像我不知道在做什么。雖然我知道自己的設(shè)計(jì)模式——就像任何好的編程人員那樣 —— 但我太接近我在做的產(chǎn)品以至于不能客觀地衡量我的架構(gòu)決策的有效性。當(dāng)隊(duì)伍中來了另外一位開發(fā)者時(shí)，我意識(shí)到我們陷入困境了。
從沒聽過 MVC ？有人稱之為 Massive View Controller（重量級視圖控制器），這就是我們那時(shí)候的感覺。我不打算介紹令人汗顏的細(xì)節(jié)，但說實(shí)在的，如果我不得不再次重來一次，我絕對會(huì)做出不同的決策。
我會(huì)修改一個(gè)關(guān)鍵架構(gòu)，并將其帶入我從那時(shí)起就在開發(fā)的各種應(yīng)用，即使用一種叫做 Model-View-ViewModel 的架構(gòu)替換 Model-View-Controller。
所以，MVVM 到底是什么？與其專注于說明 MVVM 的來歷，不如讓我們看一個(gè)典型的 iOS 是如何構(gòu)建的，并從那里了解 MVVM：
我們看到的是一個(gè)典型的 MVC 設(shè)置。Model 呈現(xiàn)數(shù)據(jù)，View 呈現(xiàn)用戶界面，而 View Controller 調(diào)節(jié)它兩者之間的交互。Cool！
稍微考慮一下，雖然 View 和 View Controller 是技術(shù)上不同的組件，但它們幾乎總是手牽手在一起，成對的。你什么時(shí)候看到一個(gè) View 能夠與不同 View Controller 配對？或者反過來？所以，為什么不正規(guī)化它們的連接呢？
這更準(zhǔn)確地描述了你可能已經(jīng)編寫的 MVC 代碼。但它并沒有做太多事情來解決 iOS 應(yīng)用中日益增長的重量級視圖控制器的問題。在典型的 MVC 應(yīng)用里，許多邏輯被放在 View Controller 里。它們中的一些確實(shí)屬于 View Controller，但更多的是所謂的“表示邏輯（presentation logic）”，以 MVVM 屬術(shù)語來說，就是那些將 Model 數(shù)據(jù)轉(zhuǎn)換為 View 可以呈現(xiàn)的東西的事情，例如將一個(gè) NSDate 轉(zhuǎn)換為一個(gè)格式化過的 NSString。
我們的圖解里缺少某些東西，那些使我們可以把所有表示邏輯放進(jìn)去的東西。我們打算將其稱為 “View Model” —— 它位于 View/Controller 與 Model 之間：
看起好多了！這個(gè)圖解準(zhǔn)確地描述了什么是 MVVM：一個(gè) MVC 的增強(qiáng)版，我們正式連接了視圖和控制器，并將表示邏輯從 Controller 移出放到一個(gè)新的對象里，即 View Model。MVVM 聽起來很復(fù)雜，但它本質(zhì)上就是一個(gè)精心優(yōu)化的 MVC 架構(gòu)，而 MVC 你早已熟悉。
現(xiàn)在我們知道了什么是 MVVM，但為什么我們會(huì)想要去使用它呢？在 iOS 上使用 MVVM 的動(dòng)機(jī)，對我來說，無論如何，就是它能減少 View Controller 的復(fù)雜性并使得表示邏輯更易于測試。通過一些例子，我們將看到它如何達(dá)到這些目標(biāo)。
此處有三個(gè)重點(diǎn)是我希望你看完本文能帶走的：
MVVM 可以兼容你當(dāng)下使用的 MVC 架構(gòu)。
MVVM 增加你的應(yīng)用的可測試性。
MVVM 配合一個(gè)綁定機(jī)制效果最好。
如我們之前所見，MVVM 基本上就是 MVC 的改進(jìn)版，所以很容易就能看到它如何被整合到現(xiàn)有使用典型 MVC 架構(gòu)的應(yīng)用中。讓我們看一個(gè)簡單的 Person Model 以及相應(yīng)的 View Controller：
看起好多了！這個(gè)圖解準(zhǔn)確地描述了什么是 MVVM：一個(gè) MVC 的增強(qiáng)版，我們正式連接了視圖和控制器，并將表示邏輯從 Controller 移出放到一個(gè)新的對象里，即 View Model。MVVM 聽起來很復(fù)雜，但它本質(zhì)上就是一個(gè)精心優(yōu)化的 MVC 架構(gòu)，而 MVC 你早已熟悉。
現(xiàn)在我們知道了什么是 MVVM，但為什么我們會(huì)想要去使用它呢？在 iOS 上使用 MVVM 的動(dòng)機(jī)，對我來說，無論如何，就是它能減少 View Controller 的復(fù)雜性并使得表示邏輯更易于測試。通過一些例子，我們將看到它如何達(dá)到這些目標(biāo)。
此處有三個(gè)重點(diǎn)是我希望你看完本文能帶走的：
MVVM 可以兼容你當(dāng)下使用的 MVC 架構(gòu)。
MVVM 增加你的應(yīng)用的可測試性。
MVVM 配合一個(gè)綁定機(jī)制效果最好。
如我們之前所見，MVVM 基本上就是 MVC 的改進(jìn)版，所以很容易就能看到它如何被整合到現(xiàn)有使用典型 MVC 架構(gòu)的應(yīng)用中。讓我們看一個(gè)簡單的 Person Model 以及相應(yīng)的 View Controller：
- @interface Person : 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è)我們有一個(gè) PersonViewController ，在 viewDidLoad 里，只需要基于它的 model 屬性設(shè)置一些 Label 即可。
- - (void)viewDidLoad {
- [super viewDidLoad];
- if (self.model.salutation.length > 0) {
- self.nameLabel.text = [NSString stringWithFormat:@"%@ %@ %@", self.model.salutation, self.model.firstName, self.model.lastName];
- } else {
- self.nameLabel.text = [NSString stringWithFormat:@"%@ %@", self.model.firstName, self.model.lastName];
- }
- NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
- [dateFormatter setDateFormat:@"EEEE MMMM d, yyyy"];
- self.birthdateLabel.text = [dateFormatter stringFromDate:model.birthdate];
- }
這全都直截了當(dāng)，標(biāo)準(zhǔn)的 MVC。現(xiàn)在來看看我們?nèi)绾斡靡粋€(gè) View Model 來增強(qiáng)它。
- @interface PersonViewModel : NSObject
- - (instancetype)initWithPerson:(Person *)person;
- @property (nonatomic, readonly) Person *person;
- @property (nonatomic, readonly) NSString *nameText;
- @property (nonatomic, readonly) NSString *birthdateText;
- @end
我們的 View Model 的實(shí)現(xiàn)大概如下：
- @implementation PersonViewModel
- - (instancetype)initWithPerson:(Person *)person {
- self = [super init];
- if (!self) return nil;
- _person = person;
- if (person.salutation.length > 0) {
- _nameText = [NSString stringWithFormat:@"%@ %@ %@", self.person.salutation, self.person.firstName, self.person.lastName];
- } else {
- _nameText = [NSString stringWithFormat:@"%@ %@", self.person.firstName, self.person.lastName];
- }
- NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
- [dateFormatter setDateFormat:@"EEEE MMMM d, yyyy"];
- _birthdateText = [dateFormatter stringFromDate:person.birthdate];
- return self;
- }
- @end
Cool！我們已經(jīng)將 viewDidLoad 中的表示邏輯放入我們的 View Model 里了。此時(shí)，我們新的 viewDidLoad 就會(huì)非常輕量：
- (void)viewDidLoad {
[super viewDidLoad];
self.nameLabel.text = self.viewModel.nameText;
self.birthdateLabel.text = self.viewModel.birthdateText;
}
所以，如你所見，并沒有對我們的 MVC 架構(gòu)做太多改變。還是同樣的代碼，只不過移動(dòng)了位置。它與 MVC 兼容，帶來更輕量的 View Controllers。
可測試，嗯？是怎樣？好吧，View Controller 是出了名的難以測試，因?yàn)樗鼈冏隽颂嗍虑椤Ｔ?MVVM 里，我們試著盡可能多的將代碼移入 View Model 里。測試 View Controller 就變得容易多了，因?yàn)樗鼈儾辉僮鲆淮蠖咽虑椋⑶?View Model 也非常易于測試。讓我們來看看：
- SpecBegin(Person)
- NSString *salutation = @"Dr.";
- NSString *firstName = @"first";
- NSString *lastName = @"last";
- NSDate *birthdate = [NSDate dateWithTimeIntervalSince1970: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:nil firstName: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:nil firstName:firstName lastName:lastName birthdate:birthdate];
- PersonViewModel *viewModel = [[PersonViewModel alloc] initWithPerson:person];
- expect(viewModel.birthdateText).to.equal(@"Thursday January 1, 1970");
- });
- SpecEnd
如果我們沒有將這個(gè)邏輯移入 View Model，我們將不得不實(shí)例化一個(gè)完整的 View Controller 以及伴隨的 View，然后去比較我們 View 中 Lable 的值。這樣做不只是會(huì)變成一個(gè)麻煩的間接層，而且它只代表了一個(gè)十分脆弱的測試。現(xiàn)在，我們可以按意愿自由地修改視圖層級而不必?fù)?dān)心破壞我們的單元測試。使用 MVVM 帶來的對于測試的好處非常清晰，甚至從這個(gè)簡單的例子來看也可見一斑，而在有更復(fù)雜的表示邏輯的情況下，這個(gè)好處會(huì)更加明顯。
注意到在這個(gè)簡單的例子中， Model 是不可變的，所以我們可以只在初始化的時(shí)候指定我們 View Model 的屬性。對于可變 Model，我們還需要使用一些綁定機(jī)制，這樣 View Model 就能在背后的 Model 改變時(shí)更新自身的屬性。此外，一旦 View Model 上的 Model 發(fā)生改變，那 View 的屬性也需要更新。Model 的改變應(yīng)該級聯(lián)向下通過 View Model 進(jìn)入 View。
在 OS X 上，我們可以使用 Cocoa 綁定，但在 iOS 上我們并沒有這樣好的配置可用。我們想到了 KVO（Key-Value Observation），而且它確實(shí)做了很偉大的工作。然而，對于一個(gè)簡單的綁定都需要很大的樣板代碼，更不用說有許多屬性需要綁定了。作為替代，我個(gè)人喜歡使用 ReactiveCocoa，但 MVVM 并未強(qiáng)制我們使用 ReactiveCocoa。MVVM 是一個(gè)偉大的典范，它自身獨(dú)立，只是在有一個(gè)良好的綁定框架時(shí)做得更好。
我們覆蓋了不少內(nèi)容：從普通的 MVC 派生出 MVVM，看它們是如何相兼容的范式，從一個(gè)可測試的例子觀察 MVVM，并看到 MVVM 在有一個(gè)配對的綁定機(jī)制時(shí)工作得更好。如果你有興趣學(xué)習(xí)更多關(guān)于 MVVM 的知識(shí)，你可以看看這篇博客，它用更多細(xì)節(jié)解釋了 MVVM 的好處，或者這一篇關(guān)于我們?nèi)绾卧谧罱捻?xiàng)目里使用 MVVM 獲得巨大的成功的文章。我同樣還有一個(gè)經(jīng)過完整測試，基于 MVVM 的應(yīng)用，叫做 C-41 ，它是開源的。
