MVC
ModelViewController (MVC) is a computer user interface development model that separates information presentation logic and user interaction; Model contains application data and business logic; Controller is responsible for converting user input into commands and passing it to Model and View; this is Wikipedia's explanation;
This model was originally designed by Trygve Reenskaug when working with Smalltalk-80 (1979), and was first called Model-View-Controller-Editor; later, through the in-depth introduction of the book "Design Patterns: Elements of Reusable Object-Oriented Software", MVC became completely popular;
Understand the responsibilities of making up the three parts of MVC and what the existing javascript frameworks provide us so that we can better use these frameworks. Next, we will first pass the three parts that make up MVC to learn what the responsibilities of each part are [given a demonstration code with backbone as an example].
Model
Model manages application data. When the model data changes, its listener will be notified [probably a view]. After receiving the notification, the listener will make corresponding changes.
View
View is a visual representation of the current state model. The view will observe the changes of the model and is notified when the model changes, and allows the view to update itself. Generally, we will use the template engine to render the model in the view;
Controllers
Controllers is a 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.
Javascipt mvc framework comparison
Different people have different comparison methods, the key depends on what you pay attention to:
1. If you pay more attention to the details of the framework's URL routing, data storage, view implementation, etc., you can focus on this, JavaScript throne: Framework Sword;
2. If you pay more attention to specific examples of the framework, there is an open source project here that uses different JavaScript mvc frameworks for the same demo. You can clearly see the differences in specific applications of each framework. Here is the official website of TodoMVC
The benefits of MVC bring to us:
1. Easy to maintain
2. The decoupling of the model view means that the business logic can be better tested.
3. The code can be reused better
4. Modular development can make the division of labor clearer, some people focus on business logic, and some people focus on user interface.
5. After reviewing the classic mvc model, we understand the concept of layering in the application 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 explain. In this way, when choosing the mvc framework, we should focus on how models, views, controllers are implemented, and even how to implement specific codes, so as to help us better choose the most suitable javascript mvc framework.
MVVM
The full name of MVVM is Model View ViewModel. This architectural model was originally proposed by Microsoft's MartinFowler as the specification of Microsoft's presentation layer design model. It is a derivative of the MVC model. The focus of the MVVM model is on UI development platforms that can support event-driven, such as HTML5, [2][3] WindowsPresentation Foundation (WPF), Silverlight and t ZK framework, Adobe Flex.
Most of the implementation of this model is separated from other layers by declaring data binding at the view layer, which facilitates the division of labor between front-end developers and back-end developers. Front-end developers write bound data to viewmodel in the html tag. Model and viewmodel are back-end developers who maintain these two layers through the logic of developing applications.
In recent years, the mvvm model has begun to be implemented in JavaScript. Currently, relatively mature frameworks include KnockoutJS, Kendo MVVM and Knockback.js. Let’s take KnockoutJS as an example to see the specific responsibilities and example codes of each part of the MVVM model, and at the same time understand the advantages and disadvantages of using this model to develop.
Model
Like other MV* family members, Model represents data in a specific field or data required for the application, a typical field-specific data such as user information [user name, avatar, email, phone number], or a musical information [song name, release year, album];
Model only focuses on data information and does not care about any behavior; it does not format data or affect the display of data in the browser, which is not his responsibility; formatting data is the task of the view layer, and the business logic layer is encapsulated in the view model to interact with the model.
A more unexpected behavior done in the Model layer is to verify the data. For example, when the user enters the email, determine whether the email format is correct.
In KnockoutJS, Model is basically implemented according to the above definition, but there will be ajax calling server service to read and write Model data.
View
View refers to the part of the application that interacts directly with the user. It is an interactive UI to represent the state of the ViewModel. View is considered active rather than passive? This sentence means that passive View does not care about the domain of the model in the application, and the domain of the model is maintained in the controller; MVVM's active View includes data binding, events and the behavior of model and viewmodel needs to be understood. Although these behaviors can correspond to attributes, the view still needs to respond to the event of the viewmodel, and the View is not responsible for controlling the state.
The view layer of KnockoutJS is a simple html document, which will be associated with the data declaration of the viewmodel. At the same time, the view layer of KnockoutJS displays the data obtained from the ViewModel, passes commands to the viewmodel, and updates the changed state of the viewmodel.
ViewModel
It can be considered that ViewModel is a Controller specially used for data conversion. It can convert the information in the Model into information in the View, and at the same time pass commands from the View to the Model;
In this sense, ViewModel looks more like a Model, but it controls a lot of the display logic of the View. At the same time, ViewModel also exposes some methods to maintain the state of the view and update the model according to the view's behavior and events;
In summary, the ViewModel is located behind the UI layer, and exposing data to the View can be considered as the source of data and behavior of the View layer;
KnockoutJS interprets ViewModels as the display of data and behaviors expressed on the UI. It is not a data model that needs to be persisted, but it can hold the data stored by the user. Knockout's ViewModels are implemented using JavaScript objects, and there is no need to care about html tags. This abstract method can keep their implementation simple.
advantage:
1.MVVM makes parallel development easier, so that front-end development and back-end developers do not affect each other.
2. Abstract the View layer, reducing the business logic in the code
3.ViewModel is easier to test than event-driven
4. The test of ViewModel does not need to care about uI automation and interaction
shortcoming:
1. For simple UI, using MVVM is a bit too heavy
2. Declarative data binding is not conducive to debugging, because imperative code can easily set breakpoints, and this mode is not conducive to setting such breakpoints.
3. Data binding can create a lot of book-keeping in non-trivial applications. You also don't want to end up with a more complex situation in which binding is more complicated than the bound object.
4. In large applications, it is difficult to design views-model layer before obtaining a large number of generalizations.