> For the complete documentation index, see [llms.txt](https://jen-hsuan-hsieh.gitbook.io/design-pattern/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jen-hsuan-hsieh.gitbook.io/design-pattern/chapter7-mvc.md).

# Chapter7: MVC

## This section contain the following items:

* 1.MVC

## 1.MVC (Model-View-ConTroller)

* 1.Model, View, Controller:
  * Model (模型)
    * 用來表示與實作出應用程式內的各種資料物件，並且包含了商業處理邏輯。
  * View (檢視)
    * 表示應用程式中的使用者介面(UI)所要顯示的各個元件。
  * Controller (控制器)
  * 使用者接觸的對象用來處理使用者的互動與處理資料模型物件, 負責改變Model的狀態或是改變View的顯示
* 2.MVC的優點
  * 讓視圖, 運算邏輯及資料解耦: 
    * 一旦程式的邏輯發生變化便只要修改部分模組或添加新的模組即可
    * 一旦程式的視圖需要修改, 可以直接抽換掉
  * 增加重複使用性, 並使系統更方便維護 
* 3.MVC結合了[觀察者模式](https://jenhsuan.gitbooks.io/design-pattern/content/chapter2_guan_cha_zhe_mo_shi__observer_pattern.html), [策略模式](https://jenhsuan.gitbooks.io/design-pattern/content/chapter3_ce_lve_mo_shi__strategy_pattern.html), 合成模式的優點
  * MVC元件彼此間的互動方式 ![](https://1330730840-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4M0G8D7wlLIQ3stULq%2F-M4M0IKc4rWLYnAL_jem%2F-M4M0Lm9TXU438cGow4L%2Fcc85eb57-3d33-46cf-aa81-814a6edb110d.png?generation=1586302918539515\&alt=media)
  * [觀察者模式](https://jenhsuan.gitbooks.io/design-pattern/content/chapter2_guan_cha_zhe_mo_shi__observer_pattern.html): 例如View等同於被觀察者, Model, Controller等同於觀察者 ![](https://1330730840-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4M0G8D7wlLIQ3stULq%2F-M4M0IKc4rWLYnAL_jem%2F-M4M0LmBysR349l8jCD6%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7%202017-07-12%20%E4%B8%8B%E5%8D%889.46.21.png?generation=1586302918668102\&alt=media)
  * [策略模式](https://jenhsuan.gitbooks.io/design-pattern/content/chapter3_ce_lve_mo_shi__strategy_pattern.html): View背後的Controller隨時可以抽換 ![](https://1330730840-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4M0G8D7wlLIQ3stULq%2F-M4M0IKc4rWLYnAL_jem%2F-M4M0LmDRNZvjNFDiHNL%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7%202017-07-12%20%E4%B8%8B%E5%8D%889.48.38.png?generation=1586302918674250\&alt=media)
  * 合成模式: View可以由多個UI Component組成 ![](https://1330730840-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4M0G8D7wlLIQ3stULq%2F-M4M0IKc4rWLYnAL_jem%2F-M4M0LmF5YuUkOTCCdUQ%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7%202017-07-12%20%E4%B8%8B%E5%8D%889.54.20.png?generation=1586302918703994\&alt=media)