JS Architecture Design Pattern--Understanding the MVVM development pattern in JavaScript

Understanding the MVVM development pattern in JavaScript

http://blog.csdn.net/slalx/article/details/7856769

The full name of MVVM is the model View ViewModel, which was originally presented by Microsoft's Martinfowler as a specification for the presentation layer design pattern of Microsoft software, a derivative of the MVC pattern. , the focus of the MVVM pattern is on the ability to support event-driven UI development platforms such as HTML5,[2][3] windowspresentation Foundation (WPF), Silverlight and T ZK framework,Adobe Flex.

Most of the implementation of this pattern is separated from the other layers by declaring data binding on the view layer, which facilitates the division of labor between front-end developers and back-end developers, and front-end developers write binding data to ViewModel in HTML tags. Model and ViewModel are the back-end developers who maintain these two layers by developing the logic of the application.

In recent years, theMVVM pattern has been implemented in JavaScript, with the more mature framework currently Knockoutjs, kendo MVVM And Knockback.js, let's take Knockoutjs as an example to see the specific responsibilities and instance code for the parts of the MVVM pattern, while understanding the pros and cons of using this pattern development.

Model

like other members of the mv* family,Model represents data for a particular domain or application, a typical domain-specific data such as "User name, avatar, email, phone", or a piece of music information " Song name, release year, album ";

The model only focuses on data information and does not care about any behavior; she does not format data or affect the presentation of data in the browser, which is not his responsibility; formatted data is the task of the view layer, and the business logic layer is encapsulated in ViewModel to interact with the model.

One of the more unexpected behaviors in the model layer is the validation of the data, such as when the user enters an email and determines whether the email is in the correct format.

In Knockoutjs, the model is basically implemented according to the definition above, but there will be a server service through Ajax calls to read and write model data.

View

View refers to the part of the app that interacts directly with the user, an interactive UI that represents the state of the ViewModel, and view is considered active rather than passive. The meaning of this sentence is that passive view is not concerned with the field of model in the application, the field of model is maintained in the controller; MVVM's active view contains data binding, events, and the need to understand the model and ViewModel behavior, Although these behaviors can correspond to attributes, view still needs to respond to ViewModel events while view is not responsible for controlling the state.

The Knockoutjs view layer is a simple HTML document that has a data declaration associated to the ViewModel, while the Knockoutjs view layer shows the data obtained from the ViewModel, passing commands to ViewModel, and update the state of the ViewModel change.

ViewModel

It can be considered that ViewModel is a controller dedicated to data conversion, which can convert the information in the model to the information in the view, and give the model from the view-specific command;

In this sense, ViewModel looks more like a model, but it controls many of the display logic of the view, while ViewModel also leaks some methods to maintain the state of the view, updating the model according to the view's behavior and events;

In conclusion, ViewModel is located at the back of the UI layer, and the burst data to view can be considered as the source of data and behavior of the view layer;

Knockoutjs interprets ViewModel as data presentation and behavior on the UI, which is not a data model that the UI needs to persist, but he can hold data stored by the user; Knockout ViewModels is implemented with JavaScript objects, Instead of worrying about HTML tags, this abstract approach can keep their implementations simple.

Advantages:

1. MVVM makes parallel development easier, leaving front-end development and back-end developers unaffected.
2. Abstraction of the view layer, reducing business logic in the code
3. ViewModel easier to test than event drivers
4. ViewModel's testing doesn't care about UI Automation and interaction

Disadvantages:

1. For a simple UI, using MVVM is a bit too heavy
2. Declarative data binding is not conducive to debugging, because imperative code can and easily set breakpoints, this mode is not conducive to set such a breakpoint
3. Data binding can create a lot of bookkeeping (book-keeping) in applications that are not picky (non-trivial). You don't want to end up with a situation where binding is more complex than the object being bound.
4. In large applications, it is difficult to design a view-model layer before obtaining a large number of profiles (generalization)

In the previous article we learned about the pattern of MVC development, what is the difference between the two types of development, and we will do a specific analysis in the next article

JS Architecture Design Pattern--Understanding the MVVM development pattern in JavaScript