在SwiftUI中实现MVVM架构模式 - Welcome to Modo's Dreamland

用Swift写了一个从后端获取数据来展示话题和评论的客户端, 顺便学用了MVVM模式

MVVM即Model、View和ViewModel#

View层: UI界面，对的，记住它就仅仅是个UI
ViewModel层: View要用到的所有数据和方法，嗯，data和function，所以它在Swift中通常是个class
Mode层l: 底层数据和业务逻辑，在这个例子中包括向后端发出请求的底层方法，以及对应得到的json数据转换为的结构体

用ViewModel是为了视图和业务逻辑之间的解耦#

从我的项目文件结构中应该能更加清晰说明这个：

1
-CommentSystem
2

3
    -PageModel.swift
4

5
        -PageService.swift
6

7
        -PageData.swift
8

9
    -PageViewModel.swift
10

11
    -PageView.swift

” the View “knows” about the VM, but the VM knows nothing of the View. This is the blindest date ever ”

MVVM实现的是单向数据流，Model提供接口给到ViewModel,再通过ViewModel提供接口给到View

Swift中的实现#

Model是底层上通用的一些数据和业务逻辑，自然就不用多提了

重点是ViewModel:#

以下为这个项目的实现

1
import SwiftUI
2
import Combine
3

4
public class PageViewModel: ObservableObject {
5
    @Published private(set) var title: String = ""
6
    @Published private(set) var contents: String = ""
7
    @Published private(set) var posts: [Post] = []
8
    @Published private(set) var errorMessage: String?
9
    @Published private(set) var cteateTime: Int64 = 0
10

11
    private let service: PageServiceProtocol
12

13
    init(service: PageServiceProtocol) {
14
        self.service = service
15
    }
16

17
    func loadPageById(input: Int) {
18
        Task{
19
            await load(pageId: input)
20
        }
21
    }
22

23
    func loadPageByTopic(input: String){
24
        Task{
25
            await query(title: input)
26
        }
27
    }
28

29
    private func query(title: String) async {
30
        do {
31
            let idData = try await service.fetchTopicId(title: title)
32
            await load(pageId: idData.id)
33
        } catch {
34
            self.errorMessage = error.localizedDescription
35
        }
36
    }
37

38
    private func load(pageId: Int) async {
39
        do {
40
            let pageData = try await service.fetchPage(Id: pageId)
41

42
            self.title = pageData.data.Topic.title
43
            self.posts = pageData.data.PostList
44
            self.cteateTime = pageData.data.Topic.create_time
45
            self.contents = pageData.data.Topic.content
46

47
        } catch {
48
            self.errorMessage = error.localizedDescription
49
        }
50
    }
51
}

我们把ViewModel直接作为一个类，并使用ObservableObject*来定义它，待会儿在View中就可以用ObservedObject来监听它的ViewModel，@Published是你要向上开放的字段，也就是View要访问的字段，而func loadPageById和func loadPageByTopic则是View要使用的逻辑方法

在这段中可以注意到的一点是

1
init(service: PageServiceProtocol) {
2
        self.service = service
3
    }

这里用到的service就是由Model提供上来的接口，viewModel中的所有字段和方法均由Model提供的数据和方法来实现

接下来是View去调用#

原项目ui代码太多太杂了，以下为一个简化过了的实现：

1
import SwiftUI
2

3
public struct ContentView: View {
4

5
    @ObservedObject var viewModel: PageViewModel
6
    @State private var input = ""
7

8
    public var body: some View {
9
        VStack {
10
            Text(viewModel.title)
11
                .font(.title)
12
            if viewModel.contents.isEmpty {
13
                Text("Loading...")
14
            } else {
15
                Text(viewModel.contents)
16
            }
17
            HStack {
18
                Button("Home") { viewModel.loadPageById(input: 1) }
19
                Button("教程") { viewModel.loadPageById(input: 3) }
20
                Button("赞助Modo") { viewModel.loadPageById(input: 2) }
21
            }
22
            TextField("Search", text: $input)
23
                .textFieldStyle(.roundedBorder)
24
                .onSubmit {
25
                    viewModel.loadPageByTopic(input: input)
26
                }
27

28
            List(viewModel.posts, id: \.content) { post in
29
                if let url = URL(string: post.content),
30
                   url.scheme?.hasPrefix("http") == true {
31
                    Link(post.content, destination: url)
32
                } else {
33
                    Text(post.content)
34
                }
35
            }
36
        }
37
        .padding()
38
        .onAppear {
39
            viewModel.loadPageById(input: 1)
40
        }
41
    }
42
}

通过@ObservedObject监听ObservableObject即ViewModel的变化当@Published变量改变时刷新View public var body: some View{···}中的内容为具体的界面ui，可以看到全都采用ViewModel实例提供的数据和方法来实现

最终ui界面如下：