项目经验iOS高级开发iOS猛码计划

iOS MVVM+RAC实战详解(高仿某电商项目)

2016-11-21  本文已影响7966人  逆流丶而上

项目连接

前言

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

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

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

关于RAC及MVVM

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开头的几个是我开发中封装的,这个建议开发中多思考,看那些是可以复用的(或者其他项目可以复用的),都尽量封装起来,方便以后使用。

Based

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

tabbarController

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

- (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"];
}
    @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,

 + (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];
}

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

 + (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。

实现


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


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。

实现了业务相关的逻辑、网络请求。 .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即可。

 - (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,需要其他传值的时候,使用上面的方法。

        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,然后订阅即可。

购物车界面则主要是价格的监听,删除、选中物品的逻辑。只有本次启动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,标志当前是否为点击按钮。

主要说一下监听价格

// - 监听价格
    [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,以避免死循环。

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

评论

这个项目除了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会执行。

代码:

 - (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;
}

总结

使用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)

上一篇下一篇

猜你喜欢

热点阅读