Describe the differences and usages of MVC, MVP, and MVVM

What are MVC,MVP and MVVM respectively? 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 it's not easy to tell the difference between the derived MVP and the MVVM architecture.

First, MVC

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

View: User interface.

Controller: Business logic

Model: Data saving

The modes of communication between the sections are as follows.

1.View Transfer instructions to Controller

2.Controller requires Model to change state after completion of business logic

3.Model 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 passed to the Controller through the View acceptance instruction.

The other is to accept the instructions directly through the controller.

Third, example: Backbone

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

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

2. The user can also send instructions directly to the controller (changing the URL to trigger the Hashchange event) and then sent by the controller to the View.

3. The Controller is very thin and only acts as a route, and the view is very thick and the business logic is deployed in view. Therefore, Backbone simply cancels the Controller, leaving only one Router (router).

Four, MVP

The MVP mode renamed Controller to Presenter and changed the direction of communication.

1. The communication between the parts is bidirectional.

2. View and Model do not contact, are passed through Presenter.

3. View is very thin and does not deploy any business logic, called the "Passive View" (Passive view), which means that there is no initiative, and presenter is very thick, where all the logic is deployed.

V. MVVM

The MVVM pattern renamed Presenter to ViewModel, which is basically exactly the same as the MVP model.

The only difference is that it uses two-way binding (data-binding): The change of view is automatically reflected in ViewModel, and vice versa. This pattern is used in both angular and ember.