ReactiveCocoa框架下的MVVM模式解读
记录一些MVVM文章中关于ReactiveCocoa的代码：
实例一：带有分页的文章列表，根据文章类别过滤出文章的列表，可以进入文章详细页面
1：YFBlogListViewModel 首先了解关于列表的ViewModel的代码内容：
#import <Foundation/Foundation.h> #import <ReactiveCocoa.h> @class YFCategoryArticleListModel; /** * 文章列表的视图模型. */ @interface YFBlogListViewModel : NSObject @property (copy, nonatomic) NSArray * blogListItemViewModels; //!< 文章.内部存储的应为文章列表单元格的视图模型.注意: 刷新操作,存储第一页数据;翻页操作,将存储所有的数据,并按页面排序. /** * 使用一个分类文章列表数据模型来快速初始化. * * @param model 文章列表模型. * * @return 实例对象. */ - (instancetype)initWithCategoryArtilceListModel: (YFCategoryArticleListModel *) model; /** * 获取首页的数据.常用于下拉刷新. * */ - (void)first; /** * 翻页,获取下一页的数据.常用于上拉加载更多. */ - (void)next; @end
#import "YFBlogListViewModel.h" #import <ReactiveCocoa.h> #import <AFNetworking.h> #import <RACAFNetworking.h> #import "YFCategoryArticleListModel.h" #import <MJExtension.h> #import "YFBlogListItemViewModel.h" #import "YFArticleModel.h" @interface YFBlogListViewModel () @property (strong, nonatomic) AFHTTPRequestOperationManager * httpClient; @property (strong, nonatomic) NSNumber * nextPageNumber; //!< 下次要请求第几页的数据. @property (copy, nonatomic) NSString * category; //!< 文章类别. @property (copy, nonatomic) NSString * requestPath; //!< 完整接口地址. @end @implementation YFBlogListViewModel - (instancetype)initWithCategoryArtilceListModel:(YFCategoryArticleListModel *)model { self = [super init]; if (nil != self) { // 设置 self.category 与 model.category 的关联. [RACObserve(model, category) subscribeNext:^(NSString * categoryName) { self.category = categoryName; }]; // 和类型无关的RAC 初始化操作,应该剥离出来. [self setup]; } return self; } /** * 和数据模型无关的初始化设置,放到独立的方法中. */ - (void)setup { // 初始化网络请求相关的信息. self.httpClient = [AFHTTPRequestOperationManager manager]; self.httpClient.requestSerializer = [AFJSONRequestSerializer serializer]; self.httpClient.responseSerializer = [AFJSONResponseSerializer serializer]; // 设置 self.nextPageNumber 与self.category的关联. [RACObserve(self, category) subscribeNext:^(id x) { // 只要分类变化,下次请求,都需要重置为请求第零页的数据. self.nextPageNumber = @0; }]; // 接口完整地址,肯定是受分类和页面的影响的.但是因为分类的变化最终会通过分页的变化来体现,所以此处仅需监测分页的变化情况即可. [RACObserve(self, nextPageNumber) subscribeNext:^(NSNumber * nextPageNumber) { NSString * path = [NSString stringWithFormat: @"http://www.ios122.com/find_php/index.php?viewController=YFPostListViewController&model[category]=%@&model[page]=%@", self.category, nextPageNumber]; self.requestPath = path; }]; // 每次数据完整接口变化时,必然要同步更新 blogListItemViewModels 的值. [[RACObserve(self, requestPath) filter:^BOOL(id value) { return value; }] subscribeNext:^(NSString * path) { /** * 分两种情况: 如果是变为0,说明是重置数据;如果是大于0,说明是要加载更多数据;不处理向上翻页的情况. */ NSMutableArray * articls = [NSMutableArray arrayWithCapacity: 42]; if (YES != [self.nextPageNumber isEqualToNumber: @0]) { [articls addObjectsFromArray: self.blogListItemViewModels]; } [[self.httpClient rac_GET:path parameters:nil] subscribeNext:^(RACTuple *JSONAndHeaders) { // 使用MJExtension将JSON转换为对应的数据模型. NSArray * newArticles = [YFArticleModel objectArrayWithKeyValuesArray: JSONAndHeaders.first]; // RAC 风格的数组操作. RACSequence * newblogViewModels = [newArticles.rac_sequence map:^(YFArticleModel * model) { YFBlogListItemViewModel * vm = [[YFBlogListItemViewModel alloc] initWithArticleModel: model]; return vm; }]; [articls addObjectsFromArray: newblogViewModels.array]; self.blogListItemViewModels = articls; }]; }]; } - (void)first { self.nextPageNumber = @0; } - (void)next { self.nextPageNumber = [NSNumber numberWithInteger: [self.nextPageNumber integerValue] + 1]; } @end
2：YFCategoryArticleListModel模型的内容
#import <Foundation/Foundation.h> /** * 分类文章列表. */ @interface YFCategoryArticleListModel : NSObject @property (copy, nonatomic) NSString * category; //!< 分类 @property (strong, nonatomic) NSArray * articles; //!< 此分类下的文章列表. @end
3：ViewController的代码
#import <UIKit/UIKit.h> @class YFBlogListViewModel; @interface YFMVVMPostListViewController : UIViewController<UITableViewDelegate, UITableViewDataSource> @property (nonatomic, strong) UITableView * tableView; @property (strong, nonatomic) YFBlogListViewModel * viewModel; @end
#import "YFMVVMPostListViewController.h" #import "YFBlogListViewModel.h" #import <ReactiveCocoa.h> #import "YFCategoryArticleListModel.h" #import "YFBlogListViewModel.h" #import "YFBlogListItemViewModel.h" #import "YFArticleModel.h" #import "YFBlogDetailViewModel.h" #import <MJRefresh.h> #import "YFMVVMPostViewController.h" @interface YFMVVMPostListViewController () @end @implementation YFMVVMPostListViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. [RACObserve(self.viewModel, blogListItemViewModels) subscribeNext:^(id x) { [self updateView]; }]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } - (UITableView *)tableView { if (nil == _tableView) { _tableView = [[UITableView alloc] init]; [self.view addSubview: _tableView]; [_tableView makeConstraints:^(MASConstraintMaker *make) { make.edges.equalTo(UIEdgeInsetsMake(0, 0, 0, 0)); }]; _tableView.delegate = self; _tableView.dataSource = self; NSString * cellReuseIdentifier = NSStringFromClass([UITableViewCell class]); [_tableView registerClass: NSClassFromString(cellReuseIdentifier) forCellReuseIdentifier:cellReuseIdentifier]; _tableView.header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{ [self.viewModel first]; }]; _tableView.footer = [MJRefreshBackNormalFooter footerWithRefreshingBlock:^{ [self.viewModel next]; }]; } return _tableView; } /** * 更新视图. */ - (void) updateView { [self.tableView.header endRefreshing]; [self.tableView.footer endRefreshing]; [self.tableView reloadData]; } # pragma mark - tabelView代理方法. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { NSInteger number = self.viewModel.blogListItemViewModels.count; return number; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { NSString * cellReuseIdentifier = NSStringFromClass([UITableViewCell class]); UITableViewCell * cell = [tableView dequeueReusableCellWithIdentifier: cellReuseIdentifier forIndexPath:indexPath]; YFBlogListItemViewModel * vm = self.viewModel.blogListItemViewModels[indexPath.row]; NSString * content = vm.intro; cell.textLabel.text = content; cell.selectionStyle = UITableViewCellSelectionStyleNone; return cell; } - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { // 跳转到博客详情. YFBlogListItemViewModel * itemVM = self.viewModel.blogListItemViewModels[indexPath.row]; YFMVVMPostViewController * postVC = [[YFMVVMPostViewController alloc] init]; YFBlogDetailViewModel * detailVM = [[YFBlogDetailViewModel alloc] init]; detailVM.blogId = itemVM.blogId; postVC.viewModel = detailVM; [self.navigationController pushViewController: postVC animated: YES]; } @end
4：跳转到当前页面的内容
YFMVVMPostListViewController * mvvmPostVC = [[YFMVVMPostListViewController alloc] init]; YFCategoryArticleListModel * articleListModel = [[YFCategoryArticleListModel alloc] init]; articleListModel.category = @"ui"; YFBlogListViewModel * listVM = [[YFBlogListViewModel alloc] initWithCategoryArtilceListModel: articleListModel]; mvvmPostVC.viewModel = listVM; [self.navigationController pushViewController: mvvmPostVC animated: YES];
5：详细页面的ViewModel代码：
#import <Foundation/Foundation.h> @class YFArticleModel; /** * 文章详情的视图模型. */ @interface YFBlogDetailViewModel : NSObject @property (copy, nonatomic) NSString * content; // 要显示的内容. @property (copy, nonatomic) NSString * blogId; //!< 博客ID. - (instancetype)initWithModel: (YFArticleModel *) model; @end
#import "YFBlogDetailViewModel.h" #import <ReactiveCocoa.h> #import "YFArticleModel.h" #import <RACAFNetworking.h> #import <MJExtension.h> @interface YFBlogDetailViewModel () @property (strong, nonatomic) AFHTTPRequestOperationManager * httpClient; @property (copy, nonatomic) NSString * requestPath; //!< 完整接口地址. @end @implementation YFBlogDetailViewModel - (instancetype)init { self = [self initWithModel: nil]; return self; } - (instancetype)initWithModel:(YFArticleModel *)model { self = [super init]; if (nil != self) { // 设置self.blogId与model.id的相互关系. [RACObserve(model, id) subscribeNext:^(id x) { self.blogId = x; }]; [self setup]; } return self; } /** * 公共的与Model无关的初始化. */ - (void)setup { // 初始化网络请求相关的信息. self.httpClient = [AFHTTPRequestOperationManager manager]; self.httpClient.requestSerializer = [AFJSONRequestSerializer serializer]; self.httpClient.responseSerializer = [AFJSONResponseSerializer serializer]; // 接口完整地址,肯定是受id影响. [[RACObserve(self, blogId) filter:^BOOL(id value) { return value; }] subscribeNext:^(NSString * blogId) { NSString * path = [NSString stringWithFormat: @"http://www.ios122.com/find_php/index.php?viewController=YFPostViewController&model[id]=%@", blogId]; self.requestPath = path; }]; // 每次完整的数据接口变化时,必然要同步更新 self.content 的值. [[RACObserve(self, requestPath) filter:^BOOL(id value) { return value; }] subscribeNext:^(NSString * path) { [[self.httpClient rac_GET:path parameters:nil] subscribeNext:^(RACTuple *JSONAndHeaders) { // 使用MJExtension将JSON转换为对应的数据模型. YFArticleModel * model = [YFArticleModel objectWithKeyValues:JSONAndHeaders.first]; self.content = model.body; }]; }]; } @end
6：详细页面的ViewController
#import <UIKit/UIKit.h> @class YFBlogDetailViewModel; @interface YFMVVMPostViewController : UIViewController @property (strong, nonatomic) YFBlogDetailViewModel * viewModel; @end
#import "YFMVVMPostViewController.h" #import "YFBlogDetailViewModel.h" #import <ReactiveCocoa.h> @interface YFMVVMPostViewController () @property (strong, nonatomic) UIWebView * webView; @end @implementation YFMVVMPostViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. [RACObserve(self.viewModel, content) subscribeNext:^(id x) { [self updateView]; }]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } - (UIWebView *)webView { if (nil == _webView) { _webView = [[UIWebView alloc] init]; [self.view addSubview: _webView]; [_webView makeConstraints:^(MASConstraintMaker *make) { make.edges.equalTo(UIEdgeInsetsMake(0, 0, 0, 0)); }]; } return _webView; } /** * 更新视图. */ - (void) updateView { [self.webView loadHTMLString: self.viewModel.content baseURL:nil]; } @end
实例二：用户列表实例
1：用户列表的ViewModel代码UsersViewModel
#import <ReactiveViewModel/ReactiveViewModel.h> @class RACCommand; #pragma mark - @interface UsersViewModel : RVMViewModel /// Array of UserViewModel objects filled by userViewModelsCommand. @property (nonatomic, readonly) NSArray *userViewModels; /// Input: nil @property (nonatomic, readonly) RACCommand *userViewModelsCommand; /// Input: nil @property (nonatomic, readonly) RACCommand *clearImageCacheCommand; @property (nonatomic, readonly, getter=isLoading) BOOL loading; @end
#import "UsersViewModel.h" #import "UserViewModel.h" #import "UserController.h" #import "User.h" #import "ImageController.h" #import <ReactiveCocoa/ReactiveCocoa.h> #import <ReactiveCocoa/RACEXTScope.h> #pragma mark - @implementation UsersViewModel - (instancetype)init { self = [super init]; if (self) { UserController *userController = [[UserController alloc] init]; ImageController *imageController = [ImageController sharedController]; _userViewModelsCommand = [[RACCommand alloc] initWithSignalBlock:^RACSignal *(id _) { return [[[userController fetchRandomUsers:100] subscribeOn:[RACScheduler scheduler]] map:^NSArray *(NSArray *users) { return [[[users rac_sequence] map:^UserViewModel *(User *user) { return [[UserViewModel alloc] initWithUser:user imageController:imageController]; }] array]; }]; }]; RAC(self, userViewModels) = [[[_userViewModelsCommand executionSignals] switchToLatest] deliverOn:[RACScheduler mainThreadScheduler]]; RAC(self, loading) = [_userViewModelsCommand executing]; _clearImageCacheCommand = [[RACCommand alloc] initWithEnabled:[RACObserve(self, loading) not] signalBlock:^RACSignal *(id _) { return [imageController purgeLocalCaches]; }]; } return self; } @end
2：另外封装UserController的代码：
@class RACSignal; #pragma mark - @interface UserController : NSObject /// Sends an array of fabricated User objects then completes. - (RACSignal *)fetchRandomUsers:(NSUInteger)numberOfUsers; @end
#import "UserController.h" #import "User.h" #import <ReactiveCocoa/ReactiveCocoa.h> #import <LoremIpsum/LoremIpsum.h> #pragma mark - @implementation UserController - (RACSignal *)fetchRandomUsers:(NSUInteger)numberOfUsers { return [RACSignal createSignal:^RACDisposable *(id<RACSubscriber> subscriber) { NSMutableArray *usersArray = [NSMutableArray array]; for (int i = 0; i < numberOfUsers; i++) { NSString *name = [LoremIpsum name]; NSURL *avatarURL = [[LoremIpsum URLForPlaceholderImageFromService:LIPlaceholderImageServiceHhhhold withSize:CGSizeMake(96, 96)] URLByAppendingPathComponent:[NSString stringWithFormat:@"jpg?test=%i", i]]; User *user = [[User alloc] initWithName:name avatarURL:avatarURL]; [usersArray addObject:user]; } [subscriber sendNext:[usersArray copy]]; [subscriber sendCompleted]; return nil; }]; } @end
3：Model的代码：
#pragma mark - @interface User : NSObject @property (nonatomic, readonly) NSString *name; @property (nonatomic, readonly) NSURL *avatarURL; - (instancetype)initWithName:(NSString *)name avatarURL:(NSURL *)avatarURL; @end
#import "User.h" #pragma mark - @implementation User - (instancetype)initWithName:(NSString *)name avatarURL:(NSURL *)avatarURL { self = [super init]; if (self != nil) { _name = name; _avatarURL = avatarURL; } return self; } @end
4：ViewController的代码
@class UsersViewModel; @interface UsersViewController : UITableViewController - (instancetype)initWithViewModel:(UsersViewModel *)viewModel; @end
#import "UsersViewController.h" #import "UsersViewModel.h" #import "UserViewModel.h" #import "UserCell.h" #import <ReactiveCocoa/ReactiveCocoa.h> #import <ReactiveCocoa/RACEXTScope.h> #pragma mark - @interface UsersViewController () @property (nonatomic, readonly) UsersViewModel *viewModel; @end @implementation UsersViewController - (instancetype)initWithViewModel:(UsersViewModel *)viewModel { self = [super init]; if (self != nil) { _viewModel = viewModel; } return self; } - (void)viewDidLoad { [super viewDidLoad]; self.tableView.rowHeight = 48; [self.tableView registerClass:[UserCell class] forCellReuseIdentifier:NSStringFromClass([UserCell class])]; @weakify(self); self.title = NSLocalizedString(@"Random Users", nil); UIBarButtonItem *clearImageCacheBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:NSLocalizedString(@"Clear Cache", nil) style:UIBarButtonItemStylePlain target:nil action:nil]; clearImageCacheBarButtonItem.rac_command = self.viewModel.clearImageCacheCommand; self.navigationItem.rightBarButtonItem = clearImageCacheBarButtonItem; self.refreshControl = [[UIRefreshControl alloc] init]; [[[self.refreshControl rac_signalForControlEvents:UIControlEventValueChanged] mapReplace:self.viewModel.userViewModelsCommand] subscribeNext:^(RACCommand *userViewModelsCommand) { [userViewModelsCommand execute:nil]; }]; [RACObserve(self.viewModel, loading) subscribeNext:^(NSNumber *loading) { @strongify(self); if ([loading boolValue]) { [self.refreshControl beginRefreshing]; [UIApplication sharedApplication].networkActivityIndicatorVisible = YES; } else { [self.refreshControl endRefreshing]; [UIApplication sharedApplication].networkActivityIndicatorVisible = NO; } }]; [[RACObserve(self.viewModel, userViewModels) ignore:nil] subscribeNext:^(id _) { @strongify(self); [self.tableView reloadData]; }]; [self.viewModel.userViewModelsCommand execute:nil]; } #pragma mark UITableViewDataSource - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 1; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return [self.viewModel.userViewModels count]; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { UserViewModel *viewModel = self.viewModel.userViewModels[indexPath.row]; UserCell *cell = [tableView dequeueReusableCellWithIdentifier:NSStringFromClass([UserCell class]) forIndexPath:indexPath]; cell.viewModel = viewModel; cell.viewModel.active = YES; return cell; } # pragma mark UITableViewDelegate - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { UserViewModel *userViewModel = self.viewModel.userViewModels[indexPath.row]; NSLog(@"Selected: %@", userViewModel); [tableView deselectRowAtIndexPath:indexPath animated:YES]; } - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath { } - (void)tableView:(UITableView *)tableView didEndDisplayingCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath { UserCell *userCell = (UserCell *)cell; userCell.viewModel.active = NO; } @end
6：UserCell代码：
@class UserViewModel; #pragma mark - @interface UserCell : UITableViewCell @property (nonatomic) UserViewModel *viewModel; @end
#import "UserCell.h" #import "ImageView.h" #import "UserViewModel.h" #import "ImageViewModel.h" #import <ReactiveCocoa/ReactiveCocoa.h> #pragma mark - @interface UserCell () @property (nonatomic, readonly) ImageView *avatarImageView; @end @implementation UserCell - (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier { self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]; if (self != nil) { _avatarImageView = [[ImageView alloc] init]; [self.contentView addSubview:_avatarImageView]; } return self; } - (void)setViewModel:(UserViewModel *)viewModel { if (_viewModel == viewModel) return; _viewModel = viewModel; self.avatarImageView.viewModel = _viewModel.imageViewModel; self.textLabel.text = _viewModel.name; } - (void)layoutSubviews { [super layoutSubviews]; self.avatarImageView.frame = CGRectMake(0, 0, 48, 48); self.textLabel.frame = CGRectMake(58, 0, 260, 48); } @end
7：调用主控制器跳转
UsersViewModel *usersViewModel = [[UsersViewModel alloc] init];
UsersViewController *usersViewController = [[UsersViewController alloc] initWithViewModel:usersViewModel];
另：reactivecocoa afnetworking地交互可以查下面这个实例，地址：https://github.com/octokit/octokit.objc
小项目框架设计(ReactiveCocoa+MVVM+AFNetworking+FMDB) 地址：http://www.tuicool.com/articles/Q3uuQvA
