Diagram of MVC,MVP and MVVM _mvc

Author: Ruan Yi Feng

Date: February 1, 2015

Complex software must have a clear and reasonable architecture, otherwise it cannot be developed and maintained.

MVC (Model-view-controller) is one of the most common software architectures and is widely used in the industry. It's easy to understand, but to be clear, it's not easy to distinguish it from the derived MVP and MVVM architecture.

Last night, I read "Scaling isomorphic Javascript code" and suddenly realised that the difference was very simple. I can say it in a few paragraphs.

(caption: Photo taken in Valencia, Spain, August 2014) I. MVC

The MVC pattern means that the software can be divided into three parts.

View: User interface. Controller (Controller): Business logic Model: Data preservation

The modes of communication between the parts are as follows.

View transfer instructions to Controller Controller completion of business logic, request model change state model to send new data to View, users get feedback

All communications are one-way. Second, interactive mode

When you accept user directives, MVC can be divided into two different ways. One is to accept the instruction through the View and pass it to Controller.

The other is to accept instructions directly through controller.

Iii. Example: Backbone

Practical projects tend to adopt a more flexible approach, taking backbone.js as an example.

1. The user can send instructions to the view (DOM event), and then the view directly requires Model to change the state.

2. Users can also send instructions directly to Controller (change URL trigger Hashchange event), and then sent to View by Controller.

3. Controller is very thin, only play the role of routing, and view is very thick, business logic is deployed in view. So, backbone simply cancels the Controller, leaving only one Router (router). Four, MVP

The MVP model renamed Controller the presenter and changed the direction of communication.

1. Communication between the parts is two-way.

2. View and Model do not occur in contact, are passed through the presenter.

3. View is very thin, do not deploy any business logic, called "Passive View" (passive view), that is, there is no initiative, and presenter is very thick, all the logic is deployed there. Five, MVVM

The MVVM model presenter renamed ViewModel, which is basically the same as the MVP model.

The only difference is that it uses bidirectional bindings (data-binding): View changes are automatically reflected in ViewModel, and vice versa. Both angular and ember adopt this pattern.

Finish

From:http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html