Combine和SwiftUI

尽管今年的 WWDC 已经落幕，但在过去的一个多月时间，苹果给 iOS 开发者带来了许多惊喜，其中堪称最重量级的当属 SwiftUI 和 Combine 两大新框架

在更早之前，由于缺少系统层的声明式 UI 语言，在 iOS 系统上的 UI 开发对于开发者而言，并不友善，而从 iOS13 开始，开发者们终于可以摆脱落后的布局系统，拥抱更简洁高效的开发新时代。与 SwiftUI 配套发布的响应式编程框架 Combine 提供了更优美的开发方式，这也意味着 Swift 真正成为了 iOS 开发者们必须学习的语言。本文基于 Swift5.1 版本，介绍 SwiftUI 是如何通过结合 Combine 完成数据绑定

SwiftUI

首先来个例子，假如我们要实现上图的登陆界面，按照以往使用 UIKit 进行开发，那么我们需要：

• 创建一个 UITextField ，用于输入账户
• 创建一个 UITextField ，用于输入密码
• 创建一个 UIButton ，设置点击事件将前两个 UITextField 的文本作为数据请求

而在使用 SwiftUI 进行开发的情况下，代码如下：

public struct LoginView : View {
    @State var username: String = ""
    @State var password: String = ""
    
    public var body: some View {
        VStack {
            TextField($username, placeholder:  Text("Enter username"))
                .textFieldStyle(.roundedBorder)
                .padding([.leading, .trailing], 25)
                .padding([.bottom], 15)
            SecureField($password, placeholder: Text("Enter password"))
                .textFieldStyle(.roundedBorder)
                .padding([.leading, .trailing], 25)
                .padding([.bottom], 30)
            Button(action: {}) {
                Text("Sign In")
                    .foregroundColor(.white)
                }.frame(width: 120, height: 40)
                .background(Color.blue)
        }
    }
}

在 SwiftUI 中，使用 @State 修饰的属性会在发生改变的时候通知绑定的 UI 控件强制刷新渲染，这种新命名归功于新的 PropertyWrapper 机制。可以看到 SwiftUI 的控件命名上和 UIKit 几乎保持一致的，下表是两个标准库上的 UI 对应表：

View

@available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *)
public protocol View : _View {

    /// The type of view representing the body of this view.
    ///
    /// When you create a custom view, Swift infers this type from your
    /// implementation of the required `body` property.
    associatedtype Body : View

    /// Declares the content and behavior of this view.
    var body: Self.Body { get }
}

虽然在 SwiftUI 中使用 View 来表示可视控件，但实际上大相径庭， View 是一套容器协议，不展示任何内容，只定义了一套视图的交互、布局等接口。 UI 控件需要实现协议中的 body 返回需要展示的内容。另外 View 还扩展了 Combine 响应式编程的订阅接口：

@available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *)
extension View {

    /// Adds an action to perform when the given publisher emits an event.
    ///
    /// - Parameters:
    ///   - publisher: The publisher to subscribe to.
    ///   - action: The action to perform when an event is emitted by
    ///     `publisher`. The event emitted by publisher is passed as a
    ///     parameter to `action`.
    /// - Returns: A view that triggers `action` when `publisher` emits an
    ///   event.
    public func onReceive
(_ publisher: P, perform action: @escaping (P.Output) -> Void) -> SubscriptionView
 where P : Publisher, P.Failure == Never

    /// Adds an action to perform when the given publisher emits an event.
    ///
    /// - Parameters:
    ///   - publisher: The publisher to subscribe to.
    ///   - action: The action to perform when an event is emitted by
    ///     `publisher`.
    /// - Returns: A view that triggers `action` when `publisher` emits an
    ///   event.
    public func onReceive
(_ publisher: P, perform action: @escaping () -> Void) -> SubscriptionView
 where P : Publisher, P.Failure == Never
}

@State

@available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *)
@propertyDelegate public struct State : DynamicViewProperty, BindingConvertible {

    /// Initialize with the provided initial value.
    public init(initialValue value: Value)

    /// The current state value.
    public var value: Value { get nonmutating set }

    /// Returns a binding referencing the state value.
    public var binding: Binding { get }

    /// Produces the binding referencing this state value
    public var delegateValue: Binding { get }

    /// Produces the binding referencing this state value
    /// TODO: old name for storageValue, to be removed
    public var storageValue: Binding { get }
}

Swift5.1 的新特性之一，开发者可以将变量的 IO 实现封装成通用逻辑，用关键字 @propertyDelegate 修饰读写逻辑，并以 @wrapperName var variable 的方式封装变量。以 WWDC Session 415 视频中的例子实现对变量 copy-on-write 的封装：

@propertyDelegate
public struct DefensiveCopying {
    private var storage: Value
    
    public init(initialValue value: Value) {
        storage = value.copy() as! Value
    }
    
    public var value: Value {
        get { storage }
        set {
            storage = newValue.copy() as! Value
        }
    }
}

public struct Person {
    @DefensiveCopying(initialValue: "")
    public var name: NSString
}

另外以 PropertyWrapper 封装的变量，会默认生成一个命名为 $name 的 DefensiveCopying 类型的变量，下面两种值访问操作是相同的：

extension Person {
    func visitName() {
        printf("name: \(name)")
        printf("name: \($name.value)")
    }
}

Combine

Customize handling of asynchronous events by combining event-processing operators.

引用官方文档的描述， Combine 是一套通过组合变换事件操作来处理异步事件的标准库。事件执行过程的关系包括：被观察者 Observable 和观察者 Observer ，在 Combine 中对应着 Publisher 和 Subscriber

异步编程

很多开发者认为异步编程会开辟线程执行任务，多数时候程序在异步执行时确实也会创建线程，但是这种理解是不正确的，同步编程和异步编程的区别只在于程序是否会堵塞等待任务执行完毕，下面是一段无需额外线程的异步编程实现代码：

class TaskExecutor {
    static let instance = TaskExecutor()
    private var executing: Bool = false
    private var tasks: [() -> ()] = Array()
    private var queue: DispatchQueue = DispatchQueue.init(label: "SerialQueue")
    
    func pushTask(task: @escaping () -> ()) {
        tasks.append(task)
        if !executing {
            execute()
        }
    }
    
    func execute() {
        executing = true
        let executedTasks = tasks
        tasks.removeAll()
        executedTasks.forEach {
            $0()
        }
        if tasks.count > 0 {
            execute()
        } else {
            executing = false
        }
    }
}

TaskExecutor.instance.execute()
TaskExecutor.instance.pushTask {
    print("abc")
    TaskExecutor.instance.pushTask {
        print("def")
    }
    print("ghi")
}

单向流动

如果 A 事件会触发 B 事件，反之不成立，可以认为两个事件是单向的，好比说 我饿了，所以我去吃东西 ，但不会是 我去吃东西，所以我饿了 。在编程中，如果数据流动能够保证单向，会让程序变得更加简单。举个例子，下面是一段非单向流动的常见 UI 代码：

func tapped(signIn: UIButton) {
    LoginManager.manager.signIn(username, password: password) { (err) in
        guard err == nil else {
            ERR_LOG("sign in failed: \(err)")
            return
        }
        UserManager.manager.switch(to: username)
        MainPageViewController.enter()
    }
}

在这段代码中， Action 实际上会等待 State/Data 完成后，去更新 View ， View 会再去访问数据更新状态，这种逻辑会让数据在不同事件模块中随意流动，易读性和可维护性都会变得更差：

而一旦事件之间的流动采用了异步编程的方式来处理，发出事件的人不关心等待事件的处理，无疑能让数据的流动变得更加单一， Combine 的意义就在于此。 SwiftUI 与其结合来控制业务数据的单向流动，让开发复杂度大大降低：

Publisher

@available(OSX 10.15, iOS 13.0, tvOS 13.0, watchOS 6.0, *)
public protocol Publisher {

    /// The kind of values published by this publisher.
    associatedtype Output

    /// The kind of errors this publisher might publish.
    ///
    /// Use `Never` if this `Publisher` does not publish errors.
    associatedtype Failure : Error

    /// This function is called to attach the specified `Subscriber` to this `Publisher` by `subscribe(_:)`
    ///
    /// - SeeAlso: `subscribe(_:)`
    /// - Parameters:
    ///     - subscriber: The subscriber to attach to this `Publisher`.
    ///                   once attached it can begin to receive values.
    func receive(subscriber: S) where S : Subscriber, Self.Failure == S.Failure, Self.Output == S.Input
}

extension NotificationCenter {
    struct Publisher: Combine.Publisher {
        typealias Output = Notification
        typealias Failure = Never
        init(center: NotificationCenter, name: Notification.Name, Object: Any? = nil)
    }
}

let signInNotification = Notification.Name.init("user_sign_in")

struct SignInInfo {
    let username: String
    let password: String
}

let signInPublisher = NotificationCenter.Publisher(center: .default, name: signInNotification, object: nil)

/// Subscriber只接收用户名信息
let signInPublisher = NotificationCenter.Publisher(center: .default, name: signInNotification, object: nil)
    .map {
        return ($0 as? SignInfo)?.username ?? "unknown"
    }

@available(OSX 10.15, iOS 13.0, tvOS 13.0, watchOS 6.0, *)
public protocol Subscriber : CustomCombineIdentifierConvertible {

    /// The kind of values this subscriber receives.
    associatedtype Input

    /// The kind of errors this subscriber might receive.
    ///
    /// Use `Never` if this `Subscriber` cannot receive errors.
    associatedtype Failure : Error

    /// Tells the subscriber that it has successfully subscribed to the publisher and may request items.
    ///
    /// Use the received `Subscription` to request items from the publisher.
    /// - Parameter subscription: A subscription that represents the connection between publisher and subscriber.
    func receive(subscription: Subscription)

    /// Tells the subscriber that the publisher has produced an element.
    ///
    /// - Parameter input: The published element.
    /// - Returns: A `Demand` instance indicating how many more elements the subcriber expects to receive.
    func receive(_ input: Self.Input) -> Subscribers.Demand

    /// Tells the subscriber that the publisher has completed publishing, either normally or with an error.
    ///
    /// - Parameter completion: A `Completion` case indicating whether publishing completed normally or with an error.
    func receive(completion: Subscribers.Completion)
}

@available(OSX 10.15, iOS 13.0, tvOS 13.0, watchOS 6.0, *)
public protocol Subscription : Cancellable, CustomCombineIdentifierConvertible {

    /// Tells a publisher that it may send more values to the subscriber.
    func request(_ demand: Subscribers.Demand)
}

func registerSignInHandle() {
    let signInSubscriber = Subscribers.Assign.init(object: self.userNameLabel, keyPath: \.text)
    signInPublisher.subscribe(signInSubscriber)
}

func tapped(signIn: UIButton) {
    LoginManager.manager.signIn(username, password: password) { (err) in
        guard err == nil else {
            ERR_LOG("sign in failed: \(err)")
            return
        }
        let info = SignInfo(username: username, password: password)
        NotificationCenter.default.post(name: signInNotification, object: info)
    }
}

class ViewController: UIViewController {

    @Publishable(initialValue: "")
    var text: String
    
    let textLabel = UILabel.init(frame: CGRect.init(x: 100, y: 120, width: 120, height: 40))

    override func viewDidLoad() {
        super.viewDidLoad()
        textLabel.bind(text: $text)
        
        let button = UIButton.init(frame: CGRect.init(x: 100, y: 180, width: 120, height: 40))
        button.addTarget(self, action: #selector(tapped(button:)), for: .touchUpInside)
        button.setTitle("random text", for: .normal)
        button.backgroundColor = .blue
        
        view.addSubview(textLabel)
        view.addSubview(button)
    }
    
    @objc func tapped(button: UIButton) {
        text = String(arc4random() % 101)
    }
}

@available(OSX 10.15, iOS 13.0, tvOS 13.0, watchOS 6.0, *)
final public class PassthroughSubject : Subject where Failure : Error {

    public init()

    /// This function is called to attach the specified `Subscriber` to this `Publisher` by `subscribe(_:)`
    ///
    /// - SeeAlso: `subscribe(_:)`
    /// - Parameters:
    ///     - subscriber: The subscriber to attach to this `Publisher`.
    ///                   once attached it can begin to receive values.
    final public func receive(subscriber: S) where Output == S.Input, Failure == S.Failure, S : Subscriber

    /// Sends a value to the subscriber.
    ///
    /// - Parameter value: The value to send.
    final public func send(_ input: Output)

    /// Sends a completion signal to the subscriber.
    ///
    /// - Parameter completion: A `Completion` instance which indicates whether publishing has finished normally or failed with an error.
    final public func send(completion: Subscribers.Completion)
}

@propertyDelegate
public struct Publishable {
    private var storage: Value
    var publisher: PassthroughSubject
    
    public init(initialValue value: Value) {
        storage = value
        publisher = PassthroughSubject()
        Publishers.AllSatisfy
    }
    
    public var value: Value {
        get { storage }
        set {
            if storage != newValue {
                storage = newValue
                publisher.send(storage)
            }
        }
    }
}

extension UILabel {

    func bind(text: Publishable) {
        let subscriber = Subscribers.Assign.init(object: self, keyPath: \.text)
        text.publisher.subscribe(subscriber)
        self.text = text.value
    }
}

func freeBinding() {
    subscribers?.forEach {
        $0.cancel()
    }
    subscribers?.removeAll()
}