Theoretical front-end MVC, MVP, MVVM

The difference between MVC, MVP, and MVVM is based on the following information:

1. <<learning Javascript Design patters>> http://addyosmani.com/resources/essentialjsdesignpatterns/book/

2. WIKI:MVP Http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter

3. WIKI:MVVM Http://en.wikipedia.org/wiki/Model_View_ViewModel

4. Talk about the limitations of MVC in front-end development http://www.infoq.com/cn/articles/starting-from-limitations-of-mvc-in-front-end-development

Java EE platform-based back-end MVC, usually using struts or srping MVC framework to implement Mvc,modal represents the database level of the original data, view represents the display level of views elements, a project under a number of large functions through different URL mapping decomposition;

The controller in the backend is divided into two categories from the standpoint of responsibility:

1. Router-based routing: decomposition of many block functions of the project;

2. The presentation of data under a large function: According to the front-end Operation command and the corresponding business logic;

The place where front-end MVC differs from back-end MVC is:

1. How many features are inconsistent:

Back-end MVC gets the data from the modal layer, renders it, and returns a completely new view page;

The front end, after getting the data, will need to clean up the old view based on the non-refresh, rendering the new data, so there will be the logic of the Operation View , for the best user experience, including the logic:

0. Analyze and find the DOM node module associated with the operation, and perform the following actions for each module:

1. Change existing DOM nodes according to business logic, such as: Document.createelement, hide, show, etc. (more primitive)

2. Load the view template (the effect of the following steps: Relatively concise, unified)

3. Generate the View code from the template

4. Append code into the DOM tree

5. Binding DOM events for node nodes

(The above typical cases are: operation, refresh list)

Now there are a lot of template engines (underscore, Handler, EJS, JADE) that can do the rendering, instead of the original through the piecemeal edit | Add DOM node operation, this idea can be used as a reference to the back-end MVC view rendering;

Although the template is rendered in a good way, the following two questions are still not resolved:

1. controller is tightly bound to view and cannot be decoupled: because the logic of acquiring data, business logic, rendering view is in one piece;

2. The issue of the need to bind the event, in the complex business logic, still need to complete the binding in JS work is still unavoidable.

The advent of MVP (Presenter) focuses on solving two problems:

1. Decoupling and: The view is separated from the presenter, the button operation on the view will trigger a method in presenter, the method has no parameters and no return, but presenter will get the view data and update the view.

2. Testability: Through automated unit testing to ensure the correctness of business logic;

From this perspective, MVP-based ideas can produce many reusable components, and each class in Dojo's Dijit encapsulates properties, methods, and the user simply needs to invoke the method to complete without manipulating the DOM, and presenter in each class is the JS logic of the class itself. View is the corresponding DOM template for this class. Therefore, the project based on dojo can achieve the above two goals: decoupling, component testing.

The following paragraph is transferred from the MVP WIKI:

The degree of logic permitted in the view varies among different implementations. At one extreme, the view was entirely passive, forwarding all interaction operations to the presenter. In this formulation if a user triggers an event method of the view, it does nothing but invoke A method of the presenter that has no parameters and no return value. The presenter then retrieves data from the view through methods defined by the view interface. Finally, the presenter operates on the model and updates the view with the results of the operation. Other versions of Model-view-presenter allow some latitude with respect to which class handles a particular interaction, E vent, or command. This was often more suitable for web-based architectures, where the view, which executes on a client's browser, may be the Best place to handle a particular interaction or command.

The MVP idea is good, but a project development often needs many different components, many times when the component is MVP, slows down the project development progress, the extreme time more energy lies in the development new business component, maintains the component stability, the expansibility, in the pursue fast, the lightweight, the demand unceasingly iteratively updates the project, This is not an ideal approach.

Based on the MVP idea of the Dojo framework, the individual feels a bit oop, but also too heavyweight;

　　

MVVM ideas are derived from the MS WPF (Windows Presentation Foundation) and sliverlight, the typical embodiment of the front-end framework is: Angular; its typical feature is (case: Filter query list):

1. Separate the page rendering logic (the embedded for|if in the page is rendered according to the data) and the business logic (processing from the backend to get the data);

2. Bidirectional data-bound view layer is no longer passive, the view is dynamically updated by changing the monitoring data (automatically implemented within the framework);

The following rotor wiki MVVM:

MVVM facilitates a clear separation of the development of the graphical user interface (either as markup language or GUI code) from the development of the business logic or back end logic known as the model (also know n as the data model to distinguish it from the view model).

The M of a VM in angular uses a controller to obtain and hold the data, V to represent the page logic through the controller's NG tag syntax on the page, while the business logic can be done through $service, so ANGULARJS can do the following functions:

1. Event Binding page, no longer mixed with JS, avoid the doped page logic;

2. Router, controller, service role is quite clear, code maintainability is very strong, error is easy to locate, once a bug, it is easy to find the role, and find the source of the code;

3. testability, TDD testing can be specifically testing the front-end business logic, in the future of web development, the front end is no longer a simple presentation layer, you can put more business logic in the background to the foreground, reduce the cost of interaction with the server;

Summarize the characteristics of each:

0. Original mode:

Disadvantages:

Page to save your data,

JS code Logic Mix: A method of data acquisition operations, and business operations, as well as page rendering operations, the last event binding, append to the DOM tree;

Error is not easy to locate: The error is difficult to find, the code needs to read the entire side, complex logic needs a breakpoint tracking multiple times;

1. MVC

Advantages:

Separation of data, views;

The controller is between MV and acts as mediator and observer.

Disadvantages:

Logic at the controller level (TODOMVC based on the backbone implementation) jumps too much;

event binding required;

2. MVP

Advantages:

Presenter The view abstraction, encapsulates the corresponding method, the OOP;

function refinement, can be disassembled strong, forming a series of combinations of components used;

components can be tested;

Disadvantages:

MVP needs to be modular, resulting in relatively slow project development;

In the end do not know the maintenance is the project? or reusable components;

3. MVVM

Advantages:

Layered thinking is clear, the code will not be confused;

View <--> View modal <--> controller (acting as modal) <--> service <--> Router

Page rendering logic is independent;

event bindings are independent;

More testability: The business logic is independent, more focused, and later can be extended with more backend logic and foreground to reduce interaction,

Template engine:

Underscore http://underscorejs.org/#template

Moustache http://mustache.github.io/

EJS Https://github.com/tj/ejs

JADE Https://github.com/jadejs/jade

Theoretical front-end MVC, MVP, MVVM