Talking about the MVC structure and MVVM structure of JavaScript front-end development, mvcmvvm

Talking about the MVC structure and MVVM structure of JavaScript front-end development, mvcmvvm

MVC
Model-View-Controller (MVC) is a computer user interface development mode that separates information presentation logic from user interaction. Model contains application data and business logic; the Controller is responsible for converting user input into commands and passing them to Model and View. This is Wikipedia's explanation;
This pattern was initially designed by Trygve Reenskaug when working with Smalltalk-80 (1979), initially called Model-View-Controller-Editor; later passed Design Patterns: the in-depth introduction of Elements of Reusable Object-Oriented Software has completely popularized mvc;
Understanding the responsibilities of the three components of MVC and what the existing javascript frameworks provide for us can help us better use these frameworks. Next, we first pass through the three components of MVC to learn what the responsibilities of each part are. [demonstration code is provided using backbone as an example ].
Model
Model is used to manage application data. When the model data changes, the listener may be notified of [view]. After receiving the notification, the listener changes accordingly.

View
View is the visual display of the current State model. view will observe the changes of the model, be notified when the model changes, and allow view to update itself. Generally, we use the template engine to render the model in the view;

Controllers
Controllers is the mediator between models and views. Its job is to update the view when the model changes and to update the Model when the user operates the view.

Comparison of javascipmvc framework
Different people have different methods of comparison. The key is what you pay attention:
1. If you are more concerned with the URL routing, data storage, view implementation, and other details of the framework, you can focus on the following: the throne of javascript: the sword of the Framework;
2. if you pay more attention to the specific example of the framework, there is an open-source project dedicated to using different javascript mvc frameworks for the same demo, we can clearly see the differences between each framework in specific applications. Here, TodoMVC Official Site
Benefits of MVC:
1. Easy to maintain
2. Decoupling of model views means better unit testing of business logic.
3. Better code reuse
4. modular development can make the Division of Labor clearer. Some people focus on the business logic and some others focus on the user interface.
5. after reviewing the classic mvc model, we understand the concept of hierarchy in applications and the responsibilities of each layer, at the same time, we should be able to identify the differences between all javascript mvc frameworks and the classic mvc model we have explained. In this case, when selecting the mvc framework, we should focus on how models, views, and controller are implemented, and even how the specific code is implemented, to help us better choose the most suitable javascript mvc framework.

MVVM
The full name of MVVM is Model View ViewModel, which was initially proposed by Microsoft's MartinFowler as the specification of the Presentation Layer Design Pattern of Microsoft software. It is a derivative of the MVC pattern, the MVVM mode focuses on event-driven UI development platforms, such as HTML5, [2] [3] WindowsPresentation Foundation (WPF), Silverlight, t ZK framework, and Adobe Flex.
Most of the implementations of this mode are separated from other layers by declaring data binding at the view layer, which facilitates the division of labor between front-end developers and backend developers, front-end developers write data bound to viewmodel in html tags. model and viewmodel are two layers maintained by backend developers by developing application logic.
In recent years, the mvvm mode has been implemented in javascript. Currently, the mature frameworks include KnockoutJS, Kendo MVVM, and Knockback. js. Next we will take KnockoutJS as an example to look at the specific responsibilities and instance code of the MVVM mode, and understand the advantages and disadvantages of using this mode for development.
Model
Like other members of the mv * family, the Model represents the data required by the data or applications in a specific field. The data in a typical specific field, such as user information [user name, profile picture, email, phone number, or the music information [song name, release year, album ];
The Model only focuses on the data information and does not care about any behavior. It is not his responsibility that she does not format the data or affect the display of the data in the browser. formatting the data is a task at the view layer, at the same time, the business logic layer is encapsulated in viewmodel and used to interact with the model.
An unexpected behavior at the Model layer is data verification. For example, when a user inputs an email, the user determines whether the email format is correct.
In KnockoutJS, the Model is basically implemented according to the above definition, but ajax will call the server service to read and write the Model data.

View
A View is a part of the application's direct interaction with users. It is an Interactive UI that represents the ViewModel status. A View is considered active, not passive? The meaning of this sentence is that passive View does not care about the model Field in the application, and the model field is maintained in the controller; MVVM's active View includes data binding, events and actions that need to understand the model and viewmodel. Although these actions can correspond to attributes, the view still needs to respond to the viewmodel event, and the View is not responsible for controlling the status.
The view layer of KnockoutJS is a simple html document, which contains data declarations associated with viewmodel. Meanwhile, the view layer of KnockoutJS displays the data obtained from the ViewModel and passes the command to the viewmodel, the changed viewmodel status is also updated.

ViewModel
ViewModel can be considered as a Controller dedicated for data conversion. It can convert the information in the Model to the information in the View, and deliver the command from the View to the Model;
In this sense, ViewModel looks more like a Model, but it controls many display logics of the View. Meanwhile, ViewModel also exposes some methods to maintain the view status, update the model Based on View behaviors and events;
In summary, ViewModel is located behind the UI Layer, and data is exposed to the View, which can be considered as the source of data and behavior at the View layer;
KnockoutJS interprets ViewModel as the display of data and the behavior on the UI. It is not a data model that the ui needs to be persistent, but it can hold the data stored by the user; the ViewModels of Knockout is implemented by using javascript objects without the need for html tags. This abstract method can simplify their implementation.

Advantages:
1. MVVM makes parallel development easier, so that front-end developers and backend developers do not affect each other.
2. Abstract View layer, reducing the business logic in the code
3. ViewModel is easier to test than event-driven
4. ViewModel tests do not need to care about uI automation and interaction.
Disadvantages:
1. For a simple ui, using MVVM is too heavy
2. Declarative data binding is not conducive to debugging, because imperative code can easily set breakpoints, which is not conducive to setting such breakpoints
3. In non-trivial applications, Data Binding can create a large number of book-keeping records ). You do not want to end up binding more complex than the bound object.
4. In large applications, it is difficult to design a view-model layer before obtaining a large number of summaries (generalization ).