Front mv*

Front-end development, often exposed to MVC,MVP and mvvm these nouns, they are a way of software architecture design, was originally implemented for desktop application software design, and then the application of the Web variant, "What is MVC?" "This article has a detailed introduction. So how do they apply to the Web front end?

Mvc

First look at the concept of MVC (Model-view-controller):

Model: Defines the data model, implements the business logic, and updates it with the event notification view when the data is changed.
View: interface views, which can fetch data from model.
Controller: In response to user interface interaction, the model execution business logic can be called.

The real MVC is not suitable for the front-end implementation, because the user through the browser to manipulate the interface, are first by the view to respond. Backbone.js is often referred to as the front-end MVC framework, not really, the user's interaction with the interface or the first view, its controller just as a router.

Mvp

Looking at the concept of MVP (Model-view-presenter), MVP can be divided into supervising controller and passive View mode:

• Supervising Controller mode

Model: Defines the data model, implements the business logic, and updates the view through the event notification view when the data is changed.
View: interface views, in response to user interface interaction requests, and then transfer the request to presenter execution, view can also directly from the model to obtain data.
Presenter: Accepts the view request, then can do some simple control or data validation and other processing, response to the view, or call model execution business logic.

• Passive view mode

Model: Define the data model, implement the business logic, change the data, through the event notification Presenter,presenter again to manipulate the view, update the interface view.
View: Interface views, responds to user interface interaction requests, and then forwards the request to presenter execution.
Presenter: A request to accept a view can be done with some simple control or data validation, or by retrieving data from the model, then responding to view, or calling model execution business logic.

These two modes in the Web front-end implementation, is the page DOM event logic extracted, put into the presenter, while the presenter also act as a view and model communication intermediary, in practice, rarely in strict accordance with the MVP way to design.

MVVM

Whether MVC or MVP, is just a design idea, the goal is to achieve the interface view and business logic decoupling separation, in the Web front end, many frameworks are implemented in this way, the concept of MVVM (Model-view-viewmodel):

Model: Defines the data model, implements the business logic, and notifies the ViewModel data updates by event notification when the model data is changed.
View: Interface views, responds to user interface interaction requests, and then forwards the request to ViewModel execution.
ViewModel: Can accept view requests, Operation view and call model execution business logic, ViewModel data and View Association, when ViewModel data changes, automatically update the corresponding view of the interface.

Now the popular MVVM development framework, such as Vue, itself supports the following three features, which can save a lot of work for development

• Notify the corresponding ViewModel data update after model data changes
• User's action interaction response is forwarded to ViewModel via view (DOM node auto-bind event)
• ViewModel notification of the corresponding view update interface when data changes (interface automatically binds data)

Reference article:

• What exactly is MVC? 》
• "Under the interface: Restore the real mv* model"

Front mv*