Question

我正在研究模型 - 视图 - 控制器设计模式，我理解这种模式背后的概念，但我想看一看如何实际将它付诸实践。
维基百科提到了Wt - Web工具包，CppCMS和其他一些使用该模式的标准实现，但我还不熟悉这些，我只是希望和如果有人能够提供一些实现模式的示例代码（希望是C ++）并解释正在实践的模式理论，那将非常感激。

Answer 1

这是我做的一个简单示例（没有尝试编译它，让我知道是否有错误）：

class Button; // Prewritten GUI element

class GraphGUI {
public:
    GraphGUI() {
        _button = new Button("Click Me");
        _model = new GraphData();
        _controller = new GraphController(_model, _button);
    }
    ~GraphGUI() {
        delete _button;
        delete _model;
        delete _controller;
    }

    drawGraph() {
        // Use model's data to draw the graph somehow
    }
    ...

private:
    Button*              _button;
    GraphData*           _model;
    GraphController*     _controller;
};

class GraphData {
public:
    GraphData() {
        _number = 10; 
    }
    void increaseNumber() {
        _number += 10;
    }
    const int getNumber() { return _number; }
private:
    int _number;
};

class GraphController {
public:
    GraphController(GraphData* model, Button* button) {
        __model = model;
        __button = button;
        __button->setClickHandler(this, &onButtonClicked);
    }

    void onButtonClicked() {
        __model->increaseNumber();
    }

private:
    // Don't handle memory
    GraphData*    __model;
    Button*       __button; 
};

忽略Button的实现，基本上这个程序将使用GraphGUI来显示按下按钮时会改变的图形。让我们说这是一个条形图，它会变得更高。

由于模型独立于视图（按钮），并且控制器处理两者之间的通信，因此遵循MVC模式。

单击该按钮时，控制器通过onButtonClicked函数修改模型，Button类知道该函数在单击时调用。

之所以如此，因为模型和视图是完全独立的，每个的实现都可以彻底改变而不会影响另一个，控制器可能只需要进行一些更改。如果这种情况下的模型基于一些数据库数据计算了一些结果，那么单击该按钮可能会导致这种情况发生，但按钮实现不必更改。或者，不是在发生咔嗒声时告诉控制器，也许它可以告诉控制器何时按下鼠标。无论触发更改的内容如何，都会对模型应用相同的更改。

Answer 2

可以基于MVC设计简单的文本编辑器。可以将string类视为存储数据的模型。我们可能会有一个名为SimpleTextView的类，它会显示附加到它的string中的文本。名为KeyboardEventHandler的类可以充当控制器。控制器将通知视图有关新键盘事件的信息。视图反过来修改模型（如附加或删除文本）。模型中的更改会反映在附加到其上的所有视图中。例如，可能有另一个名为HtmlView的视图附加到string内的SimpleTextView对象。如果用户在SimpleTextView中输入有效的HTML代码，HtmlView将显示格式化的输出 - 实时。

Answer 3

有两个完整的MVC示例，加上讨论，在我编写的Python 3.x编程简介的第2章中（我还没有完成第3章等等，该项目已经在冰上进行了一段时间 - - Python社区真的喜欢愤怒的蜜蜂群，当我发现我写过Python可能不适合大规模开发时，因此很难获得合理的反馈）。它以Google Docs的PDF格式提供。我不知道它是如何映射到常见的MVC实现的，我最关心的是将整体想法贯穿其中。： - ）

干杯＆amp;第h。，

PS：PDF文件中有一个很好的目录，但Google Docs没有显示它。您需要使用Foxit或Acrobat或其他PDF查看器。我认为Google文档中有一个单独的可查看TOC，但是没有检查过，也不记得是否更新了。

PPS：忘了提一下，接近结尾的MVC图像处理示例有很好的LenaSöderberg图片！：）

Answer 4

代码是理解和学习模型视图控制器的最佳方法：

这是一个简单的JS示例（来自Wiki）

/** Model, View, Controller */
var M = {}, V = {}, C = {};

/** Model stores data */
M.data = "hello world";

/** View controls what to present */
V.render = (M) => { alert(M.data); }

/** Controller bridges View and Model */
C.handleOnload = () => { V.render(M); }

/** Controller on Windows OnLoad event */
window.onload = C.handleOnload;

这是C / C ++中的详细帖子 Model-View-Controller Explained in C++

模型视图控制器设计模式代码示例

4 个答案: