MVVM架构浅析

一.架构思想

  • 1.程序架构架构是为了便于程序员开发和维护代码。

  • 1.2.常见的架构思想

    • MVC: M:模型 V:视图 C:控制器
    • MVVM: M:模型 V:视图+控制器 VM:视图模型
    • MVCS: M:模型 V:视图 C:控制器 C:服务类
    • VIPER V:视图 I:交互器 P:展示器 E:实体 R:路由 VIPER构建iOS应用
  • 1.3.MVVM介绍

    • 模型(M):保存视图数据。

    • 视图+控制器(V):展示内容 + 如何展示

    • 视图模型(VM):处理展示的业务逻辑,包括按钮的点击,数据的请求和解析等等。

二.ReactiveCocoa + MVVM 实战一:登录界面

  • 2.1.需求:

    • 1.监听两个文本框的内容,有内容才允许按钮点击
    • 2.默认登录请求.
  • 2.2.用MVVM:实现,之前界面的所有业务逻辑分析:

    • 1.之前界面的所有业务逻辑都交给控制器做处理
    • 2.在MVVM架构中把控制器的业务全部搬去VM模型,也就是每个控制器对应一个VM模型.
  • 2.3.步骤:

    • 1.创建LoginViewModel类,处理登录界面业务逻辑.
    • 2.这个类里面应该保存着账号的信息,创建一个账号Account模型
    • 3.LoginViewModel应该保存着账号信息Account模型。
    • 4.需要时刻监听Account模型中的账号和密码的改变,怎么监听?
    • 5.在非RAC开发中,都是习惯赋值,在RAC开发中,需要改变开发思维,由赋值转变为绑定,可以在一开始初始化的时候,就给Account模型中的属性绑定,并不需要重写set方法。
    • 6.每次Account模型的值改变,就需要判断按钮能否点击,在VM模型中做处理,给外界提供一个能否点击按钮的信号.
    • 7.这个登录信号需要判断Account中账号和密码是否有值,用KVO监听这两个值的改变,把他们聚合成登录信号.
    • 8.监听按钮的点击,由VM处理,应该给VM声明一个RACCommand,专门处理登录业务逻辑.
    • 9.执行命令,把数据包装成信号传递出去
    • 10.监听命令中信号的数据传递
    • 11.监听命令的执行时刻
  • 2.4.控制器代码

    @interface ViewController ()
    @property (nonatomic, strong) LoginViewModel *loginViewModel;
    
    @property (weak, nonatomic) IBOutlet UITextField *accountField;
    @property (weak, nonatomic) IBOutlet UITextField *pwdField;
    
    @property (weak, nonatomic) IBOutlet UIButton *loginBtn;
    @end
    
    - (LoginViewModel *)loginViewModel
    {
        if (_loginViewModel == nil) {
    
           _loginViewModel = [[LoginViewModel alloc] init];
        }
       return _loginViewModel;
    }
    
    // 视图模型绑定
    - (void)bindModel
    {
        // 给模型的属性绑定信号
        // 只要账号文本框一改变,就会给account赋值
        RAC(self.loginViewModel.account, account) = _accountField.rac_textSignal;
        RAC(self.loginViewModel.account, pwd) = _pwdField.rac_textSignal;
    
        // 绑定登录按钮
        RAC(self.loginBtn,enabled) = self.loginViewModel.enableLoginSignal;
    
        // 监听登录按钮点击
       [[_loginBtn rac_signalForControlEvents:UIControlEventTouchUpInside] subscribeNext:^(id x) {
    
        // 执行登录事件
        [self.loginViewModel.LoginCommand execute:nil];
      }];
    }
    
  • 2.5.VM的代码

    @interface LoginViewModel : NSObject
    
    @property (nonatomic, strong) Account *account;
    
    // 是否允许登录的信号
    @property (nonatomic, strong, readonly) RACSignal *enableLoginSignal;
    
    @property (nonatomic, strong, readonly) RACCommand *LoginCommand;
    
    @end
    
    @implementation LoginViewModel
    - (Account *)account
    {
          if (_account == nil) {
           _account = [[Account alloc] init];
         }
         return _account;
    }
    - (instancetype)init
    {
           if (self = [super init]) {
              [self initialBind];
          }
          return self;
    }
    
    // 初始化绑定
    - (void)initialBind
    {
         // 监听账号的属性值改变,把他们聚合成一个信号。
         _enableLoginSignal = [RACSignal combineLatest:@[RACObserve(self.account, account),RACObserve(self.account, pwd)] reduce:^id(NSString *account,NSString *pwd){
    
         return @(account.length && pwd.length);
    
        }];
    
         // 处理登录业务逻辑
        _LoginCommand = [[RACCommand alloc] initWithSignalBlock:^RACSignal *(id input) {
    
      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) {
    
       if ([x isEqualToString:@"登录成功"]) {
          NSLog(@"登录成功");
       }
      }];
    
    // 监听登录状态
    [[_LoginCommand.executing skip:1] subscribeNext:^(id x) {
      if ([x isEqualToNumber:@(YES)]) {
    
          // 正在登录ing...
          // 用蒙版提示
          [MBProgressHUD showMessage:@"正在登录..."];
    
        }else
        {
             // 登录成功
             // 隐藏蒙版
             [MBProgressHUD hideHUD];
          }
       }];
     }
    

    MVVM登陆code密码: vkub

三.ReactiveCocoa + MVVM 实战二:网络请求数据

  • 3.1.在此提供以下豆瓣的免费API接口

3.1.1.百度搜索豆瓣进入官网


1.百度搜索豆瓣进入官网

3.1.2.在首页滑到最下面点击在豆瓣工作


2.在首页滑到最下面点击在豆瓣工作

3.1.3.在豆瓣工作的首页滑动到最下面点击开发者
3.1.3.在豆瓣工作的首页滑动到最下面点击开发者

3.1.4.点击在你的应用里面使用API


3.1.4.点击在你的应用里面使用API

3.1.5.点击豆瓣Api V2 (测试版)
3.1.5.点击豆瓣Api V2 (测试版)

3.1.6.API都在这里自己选吧
3.1.6.API都在这里自己选吧
  • 3.2.测试一下接口,在桌面生成一个plist文件,目的是方便查看打印的内容


    测试一下接口
  • 3.3. 正是上代码,需求+分析+步骤

    • 3.3.1. 需求:请求豆瓣图书信息,url:https://api.douban.com/v2/book/search?q=基础

    • 3.3.2.分析:请求一样,交给VM模型管理

    • 3.3.3.步骤:

      • 1.控制器提供一个视图模型(requesViewModel),处理界面的业务逻辑

      • 2.VM提供一个命令,处理请求业务逻辑

      • 3.在创建命令的block中,会把请求包装成一个信号,等请求成功的时候,就会把数据传递出去。

      • 4.请求数据成功,应该把字典转换成模型,保存到视图模型中,控制器想用就直接从视图模型中获取。

      • 5.假设控制器想展示内容到tableView,直接让视图模型成为tableView的数据源,把所有的业务逻辑交给视图模型去做,这样控制器的代码就非常少了。

    • 3.3.4.效果如下


      效果如下
    • 3.3.5.控制器代码

#import "ViewController.h"
#import "JKGlobalHeader.h"
/**
 *  VM层
 */
#import "RequestViewModel.h"
#import "DataModel.h"

#define WIDTH   [UIScreen mainScreen].bounds.size.width
#define HEIGHT  [UIScreen mainScreen].bounds.size.height

@interface ViewController ()

@property(nonatomic,strong) RequestViewModel *requestViewModel;

@property (nonatomic, strong) UITableView *tableView;

@end

@implementation ViewController

 - (void)viewDidLoad {
      [super viewDidLoad];

     //导航栏的操作
    [self daohanglan];


// 创建tableView
self.tableView = [[UITableView alloc]initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT-64)];
self.tableView.dataSource = self.requestViewModel;
self.tableView.delegate = self.requestViewModel;
self.requestViewModel.tabview = self.tableView;
[self.view addSubview:self.tableView];

/**
 *  在这里也可以拿到数据
 */
   [self.requestViewModel.requestCommand.executionSignals.switchToLatest subscribeNext:^(id x) {
    
    NSLog(@"%@",x);
    
}];

   [self.requestViewModel.requestCommand execute:@"开始"];

}

#pragma mark 导航栏
-(void)daohanglan{

   self.edgesForExtendedLayout = UIRectEdgeNone;

   self.title = @"MVVM的初次使用";

   self.navigationController.navigationBar.barTintColor = [UIColor brownColor];
   self.navigationController.navigationBar.titleTextAttributes = @{NSFontAttributeName:[UIFont systemFontOfSize:22],NSForegroundColorAttributeName:[UIColor whiteColor]};

}

//懒加载
-(RequestViewModel *)requestViewModel
{
   if (!_requestViewModel) {
    
     _requestViewModel = [[RequestViewModel alloc]init];
  }
  return _requestViewModel;
}
@end
  • 3.3.6.视图模型(VM)代码

     #import <Foundation/Foundation.h>
     #import "JKGlobalHeader.h"
     @interface RequestViewModel : NSObject<UITableViewDelegate,UITableViewDataSource>
    
     /**
      *  请求命令
      */
     @property(nonatomic,strong,readonly) RACCommand *requestCommand;
    
     /**
      *  建立表格
      */
     @property(nonatomic,strong) UITableView *tabview;
    
     //模型数组
     @property (nonatomic, strong, readonly) NSArray *models;
     @end
    

    // RequestViewModel.m
    // MVVM-网络请求

    import "RequestViewModel.h"

    import "AFNetworking.h"

    import "DataModel.h"

    import "MJExtension.h"

    import "RequestTableViewCell.h"

    import "UIImageView+WebCache.h"

    @interface RequestViewModel ()

    @end

    @implementation RequestViewModel

    -(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) {
          
          // 1.创建请求管理者
          AFHTTPRequestOperationManager *mgr = [AFHTTPRequestOperationManager manager];
          
          //2.开始请求//count
          
          [mgr GET:@"https://api.douban.com/v2/book/search" parameters:@{@"q":@"美女"} success:^(AFHTTPRequestOperation * _Nonnull operation, id  _Nonnull responseObject) {
              
              NSLog(@"请求成功");
              
              NSArray *array =responseObject[@"books"];
              
              array = [DataModel mj_objectArrayWithKeyValuesArray:array];
              
              [subscriber sendNext:array];
              
          } failure:^(AFHTTPRequestOperation * _Nonnull operation, NSError * _Nonnull error) {
              
              NSLog(@"请求失败==%@",error);
              
          }];
          
          return nil;
      }];
      
      return signal;
    

    }];

    // 获取请求的数据
    [_requestCommand.executionSignals.switchToLatest subscribeNext:^(NSArray *x) {

      // 有了新数据,刷新表格
      _models = x;
      
      // 刷新表格
      [self.tabview reloadData];
      
     }];
    

    }

    -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    {
    return self.models.count;
    }

    -(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
    {
    return 139;
    }

    -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
    static NSString *ID = @"iD";

     RequestTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID];
    
      if (!cell) {
      
         cell = [[[NSBundle mainBundle]loadNibNamed:@"RequestTableViewCell" owner:self options:nil]lastObject];
      
         cell.selectionStyle = UITableViewCellSelectionStyleNone;
     }
    
      DataModel *model = self.models[indexPath.row];
    
      NSURL *url = [NSURL URLWithString:model.image];
    
      [cell.picture sd_setImageWithURL:url placeholderImage:nil];
    
      cell.bookName.text = model.title;
    
      return cell;
    

    }
    @end

上面的额源码 密码: n9er

RAC基础篇
RAC进阶篇

记得给一个❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容