MVC/MVP/MVVM 三種設計模式彙總

原文：http://blog.csdn.net/hudan2714/article/details/50990359

MVC

MVC全名是Model View Controller，是模型(model)－視圖(view)－控制器(controller)的縮寫，一種軟件設計典範，用一種業務邏輯、數據、界面顯示分離的方法組織代碼，將業務邏輯聚集到一個部件裏面，在改進和個性化定製界面及用戶交互的同時，不需要重新編寫業務邏輯。MVC被獨特的發展起來用於映射傳統的輸入、處理和輸出功能在一個邏輯的圖形化用戶界面的結構中。

數據關係

View 接受用戶交互請求
View 將請求轉交給Controller
Controller 操作Model進行數據更新
數據更新之後，Model通知View更新數據變化
View 更新變化數據

方式

所有方式都是單向通信

結構實現

View ：使用 Composite模式
View和Controller：使用 Strategy模式
Model和 View：使用 Observer模式同步信息

使用

MVC中的View是可以直接訪問Model的！從而，View裏會包含Model信息，不可避免的還要包括一些業務邏輯。在MVC模型裏，更關注的Model的不變，而同時有多個對Model的不同顯示，及View。所以，在MVC模型裏，Model不依賴於View，但是 View是依賴於Model的。不僅如此，因爲有一些業務邏輯在View裏實現了，導致要更改View也是比較困難的，至少那些業務邏輯是無法重用的。

MVP

mvp的全稱爲Model-View-Presenter，Model提供數據，View負責顯示，Controller/Presenter負責邏輯的處理。MVP與MVC有着一個重大的區別：在MVP中View並不直接使用Model，它們之間的通信是通過Presenter (MVC中的Controller)來進行的，所有的交互都發生在Presenter內部，而在MVC中View會直接從Model中讀取數據而不是通過 Controller。

數據關係

View 接收用戶交互請求
View 將請求轉交給 Presenter
Presenter 操作Model進行數據更新
Model 通知Presenter數據發生變化
Presenter 更新View數據

MVP的優勢

Model與View完全分離，修改互不影響
更高效地使用，因爲所有的邏輯交互都發生在一個地方—Presenter內部
一個Preseter可用於多個View，而不需要改變Presenter的邏輯（因爲View的變化總是比Model的變化頻繁）。
更便於測試。把邏輯放在Presenter中，就可以脫離用戶接口來測試邏輯（單元測試）

方式

各部分之間都是雙向通信

結構實現

View ：使用 Composite模式
View和Presenter：使用 Mediator模式
Model和Presenter：使用 Command模式同步信息

MVC和MVP區別

MVP與MVC最大的一個區別就是：Model與View層之間倒底該不該通信（甚至雙向通信）

MVC和MVP關係

MVP：是MVC模式的變種。
項目開發中，UI是容易變化的，且是多樣的，一樣的數據會有N種顯示方式；業務邏輯也是比較容易變化的。爲了使得應用具有較大的彈性，我們期望將UI、邏輯（UI的邏輯和業務邏輯）和數據隔離開來，而MVP是一個很好的選擇。
Presenter代替了Controller，它比Controller擔當更多的任務，也更加複雜。Presenter處理事件，執行相應的邏輯，這些邏輯映射到Model操作Model。那些處理UI如何工作的代碼基本上都位於Presenter。
MVC中的Model和View使用Observer模式進行溝通；MPV中的Presenter和View則使用Mediator模式進行通信；Presenter操作Model則使用Command模式來進行。基本設計和MVC相同：Model存儲數據，View對Model的表現，Presenter協調兩者之間的通信。在 MVP 中 View 接收到事件，然後會將它們傳遞到 Presenter, 如何具體處理這些事件，將由Presenter來完成。
如果要實現的UI比較複雜，而且相關的顯示邏輯還跟Model有關係，就可以在View和 Presenter之間放置一個Adapter。由這個 Adapter來訪問Model和View，避免兩者之間的關聯。而同時，因爲Adapter實現了View的接口，從而可以保證與Presenter之 間接口的不變。這樣就可以保證View和Presenter之間接口的簡潔，又不失去UI的靈活性。

使用

MVP的實現會根據View的實現而有一些不同，一部分傾向於在View中放置簡單的邏輯，在Presenter放置複雜的邏輯；另一部分傾向於在presenter中放置全部的邏輯。這兩種分別被稱爲：Passive View和Superivising Controller。

MVVM

MVVM是Model-View-ViewModel的簡寫。微軟的WPF帶來了新的技術體驗，如Silverlight、音頻、視頻、3D、動畫……，這導致了軟件UI層更加細節化、可定製化。同時，在技術層面，WPF也帶來了諸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由來便是MVP（Model-View-Presenter）模式與WPF結合的應用方式時發展演變過來的一種新型架構框架。它立足於原有MVP框架並且把WPF的新特性糅合進去，以應對客戶日益複雜的需求變化。

數據關係

View 接收用戶交互請求
View 將請求轉交給ViewModel
ViewModel 操作Model數據更新
Model 更新完數據，通知ViewModel數據發生變化
ViewModel 更新View數據

方式

雙向綁定。View/Model的變動，自動反映在 ViewModel，反之亦然。

使用

可以兼容你當下使用的 MVC/MVP 框架。
增加你的應用的可測試性。
配合一個綁定機制效果最好。

MVVM優點

MVVM模式和MVC模式一樣，主要目的是分離視圖（View）和模型（Model），有幾大優點:
1. 低耦合。View可以獨立於Model變化和修改，一個ViewModel可以綁定到不同的”View”上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
2. 可重用性。你可以把一些視圖邏輯放在一個ViewModel裏面，讓很多view重用這段視圖邏輯。
3. 獨立開發。開發人員可以專注於業務邏輯和數據的開發（ViewModel），設計人員可以專注於頁面設計，生成xml代碼。
4. 可測試。界面素來是比較難於測試的，而現在測試可以針對ViewModel來寫。

mvc,mvp,mvvm三者演化

說明

任何的項目框架，都是爲項目服務的。沒有絕對的好壞之分，只有更合適的選擇。在項目進展的不同階段，做出最合適的調整，纔是是更適合團隊項目發展的框架。項目設計者要謹記，任何的項目設計，都是要圍繞項目發展階段，團隊成員規模，和團隊整體能力而定的。切莫爲了設計而設計，爲了框架而框架。快速，高效的配合整個團隊進展項目，纔是最合適的架構。纔是一個程序員爲成一個leader，成爲一個架構師的必經之路。

轉載，請說明來源：http://blog.csdn.net/hudan2714/article/details/50990359

參考文獻：https://blog.nodejitsu.com/scaling-isomorphic-javascript-code/

一、MVC

MVC

由屏幕獲取響應指令， View 傳送指令到 Controller，Controller 完成業務邏輯後，要求Model 改變狀態Model 將新的數據發送到 View，用戶得到反饋

MVCViewController.m

#import "MVCViewController.h"
#import "MVCView.h"
#import "MVCModel.h"
@interface MVCViewController ()<MVCDelegate>

@end
@implementation MVCViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    MVCView *view = [[MVCView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    view.delegate = self;

    MVCModel *model = [MVCModel new];

    model.name = @"name1";

    [view setViewWithModel:model];

}
#pragma mark - delegate
//代理來返回view對viewController的操控
-(void)clickChange{

    NSLog(@"chang  from View!");
}

二、 MVP

MVP 模式將 Controller 改換爲 Presenter，同時斷開View和Model之間聯繫，通過Presenter做橋樑來溝通。

MVP

各部分之間的通信，都是雙向的。
View 與 Model 不發生聯繫，都通過 Presenter 傳遞。
View 非常薄，不部署任何業務邏輯，稱爲"被動視圖"（Passive View），即沒有任何主動性，而 Presenter非常厚，所有邏輯都部署在那裏。
Presenter 可以另一種理解爲View和Model的管家

MVPViewController.m

#import "MVPViewController.h"
#import "MVPPresenter.h"
#import "MVPCell.h"
#import "MVPModel.h"

@implementation MVPViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor = [UIColor whiteColor];

    MVPPresenter *present = [MVPPresenter new];
    MVPCell *view = [MVPCell new];
    MVPModel *model = [MVPModel new];

    //獲取數據
    model.name = @"name1";

    //視圖佈局
    [self.view addSubview:view];

    //交給presenter處理 ，避免 view和 model 之間的交互
    [present setPreModel:model];
    [present setPreView:view];
}

MVPPresenter .h /.m

#import <Foundation/Foundation.h>
#import "MVPModel.h"
#import "MVPCell.h"
@interface MVPPresenter : NSObject 
@property(nonatomic,strong)MVPCell *MVPView;
@property(nonatomic,strong)MVPModel *model;

-(void)setPreView:(MVPCell *)view;
-(void)setPreModel:(MVPModel *)model;

-(void)clickChangName;

#import "MVPPresenter.h"
@implementation MVPPresenter
- (instancetype)init
{
    self = [super init];
    if (self) {

    }
    return self;
}

-(void)setPreModel:(MVPModel *)model{
    self.model = model;
}

-(void)setPreView:(MVPCell *)view{
    self.MVPView = view;
    [self.MVPView setlabel:_model.name];
}

-(void)clickChangName{

    NSLog(@"name change %d",arc4random()%10);

}

三、MVVM

MVVM 模式將 Presenter 改名爲 ViewModel，基本上與 MVP 模式完全一致。

唯一的區別是，它採用雙向綁定（data-binding）：View <->ViewModel , ViewModel作爲Model中值得的映射，是數據發生改變時，通知View中發生改變，以後不需要考慮View和Model 之間的交互更新，只需着手界面佈局邏輯即可

MVVMViewController.m

#import "MVVMViewController.h"
#import "MVVMView.h"
#import "MVVMModel.h"
#import "MVVMViewModel.h"
@interface MVVMViewController ()

@end

@implementation MVVMViewController

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

    MVVMView *MView = [MVVMView new];

    MVVMModel *model = [MVVMModel new];
    model.name = @"name1";
    MVVMViewModel *viewModel = [MVVMViewModel new];

    [self.view addSubview:MView];

    //* viewModel 作爲樞紐 溝通view和model之間關係
    [viewModel setWithModel:model];
    [MView setWithViewMoel:viewModel];
}

關鍵點：

將viewModel 中nameStr與Model 中name相對應；
View中label的text值將與nameStr進行綁定(KVO鍵值觀察)
這樣model的值發生改變時，View會自動發生改變
View 和Model通過ViewModel實現動態關聯

MVVMModel

#import <Foundation/Foundation.h>

@interface MVVMModel : NSObject
@property(nonatomic,copy)NSString *name;

@end

MVVMViewModel.h

#import "MVVMModel.h"
@interface MVVMViewModel : NSObject
//對應Model中name
@property(nonatomic,copy)NSString *nameStr;

@property(nonatomic,strong)MVVMModel *model;

-(void)setWithModel:(MVVMModel *)model;
-(void)clickChangeName;

MVVMView.m 利用KVO監測值變化

#import "MVVMView.h"
#import "NSObject+FBKVOController.h"
@interface MVVMView ()

@property(nonatomic,strong)MVVMViewModel *vm;
@property(nonatomic,strong)UILabel *label;
@property(nonatomic,strong)UIButton *button;

@end
@implementation MVVMView
- (instancetype)init
{
    self = [super init];
    if (self) {
        self.backgroundColor = [UIColor whiteColor];
        self.frame = [UIScreen mainScreen].bounds;

        self.label = [[UILabel alloc]initWithFrame:CGRectMake(150,100 , 100, 30)];
        self.label.backgroundColor = [UIColor orangeColor];
        [self addSubview:_label];

        self.button = [UIButton new];
        _button.backgroundColor = [UIColor redColor];
        [_button setTitle:@"點擊" forState:UIControlStateNormal];
        [_button addTarget:self action:@selector(mvvmClickChangModel) forControlEvents:UIControlEventTouchUpInside];
        _button.frame = CGRectMake(150, 200, 50, 50);
        [self addSubview:_button];
    }
    return self;
}
-(void)setWithViewMoel:(MVVMViewModel *)vm{
    self.vm = vm;
    //KVO
    [self.vm addObserver:self forKeyPath:@"nameStr" options:NSKeyValueObservingOptionOld|NSKeyValueObservingOptionNew context:nil];
    self.label.text = vm.nameStr;

//    //* FBKVO 第三方庫
//    [self.KVOController observe:self.vm keyPath:@"nameStr" options:NSKeyValueObservingOptionInitial|NSKeyValueObservingOptionNew block:^(id  _Nullable observer, id  _Nonnull object, NSDictionary<NSString *,id> * _Nonnull change) {
//        self.label.text = change[NSKeyValueChangeNewKey];
//    }];

}
-(void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:    (NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
    if ([keyPath isEqualToString:@"nameStr"]&&[change objectForKey:NSKeyValueChangeNewKey]) {
        NSNumber *new = [change objectForKey:NSKeyValueChangeNewKey];
        self.label.text = [NSString stringWithFormat:@"%@",new];
    }
}
-(void)mvvmClickChangModel{
    [self.vm clickChangeName];
}
-(void)dealloc{
    [self.vm removeObserver:self forKeyPath:@"nameStr"];
}

Example Demo

GitHub : https://github.com/one-tea/MVC-MVP-MVVM.git

頂: 3

MVC/MVP/MVVM 三種設計模式彙總

MVC

數據關係

方式

結構實現

使用

MVP

數據關係

MVP的優勢

方式

結構實現

MVC和MVP區別

MVC和MVP關係

使用

MVVM

數據關係

方式

使用

MVVM優點

mvc,mvp,mvvm三者演化

說明

一、MVC

二、 MVP

三、MVVM

Example Demo

工作中用到的腳本合集

微服務實踐Aspire項目發佈到遠程k8s集羣

通過f-string編寫簡潔高效的Python格式化輸出代碼

[轉帖]PostgreSQL從小白到高手教程 - 第46講：poc-tpch測試

24-5-18 X

Block源碼解析和深入理解

蘋果：6月1日後所有應用必須支持IPv6-only網絡

iOS持續集成：jenkins+gitlab+蒲公英+郵件通知(Part 1)

AFNetworking 3.0 源碼閱讀筆記（六）

使用 Phabricator & Arcanist 進行 Code Review 的流程

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

MVC/MVP/MVVM 三種設計模式 彙總

MVC

數據關係

方式

結構實現

使用

MVP

數據關係

MVP的優勢

方式

結構實現

MVC和MVP區別

MVC和MVP關係

使用

MVVM

數據關係

方式

使用

MVVM優點

mvc,mvp,mvvm三者演化

說明

一、MVC

二、 MVP

三、MVVM

Example Demo

MVC/MVP/MVVM 三種設計模式彙總