MVVM模式的简单通俗理解

目前MVVM模式是移动开发里面讨论的较多的开发设计模式了,随之而来的还有ReactiveCocoa框架。但是MVVM设计模式并不意味着非要用ReactiveCocoa框架,毕竟这个框架是一个重型框架,一般的应用也不用搞得这么复杂。前些时公司app改版,使用MVVM模式重构了一下代码,这里写下来仅仅是记录我这一段时间的实践总结,希望能尽量说明白一点。

1、MVVM和MVC的区别

MVC不用说了,都清楚。MVVM的话,所有讲MVVM的文章都会拿出这个图:



与MVC的区别在于中间多了个View Model,以前的MVC是view controller直接和model打交道,然后用model去填充view。这里MVVM的view model把view controller/view和model隔开了。理论就说道这里,那么问题是:
1、这样做的好处是什么?
2、怎么设计这个view model?

2、MVC我们是怎么写代码的?

比如这个普通的评论列表:



这个评论列表有三个地方要注意:一是动态行高,二是点赞数根据数量大小有不同的显示,三是回复评论前面要加上颜色不同的“@XX”。一般MVC写代码是这样的,代码结构如下:


下面是主要代码:

@implementation KTCommentsViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  // Do any additional setup after loading the view from its nib.
 
  self.title = @"评论列表";
  [self.tableView registerNib:[UINib nibWithNibName:@"KTCommentCell" bundle:nil] forCellReuseIdentifier:kKTCommentCellIdentifier];
  [self createData];
}

// 1、获取数据
- (void)createData
{
  NSMutableArray *array = [NSMutableArray arrayWithCapacity:10];
  for (NSUInteger ii = 0; ii < 20; ++ii) {
    KTComment *comment = [[KTComment alloc] init];
    comment.commentId = ii + 1;
    [array addObject:comment];
    comment.userName = [NSString stringWithFormat:@"名字%lu", (unsigned long)(ii + 1)];
    comment.userAvatar = @"user_default";
    NSMutableArray *strsArray = [NSMutableArray arrayWithCapacity:ii + 1];
    for (NSUInteger jj = 0; jj < ii + 1; ++jj) {
      [strsArray addObject:@"这是评论"];
    }
    comment.content = [strsArray componentsJoinedByString:@","];
    comment.commentTime = [NSDate date];
    if (ii % 3 == 0) {
      comment.repliedUserId = 10;
      comment.repliedUserName = @"张三";
      comment.favourNumber = 1000 * 3 * 10 * ii;
    } else {
      comment.favourNumber = 3000 * ii;
    }
  }
  self.commentsList = array;
}

#pragma mark -- tableView --

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

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
  // 2、计算高度
  KTComment *comment = [self.commentsList objectAtIndex:indexPath.row];
  CGFloat width = [UIScreen mainScreen].bounds.size.width - 10 - 12 - 35 - 10;
  CGFloat commnetHeight = [comment.content boundingRectWithSize:CGSizeMake(width, CGFLOAT_MAX) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:14]} context:nil].size.height;
 
  return commnetHeight + 15 + 21;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
  KTCommentCell *cell = [tableView dequeueReusableCellWithIdentifier:kKTCommentCellIdentifier forIndexPath:indexPath];
  KTComment *comment = [self.commentsList objectAtIndex:indexPath.row];
  cell.comment = comment;
 
  return cell;
}
// KTCommentCell
- (void)setComment:(KTComment *)comment
{
  _comment = comment;
 
  [_avatarImageView setImage:[UIImage imageNamed:comment.userAvatar]];
  [_nameLabel setText:comment.userName];
  [_timeLabel setText:[comment.commentTime ov_commonDescription]];
  // 3、判断是否是回复评论的逻辑
  if (comment.repliedUserName.length > 0) {
    NSMutableAttributedString *attrContent = [[NSMutableAttributedString alloc] init];
    NSString *header = [NSString stringWithFormat:@"@%@ ", comment.repliedUserName];
    NSAttributedString *reply = [[NSAttributedString alloc] initWithString:header attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:14], NSForegroundColorAttributeName : [UIColor blueColor]}];
    [attrContent appendAttributedString:reply];
    NSAttributedString *content = [[NSAttributedString alloc] initWithString:comment.content attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:14], NSForegroundColorAttributeName : [UIColor darkGrayColor]}];
    [attrContent appendAttributedString:content];
    [_commentLabel setAttributedText:attrContent];
  } else {
    [_commentLabel setText:comment.content];
  }
  // 4、根据点赞数量显示“改造”后的点赞数量的逻辑
  NSString *favourString = nil;
  if (comment.favourNumber == 0) {
    favourString = nil;
  } else if (comment.favourNumber < 10000) {
    favourString = [NSString stringWithFormat:@"%lld赞", comment.favourNumber];
  } else if (comment.favourNumber < 10000) {
    float floatNum = (double)comment.favourNumber / 10000.0;
    favourString = [NSString stringWithFormat:@"%.1f万赞", floatNum];
  } else {
    NSInteger intNum = comment.favourNumber / 10000;
    favourString = [NSString stringWithFormat:@"%ld万赞", (long)intNum];
  }
  _favourLabel.text = favourString;
}

MVC模式里面,可以看出我们的view controller和view(KTCommentCell)是直接和Model(KTComment)打交道的,对于数据的处理逻辑,也是直接写在view controller和view中的,比如:
1、获取数据:像上面的标注1处,如果这个地方的逻辑变得复杂,比如有缓存数据,先要读取数据库,判断有没有缓存数据,没有的话请求网络,数据回来之后还要解析,存储,那么1处的代码会变得冗长。
2、行高计算:很多应用都涉及到动态行高计算,像标注2处写在这里首先是让view controller臃肿,另外这个行高方法会频繁调用,那么频繁计算会严重影响tableView的滑动性能。
3、数据加工逻辑:有些model的属性是不能直接为view所用的,比如上面3、4两处需要将model的属性加工一下再显示,MVC中这个加工逻辑也是写在view中的。
这只是一个简单的例子,简单的例子这样写没有什么大问题。但是如果遇到比较复杂的界面,这么写下去会导致view controller和view的代码越来越多,而且难以复用,MVC就变成了胖view controller模式。

3、MVVM怎么写?

MVVM的提出就是为了减轻view controller和view的负担的,view model将上面提到的获取数据,行高计算,数据加工逻辑从view controller和view中剥离出来,同时把view controller/view和model隔离开。

3.1、剥离行高计算,数据加工逻辑

如下所示,添加view model:


Paste_Image.png

下面是代码示例:

@interface KTCommentViewModel : NSObject

@property (nonatomic, strong) KTComment *comment;
// 根据文本多少计算得到行高
@property (nonatomic, assign) CGFloat cellHeight;
// 根据是否是回复,计算得到的富文本
@property (nonatomic, copy) NSAttributedString *commentContent;
// 根据点赞数计算得到的显示文字
@property (nonatomic, copy) NSString *favourString;

@end

@implementation KTCommentViewModel

- (void)setComment:(KTComment *)comment
{
  _comment = comment;
 
  // 1、计算行高,并用属性存起来
  // 2、根据是否是回复,计算得到的富文本
  // 3、根据点赞数计算得到的显示文字
}

@end

这里的1、2、3处的代码基本上等同于将前面view、view controller中2、3、4处的代码拷贝过来,这里就省略了。可以看出view model的作用是:
1、和model打交道。
2、做一些逻辑处理和计算。
3、和view、view controller打交道,并提供更为直观的数据,比如上面的cellHeight,commentContent,favourString等属性。
这样一来,上面的2、3、4处的代码被移到view model中了,view、view controller清爽了很多,而且职责更加分明,行高频繁计算也避免了,因为行高被view model给缓存了,只计算一遍就行了。下面是view controller和view的变化:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
  KTCommentViewModel *viewModel = [self.commentsList objectAtIndex:indexPath.row];
 
  return viewModel.cellHeight;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
  KTCommentCell *cell = [tableView dequeueReusableCellWithIdentifier:kKTCommentCellIdentifier forIndexPath:indexPath];
  KTCommentViewModel *viewModel = [self.commentsList objectAtIndex:indexPath.row];
  cell.commentViewModel = viewModel;
 
  return cell;
}

//  KTCommentCell
- (void)setCommentViewModel:(KTCommentViewModel *)commentViewModel
{
  _commentViewModel = commentViewModel;
 
  [_avatarImageView setImage:[UIImage imageNamed:commentViewModel.comment.userAvatar]];
  [_nameLabel setText:commentViewModel.comment.userName];
  [_timeLabel setText:[commentViewModel.comment.commentTime ov_commonDescription]];
  _commentLabel.attributedText = commentViewModel.commentContent;
  _favourLabel.text = commentViewModel.favourString;
}
3.2、剥离获取数据逻辑

如下创建一个列表view model:



代码示例如下:

@interface KTCommentListViewModel : NSObject

@property (nonatomic, copy) NSArray<KTCommentViewModel *> *commentViewModelList;

- (void)loadComments;

@end

KTCommentListViewModel的职责也很清楚,就是负责获取数据,然后为每个comment创建一个KTCommentViewModel对象,并保存到列表中。那么view controller就可以将获取数据的代码挪到这个view model中来,view controller只用调用KTCommentListViewModel提供的方法和数据就可以了:

- (void)viewDidLoad {
  [super viewDidLoad];
  // Do any additional setup after loading the view from its nib.

  self.commentListViewModel = [[KTCommentListViewModel alloc] init];
  [self.commentListViewModel loadComments];
}

4、总结

基本上算是搞懂了第一张图的含义。view和view controller拥有view model,view model拥有model,相比较MVC的区别在于view和view controller是通过view model来间接操作数据的。这样做的意义在于,对于一些比较复杂的操作逻辑,可以写到view model里面,从而简化view和view controller,view和view controller只干展示数据和接受交互事件就好了;反过来model的update,驱动view model的update,然后再驱动view和view controller变化,这个中间的加工逻辑也可以写在view model中。
当然对于一些比较简单的应用界面,使用MVC就绰绰有余了,并不需要用MVVM,用哪种
还要看实际情况和个人喜好吧。

另外如同 @Noah1985 说的,我这个例子并没有加上model反向驱动view model和view/view controller的部分,并不能算是完全的MVVM,实际应用中可以加上RAC。但如果自己能理清回调和update机制的话,不用RAC也未尝不可。

推荐阅读更多精彩内容