ViewModel層,就是View和Model層的粘合劑,他是一個放置用戶輸入驗證邏輯,視圖顯示邏輯,發起網絡請求和其他各種各樣的代碼的極好的地方。說白了,就是把原來ViewController層的業務邏輯和頁面邏輯等剝離出來放到ViewModel層。
View層,就是ViewController層,他的任務就是從ViewModel層獲取數據,然後顯示。
從沒聽過 MVC ?有人稱之為 Massive View Controller(重量級視圖控制器),這就是我們那時候的感覺。我不打算介紹令人汗顏的細節,但說實在的,如果我不得不再次重來一次,我絕對會做出不同的決策。
我會修改一個關鍵架構,並將其帶入我從那時起就在開發的各種應用,即使用一種叫做 Model-View-ViewModel 的架構替換 Model-View-Controller。
所以,MVVM 到底是什麼?與其專注於說明 MVVM 的來歷,不如讓我們看一個典型的 iOS 是如何構建的,並從那裡了解 MVVM:
我們看到的是一個典型的 MVC 設置。Model 呈現數據,View 呈現用戶界面,而 View Controller 調節它兩者之間的交互。Cool!
稍微考慮一下,雖然 View 和 View Controller 是技術上不同的組件,但它們幾乎總是手牽手在一起,成對的。你什麼時候看到一個 View 能夠與不同 View Controller 配對?或者反過來?所以,為什麼不正規化它們的連接呢?
這更准確地描述了你可能已經編寫的 MVC 代碼。但它並沒有做太多事情來解決 iOS 應用中日益增長的重量級視圖控制器的問題。在典型的 MVC 應用裡,許多邏輯被放在 View Controller 裡。它們中的一些確實屬於 View Controller,但更多的是所謂的“表示邏輯(presentation logic)”,以 MVVM 屬術語來說,就是那些將 Model 數據轉換為 View 可以呈現的東西的事情,例如將一個NSDate
轉換為一個格式化過的 NSString
。
我們的圖解裡缺少某些東西,那些使我們可以把所有表示邏輯放進去的東西。我們打算將其稱為 “View Model” —— 它位於 View/Controller 與 Model 之間:
看起好多了!這個圖解准確地描述了什麼是 MVVM:一個 MVC 的增強版,我們正式連接了視圖和控制器,並將表示邏輯從 Controller 移出放到一個新的對象裡,即 View Model。MVVM 聽起來很復雜,但它本質上就是一個精心優化的 MVC 架構,而 MVC 你早已熟悉。
現在我們知道了什麼是 MVVM,但為什麼我們會想要去使用它呢?在 iOS 上使用 MVVM 的動機,對我來說,無論如何,就是它能減少 View Controller 的復雜性並使得表示邏輯更易於測試。通過一些例子,我們將看到它如何達到這些目標。
此處有三個重點是我希望你看完本文能帶走的:
如我們之前所見,MVVM 基本上就是 MVC 的改進版,所以很容易就能看到它如何被整合到現有使用典型 MVC 架構的應用中。讓我們看一個簡單的 Person
Model 以及相應的 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!現在我們假設我們有一個 PersonViewController
,在 viewDidLoad
裡,只需要基於它的 model
屬性設置一些
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];
}
這全都直截了當,標准的 MVC。現在來看看我們如何用一個 View Model 來增強它。
@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 的實現大概如下:
@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!我們已經將 viewDidLoad
中的表示邏輯放入我們的 View Model 裡了。此時,我們新的 viewDidLoad
就會非常輕量:
- (void)viewDidLoad {
[super viewDidLoad];
self.nameLabel.text = self.viewModel.nameText;
self.birthdateLabel.text = self.viewModel.birthdateText;
}
所以,如你所見,並沒有對我們的 MVC 架構做太多改變。還是同樣的代碼,只不過移動了位置。它與 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 = [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
如果我們沒有將這個邏輯移入 View Model,我們將不得不實例化一個完整的 View Controller 以及伴隨的 View,然後去比較我們 View 中 Lable 的值。這樣做不只是會變成一個麻煩的間接層,而且它只代表了一個十分脆弱的測試。現在,我們可以按意願自由地修改視圖層級而不必擔心破壞我們的單元測試。使用 MVVM 帶來的對於測試的好處非常清晰,甚至從這個簡單的例子來看也可見一斑,而在有更復雜的表示邏輯的情況下,這個好處會更加明顯。
注意到在這個簡單的例子中, Model 是不可變的,所以我們可以只在初始化的時候指定我們 View Model 的屬性。對於可變 Model,我們還需要使用一些綁定機制,這樣 View Model 就能在背後的 Model 改變時更新自身的屬性。此外,一旦 View Model 上的 Model 發生改變,那 View 的屬性也需要更新。Model 的改變應該級聯向下通過 View Model 進入 View。
在 OS X 上,我們可以使用 Cocoa 綁定,但在 iOS 上我們並沒有這樣好的配置可用。我們想到了 KVO(Key-Value Observation),而且它確實做了很偉大的工作。然而,對於一個簡單的綁定都需要很大的樣板代碼,更不用說有許多屬性需要綁定了。作為替代,我個人喜歡使用 ReactiveCocoa,但 MVVM 並未強制我們使用 ReactiveCocoa。MVVM 是一個偉大的典范,它自身獨立,只是在有一個良好的綁定框架時做得更好。
我們覆蓋了不少內容:從普通的 MVC 派生出 MVVM,看它們是如何相兼容的范式,從一個可測試的例子觀察 MVVM,並看到 MVVM 在有一個配對的綁定機制時工作得更好。如果你有興趣學習更多關於 MVVM 的知識,你可以看看這篇博客,它用更多細節解釋了 MVVM 的好處,或者這一篇關於我們如何在最近的項目裡使用 MVVM 獲得巨大的成功的文章。我同樣還有一個經過完整測試,基於 MVVM 的應用,叫做 C-41 ,它是開源的。去看看吧,如果你有任何疑問,請告訴我。