Detailed Explanation of JavaScript Framework Design Patterns

mvc

Model（模型） - A model represents an object or JAVA POJO that stores and retrieves data. It can also contain logic to update the controller when the data changes.

View（視圖） - A view represents the visualization of the data contained in a model.

Controller（控制器） - The controller acts on the model and the view. It controls the flow of data to the model objects and updates the view when the data changes. It separates the view from the model.

It is one-way

mvp

The core of MVP lies in the presenter layer. The core of this layer is the operation of DOM elements. Taking the implementation of list page with jQuery as an example, the presenter mainly combines the data in the Model with the HTML tags through a loop and adds them to the View.

mvvm

The core of mvvm lies in the Model layer, the core of which is the operation on data. Compared with the mvp mode, our coding focus has shifted from the operation on dom to the operation on data. The VM layer displays data to the view layer and passes the data of the view layer to the Model layer. Vue is a typical example of viewModel

The source of Vue

Vue draws on react's virtual dom technology and angular's ng-directive technology

spa mpa

MPA: multi-page application

Features: The first loading is faster, and the subsequent loading is slower. The initial development cost is low, but the later maintenance cost is high.

SPA: single page application

The first load is slower, and the subsequent loads are faster. The initial development cost is high, but the later maintenance cost is low. (Mainly reused more)

createElement

var li = document.createElement(ele,src,content);
//ele The element to be created //src The attributes of the element //content The content of the elementvar li = document.createElement('li',{className='list-li'},'123');
<li className="list-li">123<li>

class

class Person {
   constructor(x,y) {
      this.x = x;
   }
   add() {
      console.log(this.x);
   }
}
var person = new Person(1,2);
typeof Person // function The essence of the class is a constructor Person === Person.prototype.constructor //true The class points to the prototype of the constructor person.hasOwnProperty(x); //true
person.hasOwnProperty(y); //false
person.hasOwnProperty(add); // false
This in the constructor points to the instantiated object, so x is a property of person and y and add are equivalent to adding to Person.prototype person.__proto__.hasOwnProperty(add) //true

The function in the class is equivalent to adding it to the prototype of the constructor.

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!