iOS MVVM+RAC实战详解（高仿某电商项目）

项目连接

前言

本项目的数据为抓包所得，并且都是用的本地数据，只作为学习用途。项目中所用到的appKey，为了方便调试，不再删除！但是仅作为本项目使用！

写这个项目之前也是对MVVM及RAC了解止于博客之类，写之前花了几天动手写了RAC的一些demo，然后才正式开始的项目，如果对RAC一点不了解的话，建议先看看RAC及FRP(函数响应式编程)，然后再看本项目。RACdemo。

首页 搜索 订单 分享 分类 购物车
指纹支付

关于RAC及MVVM

• RAC-函数响应式编程(FRP)的一个重量级的库，学习难度较为陡峭，不过极大的简化代码，统一了消息传递机制。另外就是性能较原生的有一定的差距，当然，硬件的提升这些差距基本上会感觉不到。
• MVVM-不管是MVVM还是MVP、VIEPR或者MV(X)，用意皆在使代码结构清晰、易于维护、易于测试。另外不管是MVC还是MVVM，都有两种情况，1、整个项目一个大的MVC。2、每个模块都有自己的MVC，比如首页的MVC，我的页面的MVC。各有有点吧。
  这两点不再赘述，适合自己的、自己熟悉的才是最好用的， 另外，新的设计模式会使调试、debug的时间增加很多

pod

使用的第三方不多，除了RAC都是一般项目都有的

use_frameworks!
platform :ios, ‘8.0’
target “WTKWineMVVM” do
pod 'ReactiveCocoa', '4.2.2'
pod 'AFNetworking', '~> 3.1.0'
pod 'SVProgressHUD', '~> 2.0.3'
pod 'SDWebImage' , '3.7.3'
pod 'Masonry'
pod 'MJRefresh', '~> 3.1.12'
pod 'DZNEmptyDataSet', '~> 1.8.1'
pod 'Reachability', '~> 3.2'
pod 'MJExtension', '~> 3.0.13'
end

Common

common

wtk开头的几个是我开发中封装的，这个建议开发中多思考，看那些是可以复用的（或者其他项目可以复用的），都尽量封装起来，方便以后使用。

• WTKQRCode 二维码扫描的，使用的系统的API，已经封装好，QRCode连接。
• WTKStar 星级评价的view，可以支持触摸修改、整形浮点型两种，WTKStar连接
• WTKDropView 带动画下拉列表，项目中有两处用到，一个是还第一次写的，没有封装好，第二次时封装了一下，所以还是建议多封装，避免重复写一样的代码。WTKDropView连接
• WTKTransition 转场动画，项目中的push、pop动画都是圆形扩散的，项目中用的也是还没有封装好的，需要借助basedViewController来实现，后来封装了一个，两行代码可以实现。使用中，如果某界面有手势与pop手势冲突，把pop手势从view上删除即可。WTKTransition连接

Based

这里面包括了tabbarController、navigationController、basedViewController、basedViewModel、viewModelServices、viewModelNavigationImpl

tabbarController

tabbarController主要有添加子控制器、广告页、监听badgeValue、读取本地数据、自定义切换动画，

• 切换动画

  
  切换动画.gif

- (void)beginAnimation
{
    CATransition *animation         = [[CATransition alloc]init];
    animation.duration              = 0.5;
    animation.type                  = kCATransitionFade;
    animation.subtype               = kCATransitionFromRight;
    animation.timingFunction        = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    animation.accessibilityFrame    = CGRectMake(0, 64, kWidth, kHeight);
    [self.view.layer addAnimation:animation forKey:@"switchView"];
}

• 监听bageValue
  实际上就是监听购物车的总数(单例类的一个属性)，然后设置下标，这里使用RACObserver代替KVO实现。

    @weakify(self);
    [RACObserve([WTKUser currentUser], bageValue) subscribeNext:^(id x) {
        @strongify(self);
        UIViewController *vc = self.viewControllers[3];
        NSInteger num = [x integerValue];
        
        dispatch_async(dispatch_get_main_queue(), ^{
            if (num > 0)
            {
                [vc.tabBarItem setBadgeValue:[NSString stringWithFormat:@"%ld",num]];
            }
            else
            {
                [vc.tabBarItem setBadgeValue:nil];
            }
        });
    }];

navigationController

一般项目中，只有一级界面显示tabbar，所以有许多地方push的时候都会隐藏，所以在navigation中，可以实现push方法，然后隐藏，其他地方都不用再处理

- (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated
{
    if (self.viewControllers.count > 0)
    {
        viewController.hidesBottomBarWhenPushed = YES;
    }
    [super pushViewController:viewController animated:animated];
}

另外navigation还有转场动画相关的代理，不再多说。

BasedViewController

basedVC主要是配置一些通用的东西，比如属性viewModel、背景色、返回按钮以及MVVM的核心Bind（绑定）方法。使用basedVC的好处就是一处配置，整个项目通用。

    if (self.navigationController && self != self.navigationController.viewControllers.firstObject)
    {
        [self resetNaviWithTitle:@""];
        UIPanGestureRecognizer *popRecognizer = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(handlePopRecognizer:)];
        [self.view addGestureRecognizer:popRecognizer];
        popRecognizer.delegate = self;
    }

如果不是一级页面，则会自动添加返回按钮。
bindViewModel

- (void)bindViewModel
{
    RAC(self.navigationItem,title)     = RACObserve(self.viewModel, title);
}

这里只是完成了title的绑定，因为每次push的都是viewModel而不是viewController，所以viewModel也声明了一个title的属性。

basedViewModel

主要是实现了构建方法、登录相关。

- (instancetype)initWithService:(id<WTKViewModelServices>)service params:(NSDictionary *)params
{
    self = [super init];
    if (self)
    {
        self.title      = params[@"title"];
        self.params     = params;
        self.services   = service;
    }
    return self;
}

每次创建需要传一个service和param，service用来push，不过这个项目一开始并没有用这个，所以比较遗憾。param用来传值，title必须有！！。

WTKViewModelServices协议

协议，协议方法为push、pop等，

- (void)pushViewModel:(WTKBasedViewModel *)viewModel animated:(BOOL)animated;

- (void)popViewControllerWithAnimation:(BOOL)animated;

- (void)popToRootViewModelWithAnimation:(BOOL)animated;

- (void)presentViewModel:(WTKBasedViewModel *)viewModel animated:(BOOL)animated complete:(void(^)())complete;
///模态弹出vc，用于alert
- (void)presentViewController:(UIViewController *)viewController animated:(BOOL)animated complete:(void(^)())complete;

由于一开始并没有想的太多，所以一开始并没有写模态，以至于需要弹出alert的时候，需要把vc传给viewModel。后来才加上的这个协议，所以一个好的架构师相当的重要。

WTKViewModelNavigationImpl

实现了WTKViewModelServices协议，也就是push、pop都会走这里。由于最后还要pushViewController，而viewModel里面也没有包含vc，所以push的时候，还要指定vc的name，也是一个缺陷吧。
*push方法

WTKRecommendViewModel *viewModel = [[WTKRecommendViewModel alloc]initWithService:self.services params:@{@"title":@"推荐有奖"}];
                self.naviImpl.className = @"WTKRecommendVC";
                [self.naviImpl pushViewModel:viewModel animated:YES];

Tools

Paste_Image.png

有按功能创建的工具类，还有各种公用的tool，

• dataManager 主要是用户数据相关的一些方法，保存、读取、删除。
• shoppingManager 存储购物车数据。
• requestManager 网络请求类。 使用了RAC，一般网络请求的block也使用了RACSignal代替，方法中传一个signal，或者返回一个signal。这里选择了返回一直signal。

 + (RACSignal *)postDicDataWithURL:(NSString *)urlString
                     withpramater:(NSDictionary *)paremater
{
    CGFloat time = arc4random()%15 / 10.0;
    NSDictionary *dic = [NSDictionary dictionaryWithContentsOfFile:[[NSBundle mainBundle] pathForResource:urlString ofType:nil]];
    return [[RACSignal createSignal:^RACDisposable *(id<RACSubscriber> subscriber) {
        [subscriber sendNext:dic];
        [subscriber sendCompleted];
        return nil;
    }] delay:time];
}

由于是加载的本地数据，所以模拟了网络延迟。

• WTKTool 项目中一些常用的方法（分享、登录、购物车动画、指纹验证等等）
  如果是用AFN请求数据，则用下面的方法

 + (RACSignal *)getWithURL:(NSString *)urlString withParamater:(NSDictionary *)paramter
{
    AFHTTPSessionManager *manager = [AFHTTPSessionManager manager];
    manager.requestSerializer.timeoutInterval = 5;
    RACSubject *sub =[ RACSubject subject];
    [manager GET:urlString parameters:paramter progress:nil success:^(NSURLSessionDataTask * _Nonnull task, id  _Nullable responseObject) {
        [sub sendNext:@{@"code":@100,@"data":responseObject}];
        [sub sendCompleted];

    } failure:^(NSURLSessionDataTask * _Nullable task, NSError * _Nonnull error) {
        [sub sendNext:@{@"code":@-400,@"data":@"请求失败"}];
        [sub sendCompleted];
    }];
    return sub;
}

RACSubject为RACSignal的子类，可以允许先创建，再发送信号，所以使用RACSubject。

• mapManager 地图相关。

实现

• 因为多用绑定，并且函数响应式编程，只需要关心结果，所以项目中基本所有的属性基本都用懒加载，避免绑定时还没有创建

---

下面以几个页面来说一下MVVM具体使用。

---

• homeVC

viewDidLoad

 - (void)viewDidLoad {
    [super viewDidLoad];
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(cancelPop) name:@"wtk_cancelPop" object:nil];
    self.automaticallyAdjustsScrollViewInsets = NO;
    [self bindViewModel];
    [self configView];
}

非常简短，监听取消侧滑返回，绑定viewModel，初始化view。
下面主要说说bindViewModel
跟viewDidLoad一样，需要在bindViewModel中实现[super bindViewModel]
绑定数据

    @weakify(self);
//    绑定数据
    RAC(self.collectionView,headArray)  = RACObserve(self.viewModel, headData);
    RAC(self.collectionView,dataArray)  = RACObserve(self.viewModel,dataArray);
    
    self.collectionView.mj_header       = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
        @strongify(self);
        [self.viewModel.refreshCommand execute:self.collectionView];
    }];
    [self.collectionView.mj_header beginRefreshing];
//    navi
    RAC(self,leftButton.rac_command)    = RACObserve(self.viewModel, naviCommand);

解释一下，RAC(...)把某个对象的属性与信号绑定起来。这里把collectionView的dataArray与viewModel的dataArray绑定。
collectionView的刷新方法，让viewModel的refreshCommand执行，并且把collectionView传递过去。
另外，RAC把许多类都添加的属性，一般都是control有关的。比如最后一行的leftbtn的rac_command。

• homeViewModel

实现了业务相关的逻辑、网络请求。 .h文件如下

 /**刷新数据*/
 @property(nonatomic,strong)RACCommand   *refreshCommand;

 @property(nonatomic,strong)NSArray      *headData;

 @property(nonatomic,strong)NSArray      *dataArray;
 ///头视图
 @property(nonatomic,strong)RACCommand   *headCommand;

 ///中间按钮点击
 @property(nonatomic,strong)RACCommand   *btnCommand;

 ///good
 @property(nonatomic,strong)RACCommand   *goodCommand;

 ///导航栏
 @property(nonatomic,strong)RACCommand   *naviCommand;

 @property(nonatomic,strong)RACSubject   *searchSubject;

collectionView不需要再实现传递事件的block，只需要把viewModel传给collectionView，点击方法中执行响应的command即可。

• categoryVC（分类）

 - (void)bindViewModel
 {
    [super bindViewModel];
    @weakify(self);
    [self.viewModel.refreshCommand      execute:@[self.leftTableView,self.rightTableView]];
  //    绑定数据
    RAC(self,leftDataArray)             = RACObserve(self.viewModel, leftArray);
    RAC(_rightTableView,sectionArray)   = RACObserve(self.viewModel, leftArray);
    RAC(_rightTableView,dataDic)        = RACObserve(self.viewModel, dataDic);
    RAC(self.siftView,dataArray)        = RACObserve(self.viewModel, selectArray);
    self.rightTableView.mj_header       = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
        @strongify(self);
        [self.viewModel.refreshCommand execute:@[self.leftTableView,self.rightTableView]];
    }];
 //    右侧tableView滑动
    [self.viewModel.rightCommand.executionSignals.switchToLatest subscribeNext:^(id x) {
        @strongify(self);
        NSIndexPath *indexPath = x;
        [self.leftTableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:indexPath.section inSection:0] animated:YES scrollPosition:UITableViewScrollPositionTop];
    }];
 //    需要传值，所以不这样写
 //    RAC(self.rightBtn,rac_command)      = RACObserve(self.viewModel, selectedCommand);
 //    点击筛选按钮
    [[self.rightBtn rac_signalForControlEvents:UIControlEventTouchUpInside] subscribeNext:^(id x) {
        @strongify(self);
        [self resetSiftView];
        if (self.isFirstSift)
        {
            [self.viewModel.selectedCommand execute:@[self.leftTableView,self.rightTableView,self.siftView]];
            self.isFirstSift = NO;
        }
    }];
 //    移除siftView
    [self.siftView.dismissSubject subscribeNext:^(id x) {
 //       消失
        @strongify(self);
        [self.viewModel beginDismissAnimation:@[self.leftTableView,self.rightTableView]];
    }];
 }

先刷新数据，并且把left、right tableView传过去，供刷新使用。
绑定数据，绑定刷新方法，button使用rac的话，一种是直接绑定它的rac_command，另外一种就是上面代码的那种，如果绑定rac_command，则传过去的只是一个btn，需要其他传值的时候，使用上面的方法。

• cateViewModel

• requestManager的用法

        RACSignal *signal   = [WTKRequestManager postArrayDataWithURL:@"CategoryAllGoods" withpramater:@{}];
        [signal subscribeNext:^(id x) {
//            NSLog(@"%@",x);
            [leftTableView reloadData];
            [rightTableView reloadData];
            [SVProgressHUD dismiss];
            if([rightTableView.mj_header isRefreshing])
            {
                [rightTableView.mj_header endRefreshing];
            }
        }];

获取网络请求的signal,然后订阅即可。

• shoppingCarVC

购物车界面则主要是价格的监听，删除、选中物品的逻辑。只有本次启动app后添加到购物车的商品才会默认选中，读取的本地购物车数据，默认没有选中。
为了简便处理，给商品添加了一个w_isSelected属性，表示是否选中。
全选按钮：

    [[self.selectAllBtn rac_signalForControlEvents:UIControlEventTouchUpInside] subscribeNext:^(id x) {
        @strongify(self);
        self.isClickAllBtn = YES;
        self.viewModel.isClickAllBtn = YES;
        UIButton *btn = x;
        btn.selected = !btn.selected;
        SHOPPING_MANAGER.flag = NO;
        NSArray *array = [SHOPPING_MANAGER.goodsDic allValues];
        [array enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
            WTKGood *good = obj;
            good.w_isSelected = btn.selected;
            if (idx == array.count - 1)
            {
                [self.tableView w_reloadData];
                SHOPPING_MANAGER.goodsDic;
            }
        }];
    }];
RAC(self.selectAllBtn,selected)  = RACObserve(self.viewModel, btnState);

isClickAllBtn，标志当前是否为点击按钮。

• shoppingCarViewModel

主要说一下监听价格

// - 监听价格
    [RACObserve([WTKShoppingManager manager], changed) subscribeNext:^(id x) {
        static BOOL isFirst;//是否是第一次检测到没有选中。用来避免多次改变selectAllBtn
        isFirst                 = YES;
        SHOPPING_MANAGER.flag   = YES;
        NSDictionary *dic       = SHOPPING_MANAGER.goodsDic;
        [[dic allValues] enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
            @strongify(self);
            WTKGood *good = obj;
            if(isFirst && !good.w_isSelected && !self.isClickAllBtn)
            {
//                self.selectAllBtn.selected = !self.selectAllBtn;
                isFirst = NO;
                self.btnState = NO;
            }
            if (idx == 0)
            {
                SHOPPING_MANAGER.price = 0;
            }
            if (good.w_isSelected)
            {
                SHOPPING_MANAGER.price += good.price * good.num;
            }
            if (idx == [dic allValues].count - 1 && isFirst && !self.isClickAllBtn)
            {
                self.btnState = YES;
            }
            if(idx == [dic allValues].count - 1)
            {
                //                self.isClickAllBtn = NO;
                self.isClickAllBtn = NO;
            }
//            self.priceLabel.text    = [NSString stringWithFormat:@"共¥ %.2f",SHOPPING_MANAGER.price];
            self.price = [NSString stringWithFormat:@"共¥ %.2f",SHOPPING_MANAGER.price];
        }];
            SHOPPING_MANAGER.flag = NO;
        [self.emptySubject sendNext:@([dic allValues].count)];
    }];

由于不能监听数组、字典等容器类属性，所以在shoppingManager中，声明了一个change的属性，监听这个属性来获取实时的购物车数据。每次添加、删除购物车数据，都会改变change这个属性，来传递数据。flag属性来判断当前是操作购物车数据还是监听，监听的话就不再改变change，以避免死循环。

• goodVC（商品详情）

商品详情为h5页面，不再多说。评论的cell，带图的和不带图的使用的是同一个cell，合理的利用cell，会减少不必要的冗余。

评论

• loginVC

这个项目除了cell只有这一个页面使用的xib布局，登录页面使用MVVM更加典型，所以详细解释一下这个页面。

login.gif

首先是viewDidLoad

 - (void)viewDidLoad {
    [super viewDidLoad];
    [self bindViewModel];
    [self initView];
    [self.navigationController.navigationBar setBackgroundImage:[UIImage imageFromColor:WTKCOLOR(255, 255, 255, 0.99)] forBarMetrics:UIBarMetricsDefault];
}

initView主要是设置view的相关属性，不多说。
bindViewModel

- (void)bindViewModel
{
    [super bindViewModel];
    @weakify(self);
    RAC(self.viewModel,phoneNum)            = self.phoneTextField.rac_textSignal;
    RAC(self.viewModel,codeNum)             = self.psdTextField.rac_textSignal;
    RAC(self.loginBtn,enabled)              = self.viewModel.canLoginSignal;
    RAC(self.codeBtn,enabled)               = self.viewModel.canCodeSignal;
    [[self.codeBtn rac_signalForControlEvents:UIControlEventTouchUpInside] subscribeNext:^(id x) {
        @strongify(self);
        [self.viewModel.codeCommand execute:x];
    }];
    [[self.loginBtn rac_signalForControlEvents:UIControlEventTouchUpInside] subscribeNext:^(id x) {
        @strongify(self);
        [self.viewModel.loginCommand execute:x];
    }];
    [self.viewModel.loginCommand.executionSignals.switchToLatest subscribeNext:^(id x) {
        if ([x[@"code"] integerValue] == 100)
        {
            @strongify(self);
            [self.navigationController popViewControllerAnimated:YES];
        }
    }];
}

前两个个RAC(self.viewModel,phoneNum) = textField.rac_textSignal
把textField的text赋值给viewModel的phoneNum,并不是只赋值一次，每一次textField改变，都会重新给phoneNum赋值.
RAC(self.loginBtn,enable) = self.viewModel.canLoginSignal
把viewModel的canLoginSignal赋值给loginBtn的enable属性，控制loginBtn的状态.
下面两个block为登录和获取验证码按钮的点击方法，也可以写成下面这样的

RAC(self.codeBtn,rac_command)   = RACObserve(self.viewModel, codeCommand)

也就是点击按钮，viewModel的command会执行。

• loginViewModel

代码：

 - (void)initViewModel
 {
     @weakify(self);
    RACSignal *phoneSignal      = [RACObserve(self, phoneNum) map:^id(id value) {
        @strongify(self);
        return @([self isPhoneNum:value]);
    }];
    RACSignal *codeSignal       = [RACObserve(self, codeNum) map:^id(id value) {
        @strongify(self);
        return @([self isCodeNum:value]);
    }];
    self.canLoginSignal         = [RACSignal combineLatest:@[phoneSignal,codeSignal]
                                                    reduce:^id(NSNumber *phone,NSNumber *code){
        return @([phone boolValue] && [code boolValue]);
    }];
    self.canCodeSignal          = [RACSignal combineLatest:@[phoneSignal]
                                                    reduce:^id(NSNumber *phone){
        return @([phone boolValue]);
    }];
    self.codeCommand            = [[RACCommand alloc]initWithSignalBlock:^RACSignal *(id input) {
        UIButton *btn           = input;
        btn.enabled             = NO;
        self.time               = 60;
        [btn setTitle:[NSString stringWithFormat:@"%ld",self.time] forState:UIControlStateNormal];
       __block NSTimer *timer   = [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(updateCodeTime:) userInfo:btn repeats:YES];
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(60 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [timer invalidate];
            timer               = nil;
            btn.enabled         = YES;
            [btn setTitle:@"验证" forState:UIControlStateNormal];
        });
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(arc4random() % 12 / 15.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            SHOW_SUCCESS(@"发送成功");
            DISMISS_SVP(1.2);
            
        });
        return [RACSignal empty];
    }];
    self.loginCommand           = [[RACCommand alloc]initWithSignalBlock:^RACSignal *(id input) {
        [WTKTool login];
        CURRENT_USER.phoneNum   = self.phoneNum;
        [WTKDataManager saveUserData];
        SHOW_SUCCESS(@"登录成功");
        DISMISS_SVP(1);
        return [RACSignal createSignal:^RACDisposable *(id<RACSubscriber> subscriber) {
            [subscriber sendNext:@{@"code":@100}];
            [subscriber sendCompleted];
            return [RACDisposable disposableWithBlock:^{
                NSLog(@"信号被销毁");
            }];
        }];
    }];
 }

 - (BOOL)isPhoneNum:(NSString *)phoneNum
 {
    if ([phoneNum hasPrefix:@"1"])
    {
        return phoneNum.length == 13;
    }
    return NO;
 }
 - (BOOL)isCodeNum:(NSString *)code
{
    return [code integerValue] == self.code;
}

• phoneSignal - 监听phoneNum，并且判断当前的phoneNum是否为正确的手机号。
• codeSignal与phoneSignal相同，判断当前code是否为正确的验证码（是否等于@“1234”）。
• self.canLoginSignal - 将phoneSignal与codeSignal合并成一个信号，如果两个同时为YES，则canLoginSignal会发一个内容YES的信号。登录页面的loginBtn的enable会根据信号的内容而改变。
• self.canCodeSignal与canLoginSignal类似，不过不是两个信号的合并。
• self.codeCommand，codeBtn的点击方法，与MVVM无关，不再多说.
• self.loginCommand,登录方法，处理一些登录的逻辑。
  下面两个方法为判断手机号及验证码的相关逻辑。

总结

使用MVVM+RAC写完这个项目，感觉很不错，很屌的框架，根本就停不下来。就算不用MVVM，也建议使用一下RAC框架开发试试。简化、统一，就是不大量使用RAC，也可以使用它代替原来的代理、block、通知，把回调、代理之类的写一个函数里，使得一个业务的代码写在一个地方，比如项目中我的页面的导航栏渐变。并且使用通知及KVO，不用在dealloc中移除了，RAC已经处理。
不过由于RAC由cocoa的OOP变成了FRP，使得学习曲线陡峭，所以并没有被大规模的采纳，并且刚入手时，debug时间也会增加。
如果对你有帮助，可以在git上给个star，会持续更新。
项目连接

---

12.27更新
关于百度地图报错，很多童鞋解决不了，这里贴出来解决办法。把报红的删除，然后重新来进来即可。文件位置(项目-vendor-baiduMap-baiduMapAPI_Map.framework-Resources-mapapi.bundle)