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也未尝不可。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容