MVC
MVC pattern means that the software can be divided into three parts:
View (View): the user interface.
A controller (Controller): business logic
model (Model): data storage
Communication between the various parts as follows:
Write pictures described here
Controller View transfer instruction to
the Controller complete the business logic required to change the state Model
Model send new data to the View, the user feedback
All communication is unidirectional.
Model
Model data management applications.
Model does not involve the user interface, nor does it involve the presentation layer, but on behalf of the application may require a unique form of data.
When Model change, which usually notify its viewers (e.g., View).
A Model model may have more than observe its View.
All in all, Model main business-related data.
View
Model View is a visual representation.
A Model View a normal detection, and notification when Model Change the View itself can be updated accordingly.
Users can interact and View, including reading and editing Model.
Since the View is the presentation layer, usually we can be edited and updated in a more friendly way.
The actual task of updating the Model is actually on the Controller.
template
We all know that hand-create a large number of HTML tags and by string concatenation performance is very bad practice.
js template in solution (e.g. Handlebar.js and Mustache) is generally defined as a template for marking comprises View template variable. In this case, we only need to focus on maintaining clean Model and templates. Most of the work is by binding framework itself to complete.
Here is an example of a Handlebars.js:
<li class="photo">
<h2>{{caption}}</h2>
<img class="source" src="{{src}}"/>
<div class="meta-data">
{{meta-data}}
</div>
</li>
1
2
3
4
5
6
7
Note that the template itself is not the View.
It is worth mentioning that in js application single page, once acquired by Ajax from the server data, dynamic data can be presented only in a new View the same page, without the need for any refresh.
Therefore, the role falls to navigation routing body, he helped manage application state.
Briefly, View is the visual representation of the application data.
Controller
Controller is an intermediary between the Model and View, when the user operates the View, which is usually responsible for updating the Model.
Backbone.js
For framework Backbone.js, which includes Model and View, but it's actually not really Controller, Controller with responsibility Backbone.View and Backbone.Router.
Write pictures described here
The user can send commands (DOM events) to View, and then by direct requirement Model View to change state.
Users can also send commands directly to the Controller (changing the URL hashChange trigger event), then sent to the View from the Controller.
Controller very thin, only perform routing functions, and very thick View, business logic deployed the View. So, Backbone simply canceled the Controller, leaving only a Router (router).
MVC benefits
This MVC separation of concerns help to further simplify modular application functionality and the ability to achieve:
Overall maintenance easier.
Decoupled Model and View, meaning that it can be more directly write the business logic unit testing
this modularity allows developers and developers responsible for the user interface is responsible for the core logic of work at the same time.
MVP
MVP is a derivative of MVC model focused on improving the presentation logic.
Presenter
MVP is expressed in P. This is a user interface for the business logic component comprises View.
Write pictures described here
Communication between the various parts, are bidirectional.
View and Model contact does not occur, it is passed through the Presenter.
View is very thin, not to deploy any business logic, called "passive view" (Passive View), ie without any initiative, while the Presenter is very thick, all logic deployed there.
MVP and MVC
MVP applicable to the application is very complex View and interact with large numbers of users.
If such a program, then this means using MVC to rely heavily on a plurality of controllers. In the MVP, all of these complex logic can be encapsulated in a vessel showing, greatly simplifying maintenance.
MVVM
Presenter MVVM mode renamed ViewModel, substantially identical with the MVP pattern.
Write pictures described here
The only difference is that it uses two-way binding (data-binding): View the changes are automatically reflected in the ViewModel, and vice versa.
MVVM by the Model, View, ViewModel three parts:
Model layer represents the data model, the data can also define and modify business logic operations in the Model;
View UI component representatives, which is responsible for the data model into unfolded UI
object view is a synchronous model layer ViewModel of View and Model.
In MVVM architecture, between the View and the Model no direct contact, but through the interaction between the interaction ViewModel, Model and ViewModel is bidirectional, so change View data will be synchronized to the Model, the data varies Model also react immediately to the View.
By the way data binding ViewModel layer and the Model-View is connected up, and synchronization between the View and Model entirely automatic, without human intervention, so developers can focus on the business logic, the DOM does not require manual operation, not We need to focus on the state of the data synchronization issues, the state of maintenance of complex data entirely unified management MVVM.
View and ViewModel
MVVM The View is active rather than passive.
Passive View displays only the output not accept any user input.
And between the View and ViewModel in MVVM communicate through data binding and events.
advantage
MVVM UI such as UI and provide a driving behavior parallel development module becomes easier.
View MVVM so abstract, to reduce the amount of logic required service code behind.
ViewModel in unit testing easier
Shortcoming
For simple UI, using MVVM overkill
data binding difficult to debug
View
Vue is a typical MVVM framework, which implements two-way data binding technology is a data hijacking. ES5 is provided by Object.defineProperty () method to hijack (monitoring) of each attribute getter, setter, and notifies subscribers when changes occur in the data (objects), triggering the appropriate listener callback.
Reference: icon MVC, MVP and MVVM the
analysis front-end development in MVC / MVP / MVVM pattern
---------------------
Author: gigi is my
source : CSDN
original: https: //blog.csdn.net/crystal6918/article/details/54237406
copyright: This article is a blogger original article, reproduced, please attach Bowen link!