RxSwift+MVVM项目实战-MVVM架构介绍以及实战初体验

简介: RxSwift+MVVM项目实战-MVVM架构介绍以及实战初体验

1. MVVM架构简介

对于MVVM架构,大家一定都已不再陌生,网上的资料随意一搜遍地都是,这里就不再过多的赘述,简单说一下MVVM架构结合RxSwift的使用,以及各自的分工,请看下面这张图:

注意:MVVM架构并不是一定得结合函数响应式编程RxSwift或者RAC等,只是他们的结合会使得代码更加的简洁,消息的传递更加简单化。


Model

提供数据支持,在里面定义需要的属性等;


ViewModel

主要职责就是对数据进行转换处理,ViewModel中设计Input结构体Output结构体的作用主要是使得事件的流向更加的清晰;Input所扮演的角色,主要是接收View所传递过来的事件(点击、输入、滚动等),ViewModel内部通过transform函数转换,返回OutPutOutput的作用主要是保存处理后的结果,用于将来绑定到UI,从而实现了ViewViewModel层完全的解耦;


View

主要作用就是视图的布局、动画、跳转等,将来会把所需的事件传递给ViewModelInput中,通过ViewModel的数据转换,把ViewModel中的Output绑定到对应的UI控件上;在MVVMController也会归属到View中,职责类似;


2. 关注功能实战

需求:页面内有一按钮,有“关注”和“取消关注”两种状态,进入页面通过网络请求获取初始状态,然后通过点击,发起请求,切换不同的状态,具体实现如下:


Model层

声明按钮的初始状态属性,isAttention用于存储是否关注的状态;




class AttentionModel {
    var isAttention = false
}


View层

主要是创建控件、以及ViewModel实例,并把按钮的点击事件传递到ViewModelInput中,ViewModel内部通过transform函数,对input中的事件进行处理,再把ViewModel中的Output和按钮的状态attentionButton.rx.isSelected绑定在一起;

private func bindToViewModel() {
    let output = viewModel.transform(input: AttentionViewModel.Input(attention: attentionButton.rx.tap))
    output.attentionStatus.bind(to: attentionButton.rx.isSelected).disposed(by: disposeBag)
}


ViewModel层

Input:保存传递过来的按钮点击事件;

Output:绑定按钮状态数据到View层;

transformViewModelattention作用主要是用于存储当前的按钮状态;transform函数内部initAction 主要是用于请求更新按钮初始时的状态,attentionAction主要是当按钮点击的时候发起请求,待收到响应后,更新响应结果,通过merge两者的状态,利用OutputattentionStatus回调给外界进行绑定;


struct AttentionViewModel {
    //false代表未关注 true已关注
    private var attention = BehaviorRelay<Bool>(value: false)
    struct Input {
        let attention: ControlEvent<Void>
    }
    struct Output {
        let attentionStatus: Observable<Bool>
    }
    func transform(input: Input) -> Output {
        let initAction = requestInit()//请求初始数据
        let attentionAction = input.attention.flatMap({ request(!attention.value)} ).observe(on: MainScheduler.instance).share(replay: 1) //关注、取消关注点击
        //合并结果-把按钮点击或者请求初始数据的时候都去更新关注按钮状态
        let attentionStatus = Observable.of(attentionAction, initAction).merge()
        return Output(attentionStatus: attentionStatus)
    }
    private func request(_ isAttention: Bool) -> Observable<Bool> {
        return Observable<Bool>.create { (observer) -> Disposable in
            Logger("发起更新状态请求\nLoading...")
            DispatchQueue.global().asyncAfter(deadline: .now() + 2, execute: {
                Logger("响应更新状态结果...isAttention = \(isAttention)")
                observer.onNext(isAttention)//是否关注
                self.attention.accept(isAttention)// 关注或取消关注成功、存储状态
            })
            return Disposables.create()
        }.subscribe(on: ConcurrentDispatchQueueScheduler(qos: .userInteractive))
    }
    private func requestInit() -> Observable<Bool> {
        return Observable<Bool>.create { (observer) -> Disposable in
            Logger("正在请求初始状态\nLoading...")
            DispatchQueue.global().asyncAfter(deadline: .now() + 1, execute: {
                let model = AttentionModel()//模拟将请求结果转换为Model...
                model.isAttention = true //假设默认状态为已关注
                Logger("初始状态响应结果...isAttention = \(model.isAttention) \n")
                //Event处理...
                observer.onNext(model.isAttention)//用于通知View去更新关注状态
                attention.accept(model.isAttention)//存储关注的状态
            })
            return Disposables.create()
        }.subscribe(on: ConcurrentDispatchQueueScheduler(qos: .userInteractive))
    }
}

运行结果:

Log - 正在请求初始状态
Loading...
Log - 初始状态响应结果...isAttention = true 
Log - 发起更新状态请求
Loading...
Log - 响应更新状态结果...isAttention = false

划线


相关文章
|
1天前
|
前端开发 JavaScript 测试技术
android做中大型项目完美的架构模式是什么?是MVVM吗?如果不是,是什么?
在 Android 开发中,选择合适的架构模式对于构建中大型项目至关重要。常见的架构模式有 MVVM、MVP、MVI、Clean Architecture 和 Flux/Redux。每种模式都有其优缺点和适用场景,例如 MVVM 适用于复杂 UI 状态和频繁更新,而 Clean Architecture 适合大型项目和多平台开发。选择合适的架构应考虑项目需求、团队熟悉度和可维护性。
17 5
|
2天前
|
运维 NoSQL Java
后端架构演进:微服务架构的优缺点与实战案例分析
【10月更文挑战第28天】本文探讨了微服务架构与单体架构的优缺点,并通过实战案例分析了微服务架构在实际应用中的表现。微服务架构具有高内聚、低耦合、独立部署等优势,但也面临分布式系统的复杂性和较高的运维成本。通过某电商平台的实际案例,展示了微服务架构在提升系统性能和团队协作效率方面的显著效果,同时也指出了其带来的挑战。
25 4
|
5天前
|
存储 Dart 前端开发
flutter鸿蒙版本mvvm架构思想原理
在Flutter中实现MVVM架构,旨在将UI与业务逻辑分离,提升代码可维护性和可读性。本文介绍了MVVM的整体架构,包括Model、View和ViewModel的职责,以及各文件的详细实现。通过`main.dart`、`CounterViewModel.dart`、`MyHomePage.dart`和`Model.dart`的具体代码,展示了如何使用Provider进行状态管理,实现数据绑定和响应式设计。MVVM架构的分离关注点、数据绑定和可维护性特点,使得开发更加高效和整洁。
142 3
|
11天前
|
存储 前端开发 测试技术
Android kotlin MVVM 架构简单示例入门
Android kotlin MVVM 架构简单示例入门
20 1
|
11天前
|
XML 前端开发 Android开发
Kotlin教程笔记(80) - MVVM架构设计
Kotlin教程笔记(80) - MVVM架构设计
19 1
|
19天前
|
XML 前端开发 Android开发
Kotlin教程笔记(80) - MVVM架构设计
本系列学习教程笔记详细讲解了Kotlin语法,适合需要深入了解Kotlin的开发者。对于希望快速学习Kotlin语法的读者,建议参考“简洁”系列教程。本文重点介绍了Kotlin实现MVVM架构的设计思路和代码实现,包括Model、ViewModel和View层的具体实现,以及如何通过LiveData和viewModelScope有效管理数据和内存,避免内存泄漏。此外,还讨论了MVVM架构的常见缺点及应对策略,帮助开发者在实际项目中更好地应用这一设计模式。
27 1
|
1天前
|
前端开发 Java 测试技术
android MVP契约类架构模式与MVVM架构模式,哪种架构模式更好?
android MVP契约类架构模式与MVVM架构模式,哪种架构模式更好?
5 0
|
19天前
|
存储 前端开发 Java
Kotlin教程笔记 - MVVM架构怎样避免内存泄漏
Kotlin教程笔记 - MVVM架构怎样避免内存泄漏
|
19天前
|
设计模式 前端开发 JavaScript
深入探索研究MVVM架构设计
【10月更文挑战第7天】
14 0
|
21天前
|
存储 前端开发 Java
Kotlin教程笔记 - MVVM架构怎样避免内存泄漏
Kotlin教程笔记 - MVVM架构怎样避免内存泄漏
38 0

热门文章

最新文章