介紹 MVVM

本文翻譯自：http://www.objc.io/issue-13/mvvm.html

原作者：Ash Furrow

譯者：@nixzhu

我于 2011 年在 500px 找到自己的第一份 iOS 開發工作。雖然我已經在大學里做了好幾年 iOS 外包開發，但這才是我的一個真正的 iOS 開發工作。我被招聘為去實現擁有漂亮設計的 iPad 應用，而且是其唯一的 iOS 開發者。在短短七周里，我們就發布了 1.0 并持續迭代，添加了更多特性，但從本質上，代碼庫也變得更加復雜了。

有時我感覺就像我不知道在做什么。我知道自己的設計模式——就像任何好的編程人員那樣——但我太接近我在做的產品以至于不能客觀地衡量我的架構決策的有效性。它給我帶來了另外一位開發者，我意識到我們陷入困境了。

從沒聽過 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 架構。
• MVVM 讓你的應用更加可測試。
• MVVM 配合一個綁定機制效果最好。

如我們之前所見，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

- (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];
}

這全都直截了當，vanilla 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 ，它是開源的。去看看吧，如果你有任何疑問，請告訴我。

譯者注：歡迎非商業轉載，但請一定注明出處：https://github.com/nixzhu/dev-blog ！

歡迎轉發此條微博 http://weibo.com/2076580237/B8kEN1sqr 以分享給更多人！