引言

最近在自研一個(gè)新的項(xiàng)目，在考慮使用的技術(shù)棧時(shí)，調(diào)研了許多，比如react-native，flutter，以及端原生的oc跟swift，但是最終選擇了swiftUI + combine，之所以有如此決定，一方面是希望可以完善自己對(duì)于iOS系統(tǒng)開發(fā)的技術(shù)完整性，另一方面希望了解iOS開發(fā)未來的一個(gè)技術(shù)方向，那么閑言少敘切入正題。什么是swiftUI？

SwiftUI是什么？

更準(zhǔn)確地解釋可以移步到蘋果開發(fā)者中心，概念性的東西，這里不做過多介紹。通過對(duì)其的一段時(shí)間開發(fā)，個(gè)人總結(jié)，swiftUI絕不是swift+UI這么簡(jiǎn)單的概念，從設(shè)計(jì)上，swiftUI十分趨近于web前端，蘋果似乎有意將swift做得更加簡(jiǎn)化，swiftUI也是將開發(fā)者得注意力從之前無窮盡地修改UI轉(zhuǎn)到更加關(guān)注其app內(nèi)部的邏輯處理。

簡(jiǎn)而言之，如果你的項(xiàng)目需求崇尚極簡(jiǎn)主義，注重邏輯而不采用復(fù)雜且臃腫的交互設(shè)計(jì)，那么swiftUI絕對(duì)是值得一試的技術(shù)手段。

對(duì)于swiftUI的各個(gè)組件，官方都給出的事例，這里先不做研究，之后我會(huì)在自研項(xiàng)目上線之后，對(duì)于其中所用到的組件，遇到的問題，進(jìn)行逐步匯總，其中會(huì)有一些在國內(nèi)論壇并不容易找到的問題答案。但是現(xiàn)在我們先從基礎(chǔ)數(shù)據(jù)入手，我們先了解一下什么是combine。

如何理解combine

談到combine不得不提的就是swift中的屬性修飾器-- @propertyWrapper：

@propertyWrapper

實(shí)話實(shí)說，如果你還沒有用過propertyWrapper，那一定要嘗試的使用一下，因?yàn)檫@個(gè)功能確實(shí)太好用了，這里引用官方解釋的一段話：

For example, if you have properties that provide thread-safety checks or store their underlying data in a database, you have to write that code on every property. When you use a property wrapper, you write the management code once when you define the wrapper, and then reuse that management code by applying it to multiple properties.

塑料翻譯：

例如，如果你要為數(shù)據(jù)存儲(chǔ)的一些基礎(chǔ)屬性提供線程安全或者存儲(chǔ)它們，你不得不在每一個(gè)屬性中都寫同樣的方法，這會(huì)讓代碼變得十分惡心。但是當(dāng)你使用propertyWrapper時(shí)，當(dāng)你為操作代碼定義了一個(gè)修飾器，那么這些操作代碼會(huì)應(yīng)用在它修飾的多個(gè)屬性中。

上面的解釋，是我在學(xué)習(xí)propertyWrapper所能看到的最為通俗的解釋。下面也是提供了一段官方代碼，幫助理解。

@propertyWrapper
struct TwelveOrLess {
    private var number = 0
    var wrappedValue: Int {
        get { return number }
        set { number = min(newValue, 12) }
    }
}
struct SmallRectangle {
    @TwelveOrLess var height: Int
    @TwelveOrLess var width: Int
}
var rectangle = SmallRectangle()
print(rectangle.height)
// Prints "0"
rectangle.height = 10
print(rectangle.height)
// Prints "10"
rectangle.height = 24
print(rectangle.height)
// Prints "12"

簡(jiǎn)單解釋一下上面的代碼，聲明一個(gè)屬性修飾器TwelveOrLess，內(nèi)部的邏輯是輸出的屬性都比12小，如果大于12則輸出12。

下面的SmallRectangle包裝了兩個(gè)屬性height與width，當(dāng)我們?yōu)檫@兩個(gè)屬性賦值，再調(diào)用get方法時(shí)，可以看到，我們的邏輯代碼生效了，輸出數(shù)字被控制在小于或等于12的值。

無需多余代碼，屬性修飾器給了swift開發(fā)者更多的想象空間。

簡(jiǎn)單的介紹了一下propertyWrapper，接下來我們回歸正題，繼續(xù)說回combine。

Publishers 與 subscribers

如果想使用combine就不得不了解兩個(gè)概念，Publishers 與 subscribers。如果你之前有做過Rxswift，或者對(duì)于RAC有一定了解的話，對(duì)于這兩個(gè)概念一定不陌生。即便是對(duì)于上述框架并不了解，想要理解Publishers 與 subscribers也不難，因?yàn)榭梢园阉斫鉃橛^察者模式中的發(fā)送者與監(jiān)聽者。

由于官方的事例采用的是通知中心的demo，這在我初學(xué)combine時(shí)給我?guī)砹藰O大的困擾，因此，本文的事例并不打算采用官方事例，避免給讀者帶來同樣的困擾。而是通過一段自己的部分開源代碼對(duì)其進(jìn)行講解。

struct XXAssetModel{
    var id = UUID()
    var currency: Int
 }
class XXResourceViewModel: ObservableObject {
      @Published var myAsset: XXAssetModel = UserData.userCurrency
      fileprivate func editCurrency() {
        myAsset.currency = myAsset.currency + 10
      }
}
 struct ConverterView : View {
    @ObservedObject var viewModel = XXResourceViewModel()
    var body: some View {
         return Text(viewModel.myAsset.currency) 
    }
}

這個(gè)例子相對(duì)簡(jiǎn)單，便于入門，我們來看一下，首先，在XXResourceViewModel中聲明一個(gè)被 @Published修飾的屬性myAsset，因?yàn)槲覀儎倓傄呀?jīng)介紹過屬性修飾器了，所以應(yīng)該不難理解這個(gè)修飾的作用。下面引用官方的一段話。

Add the @Published annotation to a property of one of your own types. In doing so, the property gains a publisher that emits an event whenever the property’s value changes.

將 @Published 注釋添加到類中的屬性。這樣做使該屬性成為了一個(gè)publisher，只要該屬性的值發(fā)生變化，publisher就會(huì)發(fā)出一個(gè)事件。

回到上面一段代碼，publisher就像是電影《風(fēng)聲》中的老鬼，他的責(zé)任就是將自己獲取的情報(bào)傳遞給他的上級(jí)老槍，那么，誰是subscribers老槍。上例中，Text控件就是老槍。他與viewModel.myAsset.currency形成了一種綁定關(guān)系，一旦viewModel.myAsset.currency發(fā)生改變，Text接收到信號(hào)之后，就會(huì)做出對(duì)應(yīng)行動(dòng)。

看到這有沒有人在想到了一種設(shè)計(jì)模式？沒錯(cuò)，就是MVVM。

Subject的使用

combine作為蘋果官方推出的響應(yīng)式編程框架，很大程度的融合了其他響應(yīng)式編程框架的優(yōu)點(diǎn)。除了這種自動(dòng)發(fā)送信號(hào)的publisher，還有一種可以主動(dòng)發(fā)送信號(hào)的Subject，看一下下面的例子。

final class UserData: ObservableObject {
    let objectWillChange = PassthroughSubject<UserData, Never>()
  var allCurrencies: [Currency] {
        didSet {
            objectWillChange.send(self)
        }
    }
 }
 struct ConverterView : View {
    @EnvironmentObject var userData: UserData
    var body: some View {
         return list(userData.allCurrencies) {
            Item()
         } 
    }
}

UserData作為信號(hào)發(fā)送方，沒有采用publisher的方式，而是利用重寫set方法對(duì)其進(jìn)行了主動(dòng)發(fā)送。

當(dāng)然如何選擇要具體問題，具體分析，蘋果提供了相對(duì)豐富的方法，應(yīng)對(duì)不同的使用場(chǎng)景。

Operators的使用

當(dāng)然不只是監(jiān)聽信號(hào)這么簡(jiǎn)單，蘋果還為開發(fā)者提供了多種Operators，意在更加輕松的讓開發(fā)者完成函數(shù)式編程。代碼如下：

    static func request(_ kind: XXKind, _ queryItems: [URLQueryItem]?) -> AnyPublisher<XXResource, Error> {
        guard var components = URLComponents(url: baseUrl.appendingPathComponent(kind.rawValue), resolvingAgainstBaseURL: true)
            else { fatalError("Couldn't create URLComponents") }
        components.queryItems = queryItems
        let request = URLRequest(url: components.url!)
        return apiClient.run(request)
            .map(.value) // 為XXResource中定義的實(shí)際值
            .eraseToAnyPublisher()
    }

上述例子中，將返回的數(shù)據(jù)，通過map()函數(shù)進(jìn)行了過濾操作，提取出返回值中value的數(shù)據(jù)，并將其發(fā)送給subscribers。如圖所示：

總結(jié)

本文作為SwiftUI學(xué)習(xí)的第一章，著重的介紹了combine及其使用方法。文章主要以實(shí)戰(zhàn)為主，少了許多花里胡哨的介紹跟修飾，希望可以讓同學(xué)們可以更加快速容易的理解。如開頭所說，后續(xù)還會(huì)總結(jié)一下swiftUI中控件在使用時(shí)，與正常UIKit不太一樣的坑。畢竟國內(nèi)對(duì)于swiftUI的學(xué)習(xí)并不多，所以希望可以跟同學(xué)們一同進(jìn)步。

以上就是SwiftUI開發(fā)總結(jié)combine原理簡(jiǎn)單示例詳解的詳細(xì)內(nèi)容，更多關(guān)于SwiftUI開發(fā)combine原理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論