Read the directory

  • In a nutshell
  • Part of the
  • Is there anything a chestnut can’t solve

In a nutshell

Before, I only had a vague understanding of MVVM mode, and as the saying goes, no practice means no right to speak. After two years of in-depth study of Vue framework and project practice, I can finally install B and have a feeling of clearing the clouds and seeing the bright moon.

Model — View — ViewModel(MVVM) is a software architecture design pattern developed by Ken Cooper and Ted Peters, Microsoft WPF and Silverlight architects, as an event-driven programming approach to simplifying user interfaces. Published by John Gossman (also WPF and Silverlight architect) on his blog in 2005.

MVVM is derived from the classic Model-View-Controller (MVC) pattern (along with the neglected model-View-Presenter (MVP) pattern). The emergence of MVVM promotes the separation of GUI front-end development and back-end business logic, greatly improving the efficiency of front-end development. The core of MVVM is the ViewModel layer, which is like a value Converter. It is responsible for transforming the data objects in the Model to make the data easier to manage and use. This layer is two-way data binding with the view layer. Down to the Model layer through the interface request for data interaction, play the role of up and down. As shown below:

The MVVM pattern

MVVM is quite mature and is used mainly but not only in web application development. KnockoutJS was one of the first front-end frameworks to implement the MVVM pattern. Popular MVVM frameworks include Vue, Angular, and others.

Part of the

A simple diagram is drawn to illustrate the various components of MVVM:

MVVM layering diagram

Layered design has always been one of the mainstream design ideas of software architecture, and MVVM is no exception.

# the View layer

A View is the View layer, the user interface. The front end is mostly built with HTML and CSS, and a variety of front and back end templated languages such as FreeMarker, Marko, Pug, Jinja2, etc. have been developed to make it easier to present ViewModel or Model layer data. MVVM frameworks such as KnockoutJS, Vue, Angular, and others have their own built-in template languages for building user interfaces.

# Model layer

Model is an exponential data Model, generally refers to the back-end of a variety of business logic processing and data manipulation, mainly around the database system. The processing on the back end can be quite complex:

Front end contrast

Back end: Our business logic and data processing will be very complicated here! Front end: I don’t give a shit!

It doesn’t matter how complicated the back-end business is, as long as the back-end makes sure the external interface is simple enough, I ask API, you return the data, that’s our relationship, the rest is bullshit.

# the ViewModel layer

A ViewModel is a layer of view data generated and maintained by an organization of front-end developers. In this layer, the front-end developer transforms and encapsulates the Model data from the back end to generate a View data Model that meets the expectations of the View layer. It is important to note that encapsulates the ViewModel data Model including the view state and behavior of the two parts, the Model layer of the data Model is only contains state, such as what a display this page, what a show that these belong to view state (show), and page load came in what happens, click on a piece of what happens, What happens as this piece of scrolling is all part of the view behavior, the view state and behavior are encapsulated in the ViewModel. This encapsulation allows the ViewModel to fully describe the View layer. Thanks to bidirectional binding, the contents of the ViewModel are displayed in real time in the View layer, which is exciting because the front-end developer no longer has to deal with the inefficient and cumbersome manipulation of the DOM to update the View. The MVVM framework has already done the dirty and tiring work. We developers just need to process and maintain the ViewModel, update the data view and it will be automatically updated accordingly, truly data driven development. You see, the View layer doesn’t represent the data in the Model layer, it represents the data in the ViewModel layer, and the ViewModel is responsible for interacting with the Model layer, which completely decouples the View layer from the Model layer, and this decoupling is critical, It is an important part of the implementation of the front – end separation scheme.

Is there anything a chestnut can’t solve

All this talk is of no use. A thousand words is not as good as a chestnut to simply, the following with a Vue example to illustrate the specific performance of MVVM.

Vue View template:

<div id="app">
    <p>{{message}}</p>
    <button v-on:click="showMessage()">Click me</button>
</div>
 Copy the code

Vue ViewModel layer (pseudocode below) :

Var app = new Vue({el: '#app', data: {// Used to describe the state of the view. ShowMessage (){let vm = this; showMessage(){let vm = this; alert(vm.message); } }, created(){ let vm = this; // get data from the Model layer Ajax ({url: '/your/server/data/ API ', success(res){ }}); }})Copy the code

Model layer on the server side (omitting business logic processing and only describing external interfaces) :

{
    "url": "/your/server/data/api",
    "res": {
        "success": true,
        "name": "IoveC",
        "domain": "www.cnblogs.com"
    }
}
 Copy the code

This is the full MVVM programming pattern.

The effect of bidirectional binding after code execution is as follows:

Vue implements data binding for the response

Hey hey, the front and back end can successfully break up, no longer need to care about the back end of the hammer development progress, Angry face, complex implementation, blabla… Enjoy the silky development pleasure of the front end 🙂