Illustration of the difference between MVC,MVP and MVVM

The MVC full name is Model view Controller, an abbreviation for Models-View-Controller (Controller), an example of software design, which organizes code by means of a business logic, data, and interface display.

MVC 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.

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 command to Controller

Controller completion of business logic, request Model change state

Model sends new data to View, user gets 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.