iOS开发MVC(Model-View-Controller)和 MVVM(Model-View-ViewModel)示例

103 阅读2分钟

在 SwiftUI 中,MVC(Model-View-Controller)和 MVVM(Model-View-ViewModel)是两种常见的架构模式,用于组织和管理应用的代码。下面我会为你举例说明在 SwiftUI 中使用 MVC 和 MVVM 的区别。

MVC 示例:

假设我们要创建一个显示用户列表的应用。首先,我们来看看如何在 MVC 架构下实现。

Model: 表示应用的数据和业务逻辑。 View: 用于展示界面,包括 UI 元素和布局。 Controller: 作为视图和模型之间的中介,处理用户输入和数据更新。

Model: 表示应用的数据和业务逻辑。 View: 用于展示界面,包括 UI 元素和布局。 Controller: 作为视图和模型之间的中介,处理用户输入和数据更新。

import SwiftUI

// Model
struct User {
    let id: Int
    let name: String
}

// Controller
class UserController: ObservableObject {
    @Published var users: [User] = [
        User(id: 1, name: "Alice"),
        User(id: 2, name: "Bob")
    ]
    
    func addUser(_ user: User) {
        users.append(user)
    }
}

// View
struct UserListView: View {
    @ObservedObject var controller: UserController
    
    var body: some View {
        NavigationView {
            List(controller.users) { user in
                Text(user.name)
            }
            .navigationBarTitle("Users")
        }
    }
}

MVVM 示例:

现在我们来看看如何在 MVVM 架构下实现相同的功能。

Model: 仍然表示应用的数据和业务逻辑。 View: 用于展示界面,但是不再处理数据逻辑。 ViewModel: 作为 View 和 Model 之间的中介,包含处理数据和业务逻辑的方法。

import SwiftUI

// Model
struct User {
    let id: Int
    let name: String
}

// ViewModel
class UserViewModel: ObservableObject {
    @Published var users: [User] = [
        User(id: 1, name: "Alice"),
        User(id: 2, name: "Bob")
    ]
    
    func addUser(_ user: User) {
        users.append(user)
    }
}

// View
struct UserListView: View {
    @ObservedObject var viewModel: UserViewModel
    
    var body: some View {
        NavigationView {
            List(viewModel.users) { user in
                Text(user.name)
            }
            .navigationBarTitle("Users")
        }
    }
}

在上述示例中,MVC 架构中的 Controller 在 MVVM 架构中被 ViewModel 取代。ViewModel 负责处理数据和业务逻辑,View 则专注于显示界面。MVVM 架构可以使代码更加模块化和可测试,同时将界面逻辑从视图中解耦出来。

总之,SwiftUI 提供了强大的支持来实现 MVC 和 MVVM 架构,你可以根据项目的需求选择合适的架构模式。