美文网首页设计模式
用Protocol来分离的View和Model

用Protocol来分离的View和Model

作者: iDeveloper | 来源:发表于2017-08-08 19:16 被阅读30次

在项目中,不同的Model常常要显示在相同的View上. 例如tableView的cell,常常显示不同的Model.

做法1:

@interface LMNewBookListCell : UITableViewCell
@property (nonatomic, strong) id dataSource;
@end
@implementation LMNewBookListCell
- (void)setDataSource:(id)dataSource {
    _dataSource = dataSource;
    if ([dataSource isKindOfClass:[LMBookDetail class]]) {
        LMBookDetail *bookDetail = (LMBookDetail *)dataSource;
        self.titleLabel.text = bookDetail.name;
                  //...
    }else if([dataSource isKindOfClass:[... class]]){
        //...
    }
}
@end

如上,在view的.h文件设置传Model的属性,然后在.m文件中重写set方法.
在set方法中,判断是哪种类型的Model,对应进行装载Model.

缺点: View和Model耦合性比较强,而且随着Model类型越来越多,set方便if-else判断越来越长.

做法2:

@implementation LMRNoCoverCellReformer
- (NSDictionary *)reformerDataWithModle:(LMRModel *)model {
    NSDictionary *resultData = nil;
    if ([model isKindOfClass:[LMRRecommendBook class]]) {
        LMRRecommendBook *originModel = (LMRRecommendBook *)model;
        resultData = @{
                       kNoCoverCellAuthor:originModel.author,
                       kNoCoverCellTitle: originModel.name,
                       kNoCoverCellCategory:originModel.type,
                       kNoCoverCellCover:originModel.cover,
                       kReformedEntityId:@(originModel.bookId),
                       };
    } else if ([model isKindOfClass:[LMRBookInfo class]]) {
        LMRBookInfo *originModel = (LMRBookInfo *)model;
        resultData = @{
                       kNoCoverCellCategory:originModel.bookType,
                       kNoCoverCellTitle:originModel.title,
                       kNoCoverCellAuthor:originModel.author,                          
                       kNoCoverCellCover:originModel.coverPath,
                       kReformedEntityId:originModel.bookId,
                       };
    } else {
        LMRRankingBook *originModel = (LMRRankingBook *)model;
        resultData = @{
                       kNoCoverCellTitle: originModel.name,
                       kNoCoverCellCategory: originModel.type,
                       kNoCoverCellAuthor: originModel.author,
                       kNoCoverCellCover: originModel.cover,
                       kReformedEntityId: @(originModel.bookId),
                       };
    }
    return resultData;
}
@end

第二种做法就是适配器模式.
用另外一个类专门对不同的Model,进行配.
就像上面的Reformer一样,统一把不同的Model转为dictionary, 然后View装载这个dictionary.
这样通过这个适配器将View和Model直接耦合进行解耦.

缺点: 每个View需要新建一个适配器类. 而且随着不同Model越多来越多. 转换中的if-else也是越来越长.

下面介绍用Protocol来分离View和Model. Protocol很重要的一个作用是分离接口和实现.
比如,我们自定义CustomTableViewCell:

@interface CustomTableViewCell : UITableViewCell
@end
@implementation CustomTableViewCell
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(nullable NSString *)reuseIdentifier{
    if (self = [super initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:reuseIdentifier]){
    }
    return self;
}
@end

然后,为其新建一个CustomTableViewCellProtocol.h. 规定两个接口.

@protocol CustomTableViewCellProtocol <NSObject>
- (NSString *)CustomTableViewCellTitle;
- (NSString *)CustomTableViewCellDetail;
@end

接着,在CustomTableViewCell.h中引入 CustomTableViewCellProtocol.h,并添加装载Model的方法,比如loadModel:,重要声明参数遵守CustomTableViewCellProtocol模式.

#import <UIKit/UIKit.h>
#import "CustomTableViewCellProtocol.h"
@interface CustomTableViewCell : UITableViewCell
- (void)loadModel:(id<CustomTableViewCellProtocol>) model;
@end

在CustomTableViewCell.m中实现这个方法:

- (void)loadModel:(id<CustomTableViewCellProtocol>)model{
    self.textLabel.text      = [model CustomTableViewCellTitle];
    self.detailTextLabel.text = [model CustomTableViewCellDetail];
}

这样,我们的View已经设置完毕.

对于Model,比如BananaModel.h,声明其遵守CustomTableViewCellProtocol

@interface BananaModel : NSObject<CustomTableViewCellProtocol>
@property (nonatomic, copy) NSString *name;
@property (nonatomic, copy) NSString *introduce;
@end

然后,在.m实现这个方法.比如想在 CustomTableViewCell的textLabel显示model的name属性,detailTextLabel显示model的introduce属性.实现如下.

#pragma mark - CustomTableViewProtocol Implement
- (NSString *)CustomTableViewCellTitle{
    return self.name;
}
- (NSString *)CustomTableViewCellDetail{
    return self.introduce;
}

这样Model也设置完毕了.

使用的时候就可以直接装载Model了.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    CustomTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"xxx" forIndexPath:indexPath];
    [cell loadModel:self.dataSource[indexPath.row]];
    return cell;
}

上面代码中,self.dataSource[indexPath.row]BananaModel.

通过Protocol规定接口,我们成功将View和Model分离了.
任何Model要被装入CustomTableViewCell中,只要遵循CustomTableViewCellProtocol,并实现对应的方法:

- (NSString *)CustomTableViewCellTitle;
- (NSString *)CustomTableViewCellDetail;

就可以啦.

  • 给CustomTableViewCell规定CustomTableViewCellProtocol接口.然后Model来实现.也就是分离接口和实现的典型.
    这样很好地分离了View和Model,又没有恶心的if-else.
  • 新添加Model的情况下,很多时候我们不需要修改View里面的代码就能适配该Model.
  • 不需要添加额外的类,就完成了适配.
  • Model不需要继承其他任何类, 由于OC和Swift都是没有多继承特性.
    继承是比较宝贵,有些转Model框架需要利用继承例如:JSONModel和Mantle. 滥用继承,可能会导致层次混乱.
  • 一个Model可以遵循多个Protocol.
    这样,我们的Model想被装进不同的View,只要遵循该View的Protocol,并实现对应方法就好了.

文笔拙劣,没看明白请戳demo

相关文章

  • 用Protocol来分离的View和Model

    在项目中,不同的Model常常要显示在相同的View上. 例如tableView的cell,常常显示不同的Mode...

  • MVC、MVVM

    MVC和MVVM都是用来分离model和view的MVC:model、view、controller MVVM:m...

  • MV*初探

    还原真实的MV*模式 职责分离的思想Model + View MVC Controller处理Model和View...

  • VUE知识点集锦

    MVVM模式 核心理念: 通过声明式的数据绑定 来实现 View 层和其他层的分离; Model 层 Model ...

  • 用原生 JS 实现 MVVM 框架1——观察者模式和数据监控

    在前端页面中,把 Model 用纯 JS 对象表示,View 负责显示,两者做到了最大化的分离 把 Model 和...

  • MVC、MVP和MVVM

    MVC 1、简介 MVC全名是Model View Controller,用一种业务逻辑、数据、界面显示分离的分离...

  • MVVM设计模式(二)

    View-Model的连接 连接一:用对应的 view-model 来初始化视图控制器: MYTwitterUse...

  • view持有Model,使用protocol

    view持有model的问题 view与model的耦合 有时view需要持有多个model,view中代码较多 ...

  • (三十二)MVC架构设计模式面试问题

    1.MVC的定义 MVC是Model、View、Controller的缩写,它是用一种业务逻辑、数据、界面显示分离...

  • 2017.11.27

    MVC 设计模式 作用: view 和model分离 VueJS 下载 1 直接下载vue.js的文...

网友评论

    本文标题:用Protocol来分离的View和Model

    本文链接:https://www.haomeiwen.com/subject/cllxrxtx.html