Talking about their understanding of the front-end MVC

A, MVC definition

MVC full name Model View Controller, is a model (model) - view (view) - abbreviation controller (controller) is. MVC This concept is derived from the rear end of the frame construction of thinking, is a software design model, with a service logic, data, interface display method of separating an organization code, a business logic to gather the inside member, and in improving personalization customizable interface and user interaction at the same time, without rewriting the business logic.

View (view) that users see and interact with the interface.
Model (Model) represented by the data model and provides data to the view.
A controller (Controller) is connected to the model view and the bridge, the business logic processing operations, specifically refers to accept user input and calls the model and view to fulfill the needs of users.

Two, MVC problem

With the front-end to the era of the development of module-oriented programming, MVC architecture came into being, the data model (modele), page view (View), business logic (Controller) separated effectively address the following issues:

Update page store data instead of using dom frequent operation, simplified service code;
Global temporary data, request data to avoid duplication of resources;
Decoupling module, component-based development, to avoid the mutual influence between the functional modules;
Partial refresh, reduce page refreshes and improving the user experience.

Three, MVC process of deduction

We use jQuery to achieve todolist, step by step to optimize the code until deduce MVC, so that we better understand the MVC architecture.
JQuery only list and render list view layer count statistics, and implement new, toggle, destroy, destroy finished , toggle all other interactive operations, the operation is more frequently DOM, as shown:

In order to store persistent data, storing the data store created locationStorage, though not MVC can be achieved, but the logic is very complex, each performance function involves a data storage change, as shown:

To simplify the data rendering operation, the introduction of a template engine, whenever the data changes, calls to render the template to render, as shown:

In order to achieve lasting status page, the introduction of router routing through different URL to distinguish between different states visited page, MVC architecture appeared, as shown:

Four, MVC architecture extensions

1, MVC derived MVP

MVP (Model-View-Presenter) is a modified MVC model, proposed by IBM subsidiary Taligent. And MVC are the same in that: Controller / Presenter responsible for business logic, data management Model, View is responsible for displaying; except that: in the MVC in, Model View can be accessed directly, but the MVP in the Model View and can not be used directly but by providing an interface for the Presenter, let Presenter to update the model, View and then updated by the observer mode.

Compared with the MVC, MVP View mode decoupling and Model, complete separation of model and view more clearly that the division of responsibilities; Because View not dependent Model, View components may be made pulled out, it only needs to interface to provide a range of top operation.

2, MVC derived MVVM

The MVVM (the Model-View-the ViewModel) will be renamed Presenter ViewModel, substantially identical with the MVP pattern. The only difference is that it uses two-way binding (data-binding): View the changes are automatically reflected in the ViewModel, and vice versa. Vue, React, Angular framework uses the MVVM pattern.

We have to Vue as an example, analyze the MVVM pattern:

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>
复制代码

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
复制代码

Html View view corresponding to parts of the above layers can be seen by View herein by declarative syntax of template data rendered into the DOM elements, when the Model ViewModel to update a binding update to the data View.
Vue Model example of data corresponding to the model layer, the core layer is a two-way ViewModel databinding Vue, i.e. when the Model changes can be updated in real time VIew, View changes also allow Model changed.
Overall, MVVM much leaner than MVC, not only simplifies the interface of business and dependence, but also solve the problem of frequently updated data, and then choose not to operate DOM elements.

to sum up

MVC, MVP, MVVM ... MV-Whatever mode the like, we have reduced coupling, assembly code improved programming code reusability, but each has its own characteristics. Our important to understand the architectural pattern of thinking, scenario based on business needs, local conditions to select the appropriate architectural pattern.

Reproduced in: https: //juejin.im/post/5d03c9ab518825122925bab0