On the MVC structure and MVVM structure _javascript class library of JavaScript front-end development

Mvc
Model–view–controller (MVC) is a computer user interface development model that separates information presentation logic from user interaction; model contains the data and business logic of the application; Controller is responsible for putting the user's input Convert to command pass to model and view; This is Wikipedia's explanation;
This pattern was originally designed by Trygve Reenskaug when working with Smalltalk-80 (1979) and was first called Model-view-controller-editor, and later through the design Patterns: The in-depth introduction of the book, Elements of the reusable object-oriented Software, makes MVC completely popular;
Understanding the responsibilities that make up the three parts of MVC, and what the existing JavaScript frameworks provide for us, will enable us to better use these frameworks. Let's go through the three parts of MVC to learn what the responsibilities of each section are. "Take backbone as example to give the model code".
Model
model manages the application data. When the model data changes, it will notify its listener "may be view", after receiving the notification, the listener will make the corresponding changes.

View
view is the visual representation of the model in the current state, and view observes the changes in the models, is notified when the model changes, and allows view to update itself. In general, we will use the template engine to render model in view;

Controllers
controllers is the mediator between the models and views, and its job is to update the model when the model changes to update the view and when the user is manipulating view.

javascipt MVC framework Contrast
different people contrast methods, the key depends on what you focus on:
1. If you are more concerned about the URL routing of the Framework, data storage, view implementation details, you can focus on here, JavaScript Throne: framework of the Sword;
2. If you are more concerned about the specific examples of the framework, there is an open source project dedicated to the same demo using a different JavaScript MVC framework implementation, you can very clearly see each framework in the specific application of the difference, specific Implementation here, TODOMVC official site
MVC brings us benefits:
1. Easy to maintain
2. Decoupling of model views means better unit testing of business logic
3. Code can be better reused
4. Modular development can make the division of labor more clear, some people focus on business logic, some people focus on the user interface.
5. Reviewing the classic MVC model, we understand the concept of layering in applications and the responsibilities of each layer, and should be able to identify the differences between all JavaScript MVC frameworks and the classic MVC model we explain. In this way, we should focus on the implementation of the MVC framework, and even how specific code can be implemented to help us better choose the JavaScript MVC framework that best applies to our Models,views,controller.  

MVVM
MVVM's full name is Model View ViewModel, which was originally presented by Microsoft Martinfowler as the specification of the presentation layer design pattern of Microsoft software, which is a derivative of the MVC pattern, The focus of the MVVM mode is in the ability to support event-driven UI development platforms, such as Html5,[2][3] windowspresentation Foundation (WPF), Silverlight and T ZK framework,adobe Flex.
The majority of implementations of this pattern are separated from other layers by declaring data binding in the view layer, which facilitates the division of work between front-end developers and back-end developers, with front-end developers writing binding data to ViewModel in HTML tags. Model and ViewModel are the logic that backend developers use to develop applications to maintain these two tiers.
In recent years, the MVVM model has been implemented in JavaScript, and the current more mature framework has knockoutjs, kendo MVVM and Knockback.js, let's take Knockoutjs for example to look at the specific responsibilities and instance code of a section in the MVVM model, and understand the pros and cons of using this pattern development.
Model
like other members of the mv* family, model represents data for specific areas or applications, a typical domain-specific data such as user Information "username, avatar, email, phone", or a piece of music information "song name, release year, album";
Model is only concerned with data information, does not care about any behavior, she does not format data or affect the display of data in the browser, these are not his responsibility; Format data is the task of the view layer, and the business logic layer is encapsulated in ViewModel to interact with model.
In the model layer to do a relatively unexpected behavior is the data validation, such as when the user input email, to determine the correct format of the email.
In Knockoutjs, model is basically based on the above definition, but there will be through Ajax invoke server services to read and write model data.

View
view refers to the part of the application that interacts directly with the user, an interactive UI that represents the ViewModel state, and view is considered active rather than passive. The meaning of this sentence is that the passive view does not care about the field of model in the application, the field of model is maintained in controller; MVVM's active view contains data binding, events, and needs to understand 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 view layer of KNOCKOUTJS is a simple HTML document that has a data declaration associated with ViewModel, while Knockoutjs view layer displays the data obtained from the ViewModel, passing commands to ViewModel, and update the state of ViewModel change.

ViewModel
It can be thought that ViewModel is a special controller for data conversion, it can convert the information in model into view information, and give model from view command;
In this sense, ViewModel looks more like a model, but it controls many of the display logic of view, while ViewModel also leaks some methods used to maintain view state, according to view behavior and events to update model;
In summary, the ViewModel is located at the back of the UI layer, which can be regarded as the source of the data and behavior of the view layer.
Knockoutjs interprets ViewModel as a display of data and behavior on the UI, not a data model that the UI needs to persist, but he can hold data stored by the user; Knockout ViewModels is implemented using JavaScript objects, Without caring for HTML tags, this abstract approach can keep their implementations simple.

Benefits:
1.MVVM makes parallel development easier, making front-end development and back-end developers unaffected.
2. Abstract The view layer, reducing the business logic in the code
3.ViewModel is easier to test than event-driven
4.ViewModel tests do not care about the automation and interaction of the UI
disadvantage:
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, which is not conducive to setting such a breakpoint
3. Not picky (non-trivial) The application of data binding can create a lot of bookkeeping (book-keeping). Nor do you want to end the 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 getting a large number of profiles (generalization)