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進階篇

記得給一個????????????????????????????????????

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容