MVVM

VM来处理业务逻辑
每一个控制器对应一个VM模型
>>>登录界面
步骤
  • 搭建界面(登录界面)
  • 自定义VM模型,继承与NSObject,命名**ViewModel
    • 懒加载
    • 把整个界面的一些业务逻辑处理完
  • 业务逻辑
    • 绑定模型
    • 登录事件
      • 处理文本框业务逻辑
      • 设置登录按钮是否可以点击
        • 用RAC宏
      • 监听登录按钮的点击
        • rac_signalForControlEvents
      • 处理事件
        • 创建登录命令RACCommand
#import "GlobeHeader.h"

@interface HMJLoginViewModel : NSObject
/**< 账号*/
@property (nonatomic, strong)NSString *name;
/**< 密码*/
@property (nonatomic, strong)NSString *password;
/**< 登录按钮命令*/
@property (nonatomic, strong, readonly)RACCommand *loginCommand;
/**< 处理登录按钮是否允许点击*/
@property (nonatomic, strong, readonly)RACSignal *loginEnableSignal;
@end
 

 

#import "MBProgressHUD+XMG.h"

@implementation HMJLoginViewModel
- (instancetype)init
{
    if (self = [super init]) {
        [self setUp];
    }
    return self;
}

- (void)setUp
{
    //监听账号的属性值改变,把他们聚合成一个信号
    _loginEnableSignal = [RACSignal combineLatest:@[RACObserve(self, name), RACObserve(self, password)] reduce:^id(NSString *name, NSString *pwd){
        return @(name.length && pwd.length);
    }];
    //处理登录按钮点击命令
    _loginCommand = [[RACCommand alloc] initWithSignalBlock:^RACSignal *(id input) {
        //block: 执行命令就会调用
        //block作用: 事件处理
        //发送登录请求
        NSLog(@"发送登录请求");
        return [RACSignal createSignal:^RACDisposable *(id<RACSubscriber> subscriber) {
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                //发送数据
                [subscriber sendNext:@"请求登录的数据"];
                [subscriber sendCompleted];
            });
            return nil;
        }];
    }];
    //处理登录请求返回的结果
    [_loginCommand.executionSignals.switchToLatest subscribeNext:^(id x) {
        NSLog(@"%@", x);
    }];
    //处理登录执行过程
    [[_loginCommand.executing skip:1] subscribeNext:^(id x) {
        if ([x boolValue] == YES) {
            //正在执行
            NSLog(@"正在执行");
            //显示蒙板
            [MBProgressHUD showMessage:@"正在拼命加载ing..."];
        }else
        {
            //执行完成
            //隐藏蒙板
            [MBProgressHUD hideHUD];
            NSLog(@"执行完成");
        }
    }];
}

 

 
#import "HMJLoginViewModel.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UITextField *nameField;
@property (weak, nonatomic) IBOutlet UITextField *pwdField;
@property (weak, nonatomic) IBOutlet UIButton *loginBtn;
/**< VM*/
@property (nonatomic, strong)HMJLoginViewModel *loginM;
@end

@implementation ViewController

- (HMJLoginViewModel *)loginM
{
    if (_loginM == nil) {
        _loginM = [[HMJLoginViewModel alloc] init];
    }
    return _loginM;
}
// MVVM:先创建VM模型,把整个界面的一些业务逻辑处理完
// VM:视图模型,处理界面上所有业务逻辑

// 每一个控制器对应一个VM模型
// VM:最好不要包括视图V

- (void)viewDidLoad {
    [super viewDidLoad];
    //绑定VM模型
    [self bindViewModel];
    //处理事件
    [self loginEvent];
}

//绑定VM模型
- (void)bindViewModel
{
    //给视图模型的账号和密码绑定信号
    RAC(self.loginM, name) = _nameField.rac_textSignal;
    RAC(self.loginM, password) = _pwdField.rac_textSignal;
}
//处理事件
- (void)loginEvent
{
    //处理文本框的业务逻辑
    //设置按钮能否点击
    RAC(_loginBtn, enabled) = self.loginM.loginEnableSignal;
    //监听登录按钮点击
    [[_loginBtn rac_signalForControlEvents:UIControlEventTouchUpInside] subscribeNext:^(id x) {
        //处理登录事件
        [self.loginM.loginCommand execute:nil];
    }];
}

 

>>>网络请求数据
用豆瓣网—>最下面的开发者—>开发文档
MVVM + AFN
步骤:
    1.控制器提供一个视图模型(requesViewModel),处理界面的业务逻辑
    2.VM提供一个命令,处理请求业务逻辑
    3.在创建命令的block中,会把请求包装成一个信号,等请求成功的时候,就会把数据传递出去。
    4.请求数据成功,应该把字典转换成模型,保存到视图模型中,控制器想用就直接从视图模型中获取。
    5.假设控制器想展示内容到tableView,直接让视图模型成为tableView的数据源,把所有的业务逻辑交给视图模型去做,这样控制器的代码就非常少了。
 
>>>>>HMJBook.h<<<<<<<<<
@interface HMJBook : NSObject
/**< 名称*/
@property (nonatomic, strong)NSString *title;
/**< 价格*/
@property (nonatomic, strong)NSString *price;
+ (instancetype)bookWithDict:(NSDictionary *)dict;
@end
 
>>>>>>HMJBook.m<<<<<<<
+ (instancetype)bookWithDict:(NSDictionary *)dict
{
    HMJBook *book = [[HMJBook alloc] init];
    book.title = dict[@"title"];
    book.price = dict[@"price"];
    return book;
}
 
>>>>>>>HMJRequestViewModel.h<<<<<<<<<
#import "HMJGlobalHeader.h"
@interface HMJRequestViewModel : NSObject
/**< 请求命令*/
@property (nonatomic, strong)RACCommand *requestCommand;
@end
 
 
>>>>>>>HMJRequestViewModel.m<<<<<<<<<
#import "HMJBook.h"

@implementation HMJRequestViewModel
- (instancetype)init
{
    if (self = [super init]) {
        [self setUp];
    }
    return self;
}

- (void)setUp
{
    //请求命令
    _requestCommand = [[RACCommand alloc] initWithSignalBlock:^RACSignal *(id input) {
        //发送信号
        RACSignal *signal = [RACSignal createSignal:^RACDisposable *(id<RACSubscriber> subscriber) {
            //创建请求管理者
            AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager];
            //发送GET请求
            [manager GET:@"https://api.douban.com/v2/book/search" parameters:@{@"q": @"美食"} success:^(AFHTTPRequestOperation * _Nonnull operation, id  _Nonnull responseObject) {
                //请求成功
                NSLog(@"请求成功");
                //写入plist
//                [responseObject writeToFile:@"/Users/XXX/Desktop/foods.plist" atomically:YES];
                NSArray *dictArr = responseObject[@"books"];
                NSArray *modelArr = [[dictArr.rac_sequence map:^id(id value) {
                    return [HMJBook bookWithDict:value];
                }] array];
               
                [subscriber sendNext:modelArr];
               
            } failure:^(AFHTTPRequestOperation * _Nonnull operation, NSError * _Nonnull error) {
                NSLog(@"请求失败");
            }];
           
            return nil;
        }];
        return signal;
    }];
   
}
@end
 
 
>>>>>ViewController.m<<<<<<<<<<
#import "HMJGlobalHeader.h"
#import "HMJRequestViewModel.h"

@interface ViewController ()
/**< 请求模型*/
@property (nonatomic, strong)HMJRequestViewModel *requestVM;
@end
@implementation ViewController
- (HMJRequestViewModel *)requestVM
{
    if (_requestVM == nil) {
        _requestVM = [[HMJRequestViewModel alloc] init];
    }
    return _requestVM;
}
- (void)viewDidLoad {
    [super viewDidLoad];
    //发送请求
    RACSignal *signal = [self.requestVM.requestCommand execute:nil];
    [signal subscribeNext:^(id x) {
       
    }];
}
@end

 

转载于:https://www.cnblogs.com/HMJ-29/p/4944014.html

06-06
<think>首先,用户的问题是关于MVVM架构模式的介绍、实现和使用。系统级指令要求我使用中文回答,并且要结构化清晰。我需要参考用户提供的站内引用,这些引用来自不同的来源:[1]关于Android的MVVM架构,[2]关于Vue的MVVM架构,[3]关于MVVM模式的基本概念,[4]关于MVVM的使用和实现。引用内容摘要:-[^1]:MVVM是一种架构模式,DataBinding是实现数据和UI绑定的框架,LifeCycle和LiveData是桥梁。-[^2]:Vue的MVVM模式:VM通过双向数据绑定实现模型和视图的自动同步,包括DOMListener和DataBinding。-[^3]:View包括Activity/Fragment和ViewDataBinding。-[^4]:MVVM在Android中使用布局文件(如XML),定义数据绑定。用户上一次的问题似乎是要我生成相关问题,但当前用户的问题是明确问关于MVVM的介绍、实现和使用。所以我应该专注于回答这个。我的回答结构:1.**介绍MVVM架构模式**:简要解释什么是MVVM,核心组成部分(Model,View,ViewModel),优缺点。2.**实现细节**:根据引用,讨论Android和Vue中的MVVM实现。3.**使用场景和示例**:展示如何使用,包括代码片段(如果有),如Android中使用DataBinding或Vue中的实现。4.**生成相关问题**:如示例所示,在末尾添加相关问题。系统指令要求:-行内数学达式用$...$,但在这个上下文中可能不涉及数学,所以不必要。-独立公式用$$...$$,但这里没有。-LaTeX语法正确:在代码块中使用。-中文回答。-生成相关问题:在末尾添加。-引用段落末尾添加引用标识,如[^1]。回答大纲:-**开头**:简要介绍MVVM。-**核心概念**:-Model:数据层。-View:UI层。-ViewModel:业务逻辑层,连接Model和View。-双向数据绑定:核心机制。-**实现**:-Android实现(引用[1]、[3]、[4]):使用DataBinding,LifeCycle,LiveData。-Vue实现(引用[2]):数据挟持和发布订阅模式。-**使用**:给出示例代码,如Android布局文件或Vue组件。-**优点与缺点**。-**生成相关问题**。确保回答真实可靠:基于已知知识,参考给定引用。生成相关问题:如:1.MVVM与MVC的区别是什么?2.在实际项目中如何解决MVVM中的数据绑定问题?3.Vue.js和Android中MVVM实现的差异?引用时,在相关内容末尾添加[^1],[^2]等。</think> ### MVVM架构模式介绍、实现与使用 MVVM(Model-View-ViewModel)是一种广泛应用于现代软件开发的架构模式,旨在将用户界面(UI)与业务逻辑解耦,提升代码的可维护性和可测试性。它源于MVC(Model-View-Controller)模式,但引入了ViewModel作为中间层,并通过双向数据绑定自动同步View和Model的变化。以下我将逐步介绍MVVM的核心概念、具体实现和使用方法。 --- #### 1. **MVVM核心介绍** - **核心组成部分**: - **Model(模型)**:代应用程序的数据和业务逻辑层。负责处理数据获取、存储和业务规则。例如,数据库操作、API调用等。 - **View(视图)**:用户界面的呈现层。在Android中是Activity/Fragment,在Web开发中是HTML DOM元素[^3]。View不包含逻辑,只负责显示数据和处理用户输入。 - **ViewModel(视图模型)**:连接Model和View的桥梁。ViewModel暴露数据和方法给View,并响应View的交互事件。它处理UI逻辑但不直接操作View,使用LiveData(在Android)或响应式数据(在Vue)实现数据更新自动化[^1][^2]。 - **双向数据绑定**:MVVM的核心机制。当Model数据变化时,View自动更新;当用户操作View时,Model数据自动同步。这减少了冗余代码,提升开发效率[^2][^4]。 - **优缺点**: - **优点**:解耦UI和逻辑,易于测试(ViewModel可独立测试);提高代码复用性;支持响应式UI更新。 - **缺点**:双向绑定可能导致调试复杂(需注意数据流循环);在大型应用中,ViewModel可能过于庞大。 引用[^1]中提到,MVVM的核心在于使用工具如DataBinding和LifeCycle实现数据绑定,LiveData通过感知生命周期来安全传递数据,确保UI仅在可见状态下更新,避免内存泄漏[^1]。 --- #### 2. **MVVM的实现细节** MVVM的实现依赖于框架和平台,下面以Android(使用Jetpack组件)和Vue.js为例。 - **Android中的实现(参考引用[1][3][4])**: - **工具链**:使用Jetpack库(如LifeCycle、LiveData和DataBinding)。ViewModel处理业务逻辑,LiveData确保数据在UI控制器(如Activity)的生命周期内安全更新[^1][^3]。 - **DataBinding使用**:在XML布局文件中定义数据和绑定关系,DataBinding自动将ViewModel数据映射到UI元素[^4]。示例代码: ```xml <!-- 引用[4]的布局示例 --> <layout xmlns:android="http://schemas.android.com/apk/res/android"> <data> <variable name="user" type="com.example.User" /> <!-- 定义数据类型 --> </data> <TextView android:text="@{user.name}" /> <!-- 绑定达式 --> </layout> ``` 这里,`@{user.name}` 是绑定达式,当User对象name属性变化时,TextView自动刷新[^4]。 - **ViewModel和LiveData**:ViewModel保持数据状态,LiveData观察数据变化。在Activity中: ```kotlin class MyViewModel : ViewModel() { val userName = MutableLiveData<String>() // LiveData用于数据观察 fun loadData() { userName.value = "加载数据" // 更新数据自动通知View } } class MyActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) val binding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main) val viewModel = ViewModelProvider(this).get(MyViewModel::class.java) viewModel.userName.observe(this) { name -> // 观察数据变化 binding.textView.text = name // UI更新 } } } ``` 此代码中,当ViewModel数据变化时,View通过LiveData自动更新[^1]。 - **Vue.js中的实现(参考引用[2])**: - **核心机制**:Vue通过数据挟持(使用Object.defineProperty或Proxy)和发布者-订阅者模式实现双向绑定[^2]。 - **ViewModel组成部分**: - **DOMListener**:监听用户交互事件(如点击),触发Model更新。 - **DataBinding**:将Model数据绑定到View元素,实现数据自动同步。 - 示例代码(Vue组件): ```vue <template> <div> <p>{{ userName }}</p> <!-- 绑定达式,自动更新 --> <input v-model="userName"> <!-- 双向绑定:输入变化自动更新Model --> </div> </template> <script> export default { data() { return { userName: '默认值' // ViewModel数据 } } } </script> ``` 这里,`v-model`实现输入框的双向绑定:输入变化更新数据数据变化更新视图[^2]。 **关键区别**:Android MVVM强调生命周期感知(通过LifeCycle),而Vue.js更侧重于纯前端绑定[^1][^2]。 --- #### 3. **MVVM的使用场景和最佳实践** - **使用场景**: - **移动App开发**:如Android项目,MVVM适合处理UI复杂性和数据异步更新(如API响应)。 - **Web前端开发**:Vue、React等框架广泛应用MVVM模式,适合动态单页应用(SPA)。 - **企业应用**:在需要高代码复用性和测试性的场景中,MVVM减少维护成本。 - **最佳实践**: - **保持ViewModel轻量**:将复杂逻辑移至Model层,避免ViewModel成为"God Object"。 - **合理使用数据绑定**:避免过度绑定以减少性能开销,如在Android中使用`@BindingAdapter`处理自定义绑定[^4]。 - **测试策略**:单元测试ViewModel逻辑(使用JUnit/Mockito),UI测试聚焦用户交互。 - **常见问题解决**: - **内存泄漏**:在Android中,使用LifeCycleScope确保资源释放。 - **数据流循环**:在Vue中,避免在数据更新方法中直接修改源数据。 引用[^3]强调,View中的ViewDataBinding(如Android的binding实例)是执行数据绑定的关键,但开发者只需关注数据定义和响应逻辑[^3]。 --- #### 4. **MVVM的优缺点总结** - **优势**:提升开发效率(通过自动UI更新),支持模块化开发;缺点在调试复杂数据流。 - **趋势**:在现代框架如Jetpack Compose或Vue 3中,MVVM通过更精简的API优化了实现[^2][^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值