美文网首页iOS-日常总结
iOS-设计模式(MVC、MVP、MVVM)

iOS-设计模式(MVC、MVP、MVVM)

作者: 翀鹰精灵 | 来源:发表于2019-12-19 16:40 被阅读0次

App开发过程中,随着业务的不断发展,代码和逻辑不断增加,有时候不得不重构以前的代码,好的架构,决定了代码的易用性、可扩展性、可维护性、可读性以及健壮性等等,利于代码的拓展和重构,下面就简单探讨一下iOS中常见的设计模式吧。
本文中主要介绍三种设计模式MVCMVPMVVM

一、MVC模式

Models: 数据层,负责数据的处理和获取的数据接口层。
Views:展示层,即UI层(实际开发中也是业务模型)。
Controller: 控制器层,它是 Model 和 View 之间的桥梁。当用户对 View 有操作时它负责去修改相应 Model;当 Model 的值发生变化时它负责去更新对应 View。

MVC.jpg

优点: 对Controller进行瘦身,将View内部的细节封装起来。
缺点: View依赖于Model,没有区分业务逻辑和业务展示

MVC核心代码:

// 1.controller类

@implementation MVCViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 创建view
     MVCHeaderView *headView = [[MVCHeaderView alloc] init];
     headView.frame = CGRectMake(100, 100, 100, 150);
     headView.mvcDelegate = self;
     [self.view addSubview:headView];
     
     // 加载模型数据
     MVCModel *model = [[MVCModel alloc] init];
     model.name = @"翀鹰精灵";
     model.image = @"header";
     
     // 设置数据到view上
     headView.mvcModel = model;
}
#pragma mark - MJAppViewDelegate
- (void)viewDidClick:(MVCHeaderView *)headView {
    NSLog(@"控制器监听到了appView的点击");
}

@end



// 2.view类

//2.1  MVCHeaderView.h
@class MVCHeaderView,MVCModel;
@protocol MVCViewDelegate <NSObject>
@optional
-(void)viewDidClick:(MVCHeaderView*)headView;
@end

@interface MVCHeaderView : UIView
@property (nonatomic, strong) MVCModel  * mvcModel;
@property (nonatomic, weak) id<MVCViewDelegate> mvcDelegate;
@end

//2.2  MVCHeaderView.m
@interface MVCHeaderView()
@property (weak, nonatomic) UIImageView *iconView;
@property (weak, nonatomic) UILabel *nameLabel;
@end

@implementation MVCHeaderView
- (instancetype)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        UIImageView *iconView = [[UIImageView alloc] init];
        iconView.frame = CGRectMake(0, 0, 100, 100);
        [self addSubview:iconView];
        _iconView = iconView;
        
        UILabel *nameLabel = [[UILabel alloc] init];
        nameLabel.frame = CGRectMake(0, 100, 100, 30);
        nameLabel.textAlignment = NSTextAlignmentCenter;
        [self addSubview:nameLabel];
        _nameLabel = nameLabel;
    }
    return self;
}

- (void)setMvcModel:(MVCModel *)mvcModel {
    _mvcModel = mvcModel;
    self.iconView.image = [UIImage imageNamed:mvcModel.image];
    self.nameLabel.text = mvcModel.name;
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    if ([self.mvcDelegate respondsToSelector:@selector(viewDidClick:)]) {
        [self.mvcDelegate viewDidClick:self];
    }
}
@end

// 3.model类

@interface MVCModel : NSObject
@property (copy, nonatomic) NSString *name;
@property (copy, nonatomic) NSString *image;
@end
二、MVP模式

MVP 架构模式是 MVC 的一个变种,MVC 与 MVP 之间的区别其实并不明显,作者认为两者之间最大的区别就是 MVP 中使用 Presenter 对视图和模型进行了解耦,它们彼此都对对方一无所知,沟通都通过 Presenter 进行。

MVP 中,Presenter 可以理解为松散的控制器,其中包含了视图的 UI 业务逻辑。

MVP.JPG

MVP核心代码:
// 1.controller类

#import "MVPViewController.h"
#import "MVPHeaderPresenter.h"

@interface MVPViewController ()
@property (strong, nonatomic) MVPHeaderPresenter *presenter;
@end

@implementation MVPViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.presenter = [[MVPHeaderPresenter alloc] initWithController:self];
}

@end

// 2.view类 复用MVC中view类
// 3.Presenter类

//3.1 MVPHeaderPresenter.h
#import <UIKit/UIKit.h>

@interface MVPHeaderPresenter : NSObject
- (instancetype)initWithController:(UIViewController *)controller;

@end
//3.2 MVPHeaderPresenter.m
#import "MVPHeaderPresenter.h"
#import "MVPHeaderView.h"
#import "MVPModel.h"

@interface MVPHeaderPresenter() <MVPViewDelegate>
@property (weak, nonatomic) UIViewController *controller;
@end


@implementation MVPHeaderPresenter
- (instancetype)initWithController:(UIViewController *)controller {
     if (self = [super init]) {
            self.controller = controller;
            
            // 创建View
            MVPHeaderView *headView = [[MVPHeaderView alloc] init];
            headView.frame = CGRectMake(100, 100, 100, 150);
            headView.mvpDelegate = self;
            [controller.view addSubview:headView];
            
            // 加载模型数据
            MVPModel *model = [[MVPModel alloc] init];
            model.name = @"【MVP】翀鹰精灵";
            model.image = @"header";
            
            // 赋值数据
            [headView setName:model.name andImage:model.image];
        }
        return self;
}

@end

三、MVVM模式

MVVM由三个部分组成,也就是 Model、View 和 ViewModel;其中视图模型(ViewModel)和View进行了一个双向绑定.

MVVM.JPG

MVVM核心代码:
// 1.controller类

#import "MVVMViewController.h"
#import "MVVMViewModel.h"

@interface MVVMViewController ()
@property (strong, nonatomic) MVVMViewModel *viewModel;

@end

@implementation MVVMViewController

- (void)viewDidLoad {
    [super viewDidLoad];
     self.viewModel = [[MVVMViewModel alloc] initWithController:self];
}

@end

// 2.view类


- (void)setMvvmModel:(MVVMViewModel *)mvvmModel {
    _mvvmModel = mvvmModel;
    
    __weak typeof(self) waekSelf = self;
    [self.KVOController observe:mvvmModel keyPath:@"name" options:NSKeyValueObservingOptionNew block:^(id  _Nullable observer, id  _Nonnull object, NSDictionary<NSKeyValueChangeKey,id> * _Nonnull change) {
        waekSelf.nameLabel.text = change[NSKeyValueChangeNewKey];
    }];
    
    [self.KVOController observe:mvvmModel keyPath:@"image" options:NSKeyValueObservingOptionNew block:^(id  _Nullable observer, id  _Nonnull object, NSDictionary<NSKeyValueChangeKey,id> * _Nonnull change) {
        waekSelf.iconView.image = [UIImage imageNamed:change[NSKeyValueChangeNewKey]];
    }];
}

// 3.viewModel类

@implementation MVVMViewModel

- (instancetype)initWithController:(UIViewController *)controller {
    if (self = [super init]) {
        self.controller = controller;
        
        // 创建View
        MVVMHeaderView *headView = [[MVVMHeaderView alloc] init];
        headView.frame = CGRectMake(100, 100, 200, 150);
        headView.mvvmModel = self;
        headView.mvvmDelegate = self;
        [controller.view addSubview:headView];
        
        // 加载模型数据
        MVVMModel *model = [[MVVMModel alloc] init];
        model.name = @"【MVVM】翀鹰精灵";
        model.image = @"header";
        self.name = model.name;
        self.image = model.image;
    }
    return self;
}

#pragma mark - MJAppViewDelegate
- (void)mvvmViewDidClick:(MVVMHeaderView *)appView {
    NSLog(@"viewModel 监听了 appView 的点击");
    self.name = @"变化中的【mvvm】";
    self.image =  @"header";
}

@end

最后,没有最好的,适合项目的才是最好的架构。
Demo下载.

相关文章

  • iOS 设计模式 一

    设计模式随记 系统架构模式 1. MVC - MVVM - MVP - MVVM、MVC协调版 MVC :...

  • vue笔记

    设计模式(MVC/MVP/MVVM) MVC(Model View Controller): 数据模型(Model...

  • iOS开发小帖:设计模式

    设计模式精彩文章 iOS 架构模式--解密 MVC,MVP,MVVM以及VIPER架构 MVP设计模式 基于面向协...

  • iOS-面试题6-架构

    目录: MVC-Apple MVC-变种 MVP MVVM 分层设计 架构与设计模式的区别 一. MVC-Appl...

  • iOS-MVC,MVP,MVVM及VIPER简介

    iOS中MVC,MVP,MVVM及VIPER设计模式介绍的文章有很多,开发过程MVC最常见的模式,MVVM也经常被...

  • Android 中 MVC、MVP 和 MVVM 对比

    一、前言: MVC、MVP和MVVM是常见的三种架构设计模式,当前MVP和MVVM的使用相对比较广泛,当然MVC也...

  • Android中MVP设计框架浅析

    一、MVP设计模式简介 目前Android设计成熟的框架有MVC,MVP和MVVM,MVP是由MCV演变而来,MV...

  • iOS-19 MVC和MVVM

    1 iOS MVC、MVVM、MVP详解 - 简书 2 浅谈 MVC、MVP 和 MVVM 架构模式 - Coco...

  • 设计模式演变过程

    基本设计模式之MVC模式 基本设计模式之MVP模式 基本设计模式之MVVM模式 SPA和MPA SPA:单页面应用...

  • Vue源码解读(预):手写一个简易版Vue

    MVVM 设计模式,是由 MVC、MVP 等设计模式进化而来,M - 数据模型(Model),VM - 视图模型(...

网友评论

    本文标题:iOS-设计模式(MVC、MVP、MVVM)

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