When looking at the source code of Tencent Interactive Live recently, I found that the previous mvc has been directly changed to mvp, and the mvp design pattern is becoming more and more popular and very popular. There is also mvvm, found to be very similar to the adapter of recycleView, two-way data binding. Some time ago, a front-end colleague suddenly asked about mvp and mvvm. I also talked about my rough understanding, so I checked the information online and learned to record it.
1. What is MVC (Model-View-Controller)
The full name of MVC is Model View Controller, which is an abbreviation of model-view-controller. It is a model of software design. It organizes code in a way of separating business logic, data, and interface The business logic is gathered in one component, and there is no need to rewrite the business logic while improving and customizing the interface and user interaction. MVC is uniquely developed to map traditional input, processing, and output functions in a logical graphical user interface structure.
2. What is MVP (Model-View-Presenter)
MVP evolved from the classic pattern MVC, and their basic ideas have similarities: Controller/Presenter is responsible for logic processing, Model provides data, and View is responsible for display.
2.1 The difference between MVP and MVC?
mvc structure diagram
MVC, the View, corresponds to various Layout layout files, but these layout files are not as powerful as the Web side, and they can do very limited things; Controller corresponds to Activity, and Activity has UI operations Function, we will have a lot of UI operations in this layer in the actual project, and we have also done a lot of things that should be done in the View. Of course, the Controller also contains the things that the Controller should do, such as dispatching callbacks for various events, and In the first layer, we will call the Model layer to manipulate the data according to the event, so this MVC method is very heavy in the actual project, the Controller where the Activity is located, and the coupling between the layers is also serious.
mvp structure diagram
Use the evolutionary version of MVC-MVP. In MVP, Layout and Activity are used as the View layer, and the Presenter is added. The Presenter layer interacts with the Model layer for business, and then interacts with the View layer (that is, Activity) for callback to refresh after completion. UI. In this way, all the work of the business logic is handed over to the Presenter, which reduces the coupling between the View layer and the Model layer, and the work in the Activity is also simplified. However, in actual projects, with the increasing complexity of logic, the shortcomings of Activity bloated still manifested, because Activity is still full of a lot of code that has nothing to do with the View layer, such as the processing and dispatching of various events, such as As in MVC, the View layer and Controller code are coupled together and cannot be extricated.
The functions of each XML view purely as View in Android are too weak. Activity is basically a combination of View and Controller. It is not only responsible for displaying the view but also adding control logic. It is not surprising that there are too many functions and the amount of code is large. . So I think MVP is better than MVC on Android because we need a stronger control layer to share the logic part of Activity to the greatest extent
2.2 How does MVP solve the MVC problem?
In MVP, Presenter completely separates Model and View, and the main program logic is implemented in Presenter. Moreover, the Presenter is not directly related to the specific View, but interacts through a defined interface, so that the Presenter can be kept unchanged when the View is changed, that is, reuse! Not only that, we can also write Views for testing to simulate various operations of the user, so as to achieve the test of the Presenter-without using automated testing tools.
We can even test the logic of the Presenter by writing Mock Object (that is, the interface between Model and View is implemented, but there is no specific content) when the Model and View are not completed.
In MVP, the logic of the application is mainly implemented in the Presenter, where the View is a very thin layer. Therefore, someone proposed the Presenter First design pattern, which is to design and develop Presenter first based on User Story. In this process, View is very simple, and it is enough to display the information clearly. Later, you can change the View as needed without any influence on the Presenter. If the UI to be implemented is more complex, and the related display logic is related to the Model, you can place an Adapter between the View and the Presenter. Access Model and View by this Adapter, avoiding the association between the two. At the same time, because the Adapter implements the View interface, the interface with the Presenter can be kept unchanged. In this way, the interface between View and Presenter can be kept concise without losing the flexibility of UI.
In the MVP mode, the View should only have a simple Set/Get method, the user input and set the content displayed on the interface, there should be no more content, and no direct access to the Model is allowed – this is very much like MVC The difference.
2.3 MVP advantages
1. The model and the view are completely separated. We can modify the view without affecting the model.
2. The model can be used more efficiently because all interactions occur in one place-inside the
Presenter. 3. We can use one Presenter for multiple views , Without changing the logic of Presenter. This feature is very useful because the view changes more frequently than the model changes.
4. If we put the logic in the Presenter, then we can test the logic without the user interface (unit testing)
3. What is MVVM (Model-View-ViewModel)
Model, domain model (domain model) or the data model represented by the data layer can also be understood as the abstraction (data) that the user interface needs to display data. (Business rule, data access, model classes)
View, application interface
ViewModel, where the binder is, is the abstraction of View, which exposes public properties and commands, and is the (binding) connector between View and Model
In addition, there is an essential part: Binder, which is also called Data binding in Android, which provides the binding function of View and Model, so Model-View-ViewModel is also called Model-View-Binder.
View binds to ViewModel, and then executes some commands to request an action from it. In turn, the ViewModel communicates with the Model, telling it to update in response to the UI. This makes it very easy to build UI for the application. The easier it is to post an interface to an application, the easier it is for a visual designer to use Blend to create a beautiful interface. At the same time, when UI and functions become loosely coupled, the testability of functions becomes stronger.
In the MVP mode, in order to separate the UI layer from the logic layer, designers add an interface between the UI layer and the logic layer. Both UI developers and data developers must respect this contract and design and develop in accordance with it. In this way, under ideal conditions, both Web UI and Window UI can use the same set of data logic. Learn from the IView layer of MVP and develop a habit. View Model sounds much more appropriate than Presenter; some things related to events and commands will be placed in the'C' of MVC, or'Vm' of MVVM.
3.1 Advantages of MVVM
- Low coupling. Views can be independent of Model changes and modifications. A ViewModel can be bound to different "Views". The Model can remain unchanged when the View changes, and the View can also remain unchanged when the Model changes.
- Reusability. You can put some view logic in a ViewModel and let many views reuse this view logic.
- Independent development. Developers can focus on business logic and data development (ViewModel), designers can focus on page design, using Expression Blend can easily design interfaces and generate xml code.
- Can be tested. Interfaces have always been difficult to test, but now tests can be written for ViewModel.