1. What is MVC
1. MVC concept
MVC (Model View Controller), model (model) - view (view) - controller (controller), a kind of software framework.
(1) The top-level view view: used to display information, dynamically generate HTML, and directly present it to the user as a response result.
(2) The underlying model model: the data layer, including resources, tables in the database, etc.
(3) Middle-level controller controller: It contains the business logic of the application and the operation of operating data, which belongs to the back-end field.
These three layers are closely linked, but independent of each other, and changes within each layer do not affect other layers. Each layer provides an external interface (Interface) for the upper layer to call. In this way, the software can be modularized, and there is no need to modify other layers to modify the appearance or change data, which greatly facilitates maintenance and upgrades.
If you don't understand, refer to the explanation of the big guy Ruan Yifeng, which is more intuitive: http://www.ruanyifeng.com/blog/2007/11/mvc.html
2. Interaction pattern in MVC framework
There are the following two
(1) The user operates the view, usually a dom event
(2) The user operates the controller, usually a hashchange event, that is, changing the URL.
In actual development, the two operation modes can be mixed, and the two-way transmission between the view and the controller, and the view and the model can be performed.
2. What is MVP
MVP (Model-View-Presenter) is an improvement of the MVC model, changing the Controller to the Presenter and changing the communication method. It was proposed by Taligent, a subsidiary of IBM. Similar to MVC: Presenter is responsible for business logic, Model manages data, and View is responsible for display.
The Presenter in MVP provides an interface for the Presenter to update the Model, and then update the View through the observer mode. (As shown below)
Compared with MVC, MVP mode makes the division of responsibilities clearer by decoupling View and Model and completely separating View and Model; since View does not depend on Model, View can be extracted and made into components, and it only needs to provide a series of interfaces to provide upper-level operations.
2. What is MVVM
The MVVM pattern renames the Presenter in MVP to ViewModel, which is basically the same as the MVP pattern.
The only difference is that it uses two-way binding (data-binding): changes to the View are automatically reflected in the ViewModel, and vice versa. That is, the View and Model synchronization that the Presenter is responsible for in MVP is no longer manually operated, but is handed over to the data binding function provided by the framework. It only needs to tell it which part of the Model the data displayed by the View corresponds to. Angular and Ember etc all adopt this pattern.
As shown below:
Reference article: (1) Ruan Yifeng's "Illustration of MVC MVC MVVM" http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
(2) Liao Keyu "Analysis of MVC MVP MVVM Pattern in Front-end Development" http://liaokeyu.com/%E6%8A%80%E6%9C%AF/2017/06/01/js-architectural-patterns-overview .html