[譯] iOS 裡的 MVVM 和 RxSwift

• 原文地址：MVVM + RxSwift on iOS part 1
• 原文作者：Mohammad Zakizadeh
• 譯文出自：掘金翻譯計劃
• 本文永久連結：github.com/xitu/gold-m…
• 譯者：iWeslie
• 校對者：swants

在本文中，我將介紹 iOS 程式設計中的 MVVM 設計模式以及 RxSwift。本文分為兩部分，第一部分簡要介紹了設計模式和 RxSwift 的基礎知識，而在 第二部分 裡，有一個實現了 MVVM 和 RxSwift 的示例專案。

設計模式：

---

首先，我們為什麼要使用設計模式呢？簡而言之，就是為了避免我們的程式碼亂成一團，當然這不是唯一的原因，其中有一個原因是可測試性。設計模式有很多，我們可以指出幾個非常受歡迎的模式：MVC、MVVM、MVP 和 VIPER。下面的圖片將這幾個設計模式的分佈協作性，可測試性和易用性進行了比較。

這些設計模式都有自己的優缺點，但最終它們都能使我們的程式碼更清晰、簡單並且易於閱讀。本文重點介紹 MVVM，我希望你能在閱讀完 第二部分 後著手實現它。

讓我們簡單介紹一下 MVC，然後繼續討論 MVVM

---

MVC：

蘋果官方建議使用 MVC 進行 iOS 程式設計，如果你有一定的 iOS 開發經驗，你可能會熟悉 MVC。這個模式由 Model、View 和 Controller 組成，其中 Controller 負責將 Model 連線到 View。理論上看起來 View 和 Controller 是兩個不同的東西，但在 iOS 的世界中，不幸的是，大多數情況下它們是一回事。當然，在小型專案中，一切似乎都符合規律，但是一旦你的專案變得龐大，Controller 因實現了大部分業務邏輯而變得臃腫，這會導致程式碼變得混亂，但是如果你能正確編寫 MVC，並儘可能地把 Controller 裡的東西解耦，大多數情況下這個問題將得到解決。

官方文件中的 MVC

MVVM：

MVVM 代表 Model、View 和 ViewModel，其中，View 和業務邏輯實現了 Controller，View 以及動畫，ViewModel 裡則是 api 的呼叫。實際上 ViewModel 這層是 Model 和 View 之間的介面並且它給 View 提供資料。有一點要注意的是，如果你在 ViewModel 的檔案中看到以下程式碼，那你可能是在某處犯了一個錯誤：

import UIKit
複製程式碼

這是因為 ViewModel 不應該和 View 有任何牽連，在 第二部分 中我們將藉助一個例子來研究這篇文章。

RxSwift：

---

MVVM 的一個特性是資料和 View 的繫結，而 RxSwift 就很完美地實現了這一點。當然，您也可以使用 delegate，KVO 或閉包執行此操作，但 Rx 的有一個特性就是，它是一種思想，在很多語言裡通用，因此它與程式語言關係並不大。你可以在 這裡 找到它支援的語言列表。現在在這一部分我們將解釋 RxSwift 的基礎知識，當然，它們也是 Rx 世界的基礎知識。然後在 第二部分 中，我們將憑藉 MVVM 使用 RxSwift 建立一個專案。

響應式程式設計：

既然 RxSwift 是基於響應式程式設計的，那這究竟是什麼意思呢？

在計算機中，響應式程式設計或反應式程式設計（Reactive programming）是一種面向資料流和變化傳播的程式設計正規化。這意味著可以在程式語言中很方便地表達靜態或動態的資料流，而相關的計算模型會自動將變化的值通過資料流進行傳播。—— 維基百科

也許你在讀完後對本段的任何內容還是不怎麼了解，那下面我們就通過以下的例子來進一步理解它：

假設你現在有三個變數（a，b，c）：

var a: Int = 1
var b: Int = 2
var c: Int = a + b // 輸出 3
複製程式碼

現在如果我們將 a 從 1 改為 2 並且我們列印 c，它的值仍然是 3。但是在響應式程式設計的世界中一切都變得不一樣了，c 的值取決於 a 和 b，這意味著如果你把 a 從 1 改為 2，那 c 的值就會自動從 3 變為 4 而不需要你自行更改。

var a: Int = 1
var b: Int = 2
var c: Int = a + b // 輸出 3
a = 2
print("c=\(c)")
// 輸出 c=3
// 在響應式程式設計中 c=4
複製程式碼

現在讓我們開始學習 RxSwift 的基礎知識：

在 RxSwift（當然還有其他 Rx）的世界中，一切事物都是事件流，其中包括 UI 事件和網路請求等等。請切記這一點，我將用現實生活中的例子來解釋：

你的手機是一個 可觀察物件（Observable），它會產生一些事件，例如鈴聲或者推送通知等，這會讓你引起注意，事實上你訂閱（subscribe）了你的手機，並決定如何處理這些事件，比如你有時候刪除或者檢視一些通知，事實上這些事件是一些 訊號（signal），而你是做出決定的 觀察者（Observer）。

下面讓我們來程式碼來實現它：

Observable 和 Observer（訂閱者）：

在 Rx 世界中，一些變數是 Observable，而另一些是 Observer（或訂閱者）。

因此 Observable 是通用的，如果它確遵循了 ObservableType 協議，你可以監聽你想要的任何型別。

現在讓我們定義一些 Observable：

let helloObservableString = Observable.just("Hello Rx World")
let observableInt = Observable.of(0, 1, 2)
let dictSequence = Observable.from([1: "Hello", 2: "World"])
複製程式碼

在上面例子中，我們分別定義了 Observable 型別的 String，Int 和 Dictionary，現在我們應該 訂閱 我們的 Observable，這樣我們就可以從發出的訊號中讀取資訊。

helloObservableString.subscribe({ event in
    print(event)
})
// 輸出：
// next(Hello Rx World)
// completed
複製程式碼

你可能在想輸出為什麼會出現 next 和 completed，為什麼 ‘hello world’ 就不能好好列印一個字串，我得說這就是 Observable 最重要的特性：

實際上每個 Observable 都是一個 序列，與 Swift 裡 Sequence 的主要區別在於 Observable 的值可以是非同步的。如果你不理解這點並不重要，但是希望你能理解下面的描述，我以圖的方式呈現了這一特性：

在上面的圖中，我們有三個 Observable，第一行是 Int 型別，從 1 數到 6。在第二行是 String，從 ‘a’ 到 ‘f’，隨即發生了一些錯誤。最後一行是 Observable 型別的手勢，它還沒有完成，還在繼續。

這些顯示 Observable 變數事件的影象叫做大理石圖。想要了解更多資訊，您可以訪問 這個網站 或從 App Store 下載 這個 App（它也是開源的 ??，這裡 有 App 的原始碼）。

在 Rx 世界中，對於每個 Observable，都是由 3 種可能的列舉值組成：

---

1. .next(value: T)

2. .error(error: Error)

3. .completed

當 Observable 新增值時，呼叫 next 並通過相關的 value 屬性（1 到 6，‘a’ 到 ‘f’）將值傳遞給 Observer（或訂閱者）。

如果 Observable 遇到了錯誤❌，則發出錯誤事件然後完成（‘f’ 之後的 X）。

如果 Observable 完成，則呼叫 completed 事件（6 之後）。

如果你想要取消訂閱一個 Observable，我們可以呼叫 dispose 方法，或者如果你想在你的 View deinit 的時候呼叫這個方法你應該使用 DisposeBag 在你的類反初始化時來進行你想要的操作。在這裡強調一點，如果你忘記使用 dispose 的話會導致記憶體洩漏☠️?。例如，你應該這樣訂閱 Observable：

let disposeBag = DisposeBag()
helloObservableString.subscribe({ event in
    print(event)
}).disposed(by: disposeBag)
複製程式碼

現在讓我們看看將 Rx 與函數語言程式設計相結合有多完美。假設你有 Observable 的 Int 並且你訂閱了它，現在 Observable 會給你一堆 Int，你可以使用很多方法改變來自 Observable 的發出訊號，例如：

---

Map:

你可以使用 map 方法讓訊號在到達訂閱者之前做出一些改變。例如，我們有 Observable 的 Int，它發出了 2，3，4 三個數字，現在我們想要它們在傳給訂閱者之前都乘以 10，我們可以這麼做：

Observable<Int>.of(2, 3, 4).map { value in
        return value * 10
    }.subscribe(onNext: {
        print($0)
    }).disposed(by: disposeBag)
// 輸出：20 30 40
複製程式碼

Filter:

您可能又會想是否能讓它們在傳給訂閱者之前過濾掉一些值，例如，過濾掉示例中大於 25 的數字：

Observable<Int>.of(2, 3, 4).map { value in
        return value * 10
    }
    .filter( return $0 > 25 )
    .subscribe(onNext: {
        print($0)
    }).disposed(by: disposeBag)
// 輸出：30 40
複製程式碼

FlatMap:

又比如您有兩個 Observable 物件，並且您希望將它們合二為一：

在上面的例子中，Observable A 和 Observable B 被組合在一起並形成一個新的 Observable：

let sequenceA = Observable<Int>.of(1, 2)
let sequenceB = Observable<Int>.of(1, 2)
let sequenceOfAB = Observable.of(sequenceA, sequenceB)
sequenceOfAB.flatMap { return $0 }.subscribe(onNext: {
    print($0)
}).disposed(by: disposeBag)
複製程式碼

distinctUntilChanged 或 debounce：

這兩個方法是搜尋中最有用的方法之一。例如，使用者想要搜尋單詞，您可能在使用者輸入每個字元時都呼叫搜尋 API。如果使用者快速鍵入，這樣的話你就會進行很多不必要的請求。為了達到此目的，正確的方法應該是在使用者停止鍵入時呼叫搜尋 API。這時您可以使用 debounce：

usernameOutlet.rx.text
    .debounce(0.3, scheduler: MainScheduler.instance)
    .subscribe(onNext: { [unowned self] text in
        self?.search(withQuery: text)
    }).addDisposableTo(disposeBag)
複製程式碼

在上面的例子中，如果使用者名稱 TextField 的內容在 0.3 秒內發生變化，則這些訊號不會到達訂閱者，因此不會呼叫搜尋方法。只有當使用者在 0.3 秒後停止輸入，訂閱者才會收到訊號並呼叫搜尋方法。

distinctUntilChanged 功能對變化很敏感，這意味著如果兩個訊號在訊號沒有變化之前得到相同的訊號，它將不會被髮送給使用者。

---

Rx 世界比你想象的要大得多，我在 文章的第二部分 中講述了我認為需要的一些基本概念，裡面有一個使用 RxSwift 的實際專案。

來自 raywenderlich 的 RxSwift 入門文章非常棒，我強烈推薦閱讀。

你可能不會在文章中注意到 RxSwift，因為它是 Swift 的高階概念之一，你可能每天都要閱讀不同的文章才能弄明白它。您可以通過 此連結 看到 RxSwift 部分中的幾篇好文章。

你可以通過 文章的第二部分 將 Rx 引入到 MVVM 的實際專案中，因為通過例項你將更好、更容易地理解 RxSwift 的概念。

你可以通過 Twitter 或者傳送 email 來聯絡到本文作者，郵箱是 mohammad_z74@icloud.com ✌️

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

---

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。