Model-View-Controller Explained in C++(用C+解释模型-视图-控制器)

The Permanent URL is: Model-View-Controller Explained in C++.

The Model-View-Controller (MVC) is not a technology, but a concept in software design/engineering. The MVC consists of three components, the Model, the View and the Controller, as illustrated in below figure.

模型-视图-控制器(MVC)不是一种技术，而是软件设计/工程中的一个概念。MVC由三个组件组成，模型、视图和控制器，如下图所示。

model-view-controller-mvc-explained

THE MODEL

The Model is directly responsive for handling data. For example, the Model component accesses MySQL database. The Model should not rely on other components such as View or Controller. In other words, the Model does not care how its data can be displayed or when to be updated.

该模型直接响应处理数据。例如，Model组件访问MySQL数据库。模型不应依赖于其他组件，如View或Controller。换句话说，模型并不关心如何显示其数据或何时更新数据。

The data changes in the Model will generally be published through some event handlers. For example, the View model must register on the Model so that it understands the data changes. We can define a function callback when data changes:

模型中的数据更改通常将通过某些事件处理程序发布。例如，视图模型必须在模型上注册，以便获悉数据更改的消息。我们可以在数据更改时定义一个函数回调：

// common.h
// https://helloacm.com/model-view-controller-explained-in-c/
#pragma once
#include <string>
using namespace std;
typedef void (*DataChangeHandler)(string newData);

DataChangeHandler is now a function pointer type that returns void and takes a parameter of a string (data type). The Model is responsible for data retrieval and optionally, it can register the data-change-event.

DataChangeHandler 现在是一个函数指针类型，它返回void值并接受字符串(数据类型)的参数。
该模型负责数据检索，并且可以选择性地注册数据更改事件。

// model.h
// https://helloacm.com/model-view-controller-explained-in-c/
#pragma once
#include <string>
using namespace std;
#include "common.h"
// Model is responsible for data get and set
class Model {
    public:
        Model(const string &data) {
            this->SetData(data);
        }
        Model() { } // default constructor
        string Data(){
            return this->data;
        }
 
        void SetData(const string &data) {
            this->data = data;
            if (this->event != nullptr) { // data change callback event
                this->event(data);
            }   
        }
        //  register the event when data changes.
        void RegisterDataChangeHandler(DataChangeHandler handler) {
            this->event = handler;
        }
    private:
        string data = "";
        DataChangeHandler event = nullptr;
};

VIEW

The View component knows how to present the Data to the users. It needs to access the Model and normally needs to define its ‘Render()’ function.

View组件知道如何向用户显示数据。它需要访问Model，并且通常需要定义它的‘Render()’函数。

// view.h
// https://helloacm.com/model-view-controller-explained-in-c/
#pragma once
#include <iostream>                  
#include "model.h"                                               
// View is responsible to present data to users
class View {
    public:
        View(const Model &model) {
            this->model = model;
        }
        View() {}
        void SetModel(const Model &model) {
            this->model = model;
        }
        void Render() {
            std::cout << "Model Data = " << model.Data() << endl;
        }
    private:
        Model model;
};

CONTROLLER

The Controller can ask the Model to update its data. Also, the Controller can ask the View to change its presentation, e.g. Showing a Dialog instead of Outputing to Console. Basically it is a component that takes input from the user and sends commands to the View or Model.

控制器可以要求模型更新其数据。
此外，控制器可以要求视图更改其显示方式，例如显示对话框而不是输出到控制台。
基本上，它是一个从用户获取输入并将命令发送到View或Model的组件。

// controller.h
// https://helloacm.com/model-view-controller-explained-in-c/
#pragma once
#include "model.h"
#include "view.h"
 
// Controller combines Model and View
class Controller {
    public:
        Controller(const Model &model, const View &view) {
          this->SetModel(model);
          this->SetView(view);        
        }
        void SetModel(const Model &model) {
            this->model = model;
        }
        void SetView(const View &view) {
            this->view = view;
        }
        // when application starts
        void OnLoad() {
            this->view.Render();
        }
    private:
        Model model;
        View view;
};

MVC DEMO

With the above three component classes, we can have the following code to demonstrate MVC.

使用上述三个组件类，我们可以使用以下代码来演示MVC。

// mvc.cpp
// https://helloacm.com/model-view-controller-explained-in-c/
#include <iostream>
#include "view.h"
#include "model.h"
#include "controller.h"
#include "common.h"
 
using namespace std;
void DataChange(string data) {
  cout << "Data Changes: " << data <<endl; 
}
 
int main() {
    Model model("Model");
    View view(model);    
    // register the data-change event
    model.RegisterDataChangeHandler(&DataChange);
    // binds model and view.
    Controller controller(model, view);
    // when application starts or button is clicked or form is shown...
    controller.OnLoad();
    model.SetData("Changes"); // this should trigger View to render
    return 0;
}

To avoid the circular dependency in C++ between class View and Model, we use a function pointer to represent the event of data-change instead of the pointer to a member of object. To compile the above code, use the following command:

为了避免C++中视图和模型类之间的循环依赖，我们使用函数指针来表示数据更改事件，而不是使用指向对象成员的统一指针。要编译上述代码，请使用以下命令：

`1`	`g++ --std=c++11 mvc.cpp`

Then run ./a.out should give you:

然后运行./a.out得到：

1
2

Model Data = Model
Data Changes: Changes

The model.SetData(“Changes”); triggers the data-change event that is registered in the Model component.

model.SetData(“Changes”); 触发了在模型组件中注册的数据更改事件。

https://helloacm.com/model-view-controller-explained-in-c/