mvc, mvvm architecture

mvc, mvvm architecture

1. What is mvc, mvvm

   is an architectural pattern

2. mvc, mvvm role

   They are all for decoupling "interface" and "business logic", but the solutions are different!

3. mvc

   MVC splits the system into controllers, views, and models to solve the above problems:
   Controller (Controller)-responsible for forwarding requests and processing them.
   View (View) - interface designers for graphical interface design.
   Model (Model) - programmers write the functions that the program should have (implement algorithms, etc.), database experts perform data management and database design (can realize specific functions).

/** 模拟 Model, View, Controller */
var M = {}, V = {}, C = {};
/** Model 负责存放数据 */
M.data = "hello world";
/** View 负责将资料展示出来 */
V.render = (M) => { alert(M.data); }
/** Controller 作为M和V的桥梁 */
C.handleOnload = () => { V.render(M); }
/** 在页面加载的时候调用
Controller*/window.onload = C.handleOnload;

Such a split improves the system's:

• Extensibility
  View, Model and Controller are responsible for view, data and control respectively, and can evolve independently. It is more convenient to add new functions.
• Maintainability
  Clear structure, multiple Views can reuse a Model, reducing code duplication
• Testability
  Each component has a single responsibility and can perform automated tests on the Model
• Flexibility
  Controller can be used to connect different Models and Views to fulfill user needs
• Configurability
  Given some reusable Model, View and Controller, you can choose the appropriate Model to process according to the user's needs, and then select the appropriate View to process and display the results to the user.

4. The mvvm
MVVM pattern splits the system into views, models, view models, and binders to solve coupling problems:
Model: Model refers to the domain model (object-oriented) that represents the real state content, or refers to the data access layer that represents the content (data-centric). It is similar to what the Model in MVC refers to.
View: Just like in MVC, View is the structure, layout and appearance (UI) that the user sees on the screen.
ViewModel: A ViewModel is an abstraction of a View exposing common properties and commands.
Binder: The binder is an implicit component in the MVVM pattern. The ViewModel declares the binding relationship between the data and the View, and the binder handles the declared binding relationship.

Like the MVC pattern, the same system properties are promoted, but in a few different ways:

• Extensibility
  View, Model and ViewModel (and Binder) are responsible for view, data and data view binding respectively, and can evolve independently
• Maintainability
  Clear structure, multiple Views can reuse a Model, reducing code duplication
• Testability
  Each component has a single responsibility and can perform automated tests on the Model. The foreground can also perform automated tests on the ViewModel.
• Flexibility
  ViewModel can be used to bind different Models and Views to fulfill user needs
• Configurability
  Given some reusable Models and Views, you can select the appropriate Model for processing according to the user's needs, and then select the appropriate View to process the results and display them to the user

6. MVC instance SpringMVC

7. MVVM instance Vue