search

rogerxu / rogerxu.github.io

Roger Xu's Blog
2 stars 2 forks source link

MVC, MVP, MVVM #87

Open rogerxu opened 7 years ago

rogerxu commented 7 years ago

MVC，MVP 和 MVVM 的图示 - 阮一峰的网络日志

谈谈UI架构设计的演化 - winter-cn - 博客园

从Script到Code Blocks、Code Behind到MVC、MVP、MVVM - Indream Luo - 博客园

rogerxu commented 6 years ago

MVC

image https://pic4.zhimg.com/80/a1c71efe626f7affc1bec2be6600b67f_hd.jpg

浅谈 MVC、MVP 和 MVVM 架构模式

image https://raw.githubusercontent.com/Draveness/analyze/master/contents/architecture/images/mvx/MVC-with-ASP.NET.jpg

控制器负责对模型中的数据进行更新，而视图向模型中请求数据；当有用户的行为触发操作时，会有控制器更新模型，并通知视图进行更新，在这时视图向模型请求新的数据，而这就是作者所理解的标准 MVC 模式下，Model、View 和 Controller 之间的协作方式。

image https://raw.githubusercontent.com/Draveness/analyze/master/contents/architecture/images/mvx/MVC-with-Spring.jpg

image https://raw.githubusercontent.com/Draveness/analyze/master/contents/architecture/images/mvx/MVC-with-Rails.jpg

image https://raw.githubusercontent.com/Draveness/analyze/master/contents/architecture/images/mvx/MVC-in-Wikipedia.jpg

image https://raw.githubusercontent.com/Draveness/analyze/master/contents/architecture/images/mvx/MVC-MVC.jpg

rogerxu commented 6 years ago

MVP

default

https://camo.githubusercontent.com/5dc631b7b8b34d3bd1e98debbbe138604e3186f5/687474703a2f2f7777322e73696e61696d672e636e2f6d773639302f34373465626633356777316570346f697a7575776f6a3230767730666f7768612e6a7067

切断的View和Model的联系，让View只和Presenter（原Controller）交互，减少在需求变化中需要维护的对象的数量

rogerxu commented 6 years ago

MVVM

MVVM - 廖雪峰的官方网站

image

https://pic4.zhimg.com/80/1d9336019baa5cabdf0e5e30b3effffb_hd.jpg

View和ViewModel间没有了MVP的界面接口，而是直接交互，用数据“绑定”的形式让数据更新的事件不需要开发人员手动去编写特殊用例，而是自动地双向同步。

rogerxu commented 6 years ago

christianalfoni - Why we are doing MVC and FLUX wrong

Traditional MVC

|------|  request   |------------|  request   |-------|
|      | ---------> |            | ---------> |       |
| VIEW |  response  |            |  response  |       |
|      | <--------- |            | <--------- |       |
|------|            |            |            |       |
                    | CONTROLLER |            | MODEL |
|------|  request   |            |  request   |       |
|      | ---------> |            | ---------> |       |
| VIEW |  response  |            |  response  |       |
|      | <--------- |            | <--------- |       |
|------|            |------------|            |-------|

FLUX

COMPONENTS          ACTION CREATORS           STORES

    |----------------------<<<<-------------------|
    |                                             |
|------|            |------------|            |-------|
|      |  request   |            |  request   |       |
| VIEW | ---------> |            | ---------> | MODEL |----
|      |            |            |            |       |   |
|------|            |            |            |-------|   |
                    | CONTROLLER |                        |
|------|            |            |            |-------|   |
|      |  request   |            |  request   |       |   |
| VIEW | ---------> |            | ---------> | MODEL |   |
|      |            |            |            |       |   |
|------|            |------------|            |-------|   |
   | |                                           |        |
   | |--------------------<<<<-------------------|        |
   |----------------------<<<<----------------------------|