2010-10-21 169 views
10

我正在研究模型 - 視圖 - 控制器設計模式,並且理解了模式背後的概念,但我想了解一下如何將其實際應用到實踐中。
維基百科提到了Wt-Web工具包,CppCMS和其他一些使用該模式的標準實現,但是我並不熟悉這些模式,並且我只是希望和 會非常感謝如果任何人都可以提供一些示例代碼(希望是C++)它實現了模式並解釋了正在實踐的模式的理論。模型視圖控制器設計模式代碼示例代碼示例

回答

21

這裏是我做了(沒有嘗試編譯它,讓我知道,如果有錯誤),一個簡單的例子:

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; 
}; 

忽略按鈕的實施,基本上是這樣的程序將使用GraphGUI顯示當按下按鈕時將改變圖形。假設這是一個條形圖,它會變得更高。由於模型獨立於視圖(按鈕),並且控制器處理兩者之間的通信,所以這遵循MVC模式。

單擊按鈕時,控制器通過onButtonClicked函數修改模型,該函數在Button類被單擊時知道要調用。

這是因爲模型和視圖是完全獨立的,它們的實現可以徹底改變,並且不會影響另一個,控制器可能只需要做一些改變。如果這種情況下的模型根據某些數據庫數據計算出某些結果,則單擊此按鈕可能會導致此情況發生,但按鈕實現不必更改。或者,不是在點擊發生時告訴控制器,而是可以告訴控制器何時按下按鈕。不管觸發什麼變化,相同的變化適用於模型。

+1

在MVC中,視圖通常不知道控制器。通常情況下,控制器會意識到模型和視圖,並將爲View提供適當的模型實例。正如你所提到的,該模型將不會察覺到該視圖。 – 2010-10-21 21:16:47

+0

@ Matt,robdev:模型沒有意識到視圖,但Model可以更新其數據中的更新視圖..(Observor模式的典型用法) – 2010-10-22 04:13:37

+0

@Matt,我明白了你的觀點,但在這個例子中,明確地瞭解控制器。它只是給了一個對象和函數指針,並且說「無論你是誰,我只是被點擊!調用你的函數」,然後調用onButtonClicked()。 – robev 2010-10-22 13:22:11

2

可以基於MVC設計一個簡單的文本編輯器。將string類視爲存儲數據的模型。我們可能會有一個名爲SimpleTextView的課程,它顯示附在其中的string中的文本。一個名爲KeyboardEventHandler的類可以充當控制器。控制器將通知有關新鍵盤事件的視圖。該視圖反過來修改模型(如添加或刪除文本)。模型中的更改反映在附加的所有視圖上。例如,可能會有另一個視圖HtmlView附加到SimpleTextView內的string對象中。如果用戶在SimpleTextView中輸入了有效的HTML標籤,則HtmlView將顯示格式化的輸出 - 即時。

1

有幾個完整的MVC示例,加上討論,在我寫的Python 3.x編程入門的第2章中(我還沒有完成第3章等,該項目已經在一段時間 - Python社區真的像發現蜂羣時發現我寫道,Python可能不適合大規模開發,因此很難獲得明智的反饋)。它以Google Docs的PDF格式提供。我不知道它如何映射到常見的MVC實現,我主要關心的是如何獲得一般的想法。 :-)

乾杯&心連心,

PS:有內容在PDF文件中一個漂亮的表,但谷歌文檔不顯示它。您需要dl並使用Foxit或Acrobat或其他PDF查看器。我認爲Google Docs中有一個單獨的可查看TOC,但沒有檢查,也不記得是否更新。

PPS:忘了提及,靠近尾端的MVC圖像處理示例有很好的LenaSöderberg圖片! :)

1

代碼是瞭解和學習模型 - 視圖 - 控制器的最佳方法:

下面是一個簡單的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++

中的詳細說明

MVC