The definition of MVC

MVC full name Model View Controller, is Model (Model)- View (View)- Controller (Controller) abbreviation. MVC framework of this concept is derived from the backend building thought, is a kind of software design model, using a method of separation of business logic, data, interface display organization code, gathered in a business logic component, are trying to improve and personalized custom interface and user interaction at the same time, do not need to write the business logic.

  • A view is an interface that users see and interact with.
  • The model represents the data model and provides data to the view.
  • A controller is a bridge between the view and the model and handles business logic operations, specifically taking user input and invoking the model and view to fulfill user requirements.

Problems solved by MVC

With the development of front-end to module-oriented programming era, MVC architecture emerged at the right moment. Separation of data model (Modele), page View (View) and business logic (Controller) effectively solves the following problems:

  • Store data update replaces frequent DOM operations on pages, simplifying business codes;
  • Global temporary storage of data to avoid repeated requests for data resources;
  • Module decoupling, component-based development, to avoid mutual influence between functional modules;
  • Partial refresh to reduce page refresh times and improve user experience.

Iii. The deduction process of MVC

We use jQuery to implement Todolist, step by step to optimize the code until we push out MVC, so that you can better understand the MVC architecture. Only use jQuery to render the view layer list and count, and implement interactive operations such as new, toggle, destroy, destroy finished, and toggle All. Dom operations are quite frequent, as shown in the figure:

4. Extension of MVC architecture

1. MVC derived MVP

MVP (Model-View-Presenter) is an improvement of THE MVC pattern, proposed by Taligent, a subsidiary of IBM. The same as MVC: Controller/Presenter is responsible for business logic, Model management data, View is responsible for display; The difference is that in MVC, the View can access the Model directly, but in MVP, the View can’t use the Model directly. Instead, it provides an interface for the Presenter to update the Model and then update the View through observer mode.

Compared with MVC, MVP mode decouples View and Model, completely separating View and Model to make responsibility division clearer. Since the View doesn’t depend on the Model, it can be spun off as a component that provides a set of interfaces to the upper level.

2. MVC derived MVVM

MVVM (Model-view-viewModel) renames Presenter to ViewModel, basically the same as MVP mode. The only difference is that it uses data-binding: Changes to the View are automatically reflected in the ViewModel and vice versa. The Vue, React, and Angular frameworks all use the MVVM pattern.

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage"</button> </div>Copy the code
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js! '
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split(' ').reverse().join(' ')}}})Copy the code

The HTML section above is equivalent to the View View layer. You can see that the View here renders data declaratively into DOM elements through template syntax. When the ViewModel updates the Model, it updates it to the View through data binding. Data in Vue instance is equivalent to Model Model layer, while the core of ViewModel layer is two-way data binding in Vue, that is, VIew can update in real time when Model changes, and VIew changes can also make Model change. Overall, MVVM is much simpler than MVC. It not only simplifies business and interface dependencies, but also solves the problem of frequent data updates, eliminating the need to manipulate DOM elements with selectors.

conclusion

MVC, MVP, MVVM… M-v-whatever and other modes reduce the coupling of the code, and componentized programming improves the reusability of the code, but each has its own characteristics. It is important for us to understand the idea of architectural patterns and choose the appropriate architectural patterns according to the business requirements scenario.