SwiftUI极简教程30:Combine异步编程框架和MVVM开发模式的使用(中)

简介: SwiftUI极简教程30:Combine异步编程框架和MVVM开发模式的使用(中)

承接上一章的内容,这一章,我们了解一下Combine异步编程框架和MVVM开发模式的概念和原理。

image.png

理论需要联系实际,实际也要基于理论。

别着急,了解了概念和原理后,我们才能更好地前行。

image.png

首先,我们先了解下Combine异步编程框架是做什么的。

官方来说,Combine框架为应用程序如何处理事件提供了一种声明性方法。我们可以使用这个方法为指定的事件源创建单个处理链,而不是实现多个委托回调或完成处理程序闭包。处理链的每个部分都是一个Combine操作符,对从上一步接收到的元素执行不同的操作。

Combine框架有三个对象:


负责发布事件的 Publisher
负责订阅事件的 Subscriber
负责转换事件和数据的 Operator


image.png

简单来说,Combine异步编程框架是一个声明式的API,来根据不同时间接收到的值的不同,执行不同操作。而在本章的案例中,我们在TextField输入框中输入的每次点击都会触发一个事件,这个就是所谓的值。

示例代码:

class RegistrationViewModel: ObservableObject {
    @Published var isSubmit: Bool = false
}


要实现Combine异步编程框架,我们需要创建一个符合ObservableObject的类,这里命名为RegistrationViewModel注册验证,并使用@Published注释我们需要的属性,比如是否确定isSubmit,它是Bool类型,默认是false

每次我们更改isSubmit的值时,将它的值改变为true时,RegistrationViewModel注册验证的类就会发布一个事件给到订阅方,比如这里订阅方是服务器。服务器接收更新后的值,系统就会继续根据这个值触发对应的操作,比如:print打印出结果。

这好像和我们之前学的@State类型很像,存起来一个值。确实如此,但我们用RegistrationValidator注册验证的类中@Publishe定义后,它不需要在任何视图中,我们就可以在整个App所有视图调用,就不用@State定义,然后@binding绑定了。

image.png

另一个有关MVVM开发模式,它是指Model-View-ViewModel模式,简单来说,就是将页面、数据、数据处理分开处理。

Model


你可以把它作为3swift文件来思考,Model.swift里面是放数据定义的,像之前章节创建的imageModel是Model部分的内容。

示例代码:


import Foundation
struct imageModel: Identifiable {
    var id = UUID()
    var image: String
    var imageName: String
}
#if DEBUG
let imageModels = [
    imageModel(image: "image01", imageName: "图片01"),
    imageModel(image: "image02", imageName: "图片02"),
    imageModel(image: "image03", imageName: "图片03"),
    imageModel(image: "image04", imageName: "图片04"),
    imageModel(image: "image05", imageName: "图片05"),
    imageModel(image: "image06", imageName: "图片06"),
    imageModel(image: "image07", imageName: "图片07"),
    imageModel(image: "image08", imageName: "图片08"),
    imageModel(image: "image09", imageName: "图片09")
]
#endif


image.png

View


View,即视图。这就好说了,我们Xcode创建新项目时自动创建的ContentView首页视图就是View,也就是页面部分。

我们可以创建很多的View视图,像之前创建的DetailView详情视图,我们在View视图只需要完成简单的交互样式就可以了。

示例代码:


struct ContentView: View {
    var body: some View {
        Text("Hello World”)
            .padding()
    }
}


image.png

ViewModel


ViewModel可能看起来复杂,但我们可以看到它是View+Model,其实就是数据处理的事件。

在前面我们创建了View页面,也创建了Model数据模型,那么如何将数据加到页面中,使得数据流动起来,让用户有交互的效果,这就是ViewModel的作用。

比如,我们登录注册页面,当用户名输入的长度不对时,就点击注册时就显示错误提示信息。

我们完成这个逻辑,就可以将这个判断放在ViewModel,然后在View视图引用这个方法。

示例代码:


class RegistrationViewModel: ObservableObject { 
    @Published var username = ""
    @Published var isUsernameLengthValid = false
    init () {
        //判断逻辑代码块
    }
}

image.png

以上面的代码为例,我们可以使用@Published绑定username用户名,然后 @Published绑定用户名字长是否通过校验的状态,然后写判断的逻辑在代码块中,当我们username用户名输入时,调用ViewModel里的方法,返回isUsernameLengthValid的状态,View视图根据不同状态展示不同的交互样式。

小结


本章使用的是过往章节的例子,以及最为口语化的语言解释来Combine异步编程框架和MVVM开发模式的概念和原理,至于官方对于这两块内容的描述和介绍,网上有很多详细的介绍,当然也较为难以理解。

那么下一章,我们基于本章和和上一章的项目,我们来进行实践。

快来动手试试吧!



相关文章
|
8月前
|
前端开发
MVVM框架原理
MVVM框架(Model-View-ViewModel)是一种基于数据绑定的前端架构模式。它将视图逻辑与业务逻辑分离,提供了一种简单而清晰的方式来管理和组织代码。
216 0
|
6月前
|
Dart iOS开发
带你读《深入浅出Dart》二十八、Material和Cupertino组件(3)
带你读《深入浅出Dart》二十八、Material和Cupertino组件(3)
|
6月前
|
Dart iOS开发
带你读《深入浅出Dart》二十八、Material和Cupertino组件(2)
带你读《深入浅出Dart》二十八、Material和Cupertino组件(2)
|
6月前
|
Dart 容器
带你读《深入浅出Dart》二十八、Material和Cupertino组件(1)
带你读《深入浅出Dart》二十八、Material和Cupertino组件(1)
|
6月前
|
Dart API
带你读《深入浅出Dart》二十九、Flutter网络请求(1)
带你读《深入浅出Dart》二十九、Flutter网络请求(1)
|
6月前
|
XML JSON Dart
带你读《深入浅出Dart》二十九、Flutter网络请求(2)
带你读《深入浅出Dart》二十九、Flutter网络请求(2)
|
Dart 前端开发 JavaScript
Flutter(二十二)——异步编程
Flutter(二十二)——异步编程
242 2
Flutter(二十二)——异步编程
|
存储 前端开发 数据安全/隐私保护
SwiftUI极简教程31:Combine异步编程框架和MVVM开发模式的使用(下)
SwiftUI极简教程31:Combine异步编程框架和MVVM开发模式的使用(下)
931 0
SwiftUI极简教程31:Combine异步编程框架和MVVM开发模式的使用(下)
|
存储 前端开发 数据安全/隐私保护
SwiftUI极简教程29:Combine异步编程框架和MVVM开发模式的使用(上)
SwiftUI极简教程29:Combine异步编程框架和MVVM开发模式的使用(上)
665 0
SwiftUI极简教程29:Combine异步编程框架和MVVM开发模式的使用(上)
|
iOS开发
SwiftUI极简教程06:代码优雅复用
SwiftUI极简教程06:代码优雅复用
417 0
SwiftUI极简教程06:代码优雅复用