above

Framework in this paper, the implementation of a reference in making MVVM, grammar for es6 syntax, and added some of my personal understanding, each piece of code is finishing your study after a train of thought, by the way, convenient fishing people learn to work, I also just a work for 3 years food chicken, this article only to share, Not as a lecturer teaching, if there are omissions in the article, please contact me to modify, light spray

Original link: github.com/DMQ/mvvm

Before you read: This article assumes that you are familiar with the syntax of ES6. It does not say much about ES6. For convenience, you will use ES6 a lot

The key code in this article will be written out easily to copy and paste yourself to see the output

Data brokers

Object.defineProperty()

To learn about data proxies, we need to first understand a method: Object.defineProperty(), which defines an Object’s properties, for example

let demo = {
    a:'a'.b:'b'
}
Copy the code

Here we define a demo object with two properties: A and B. What if we want to have a property c in the demo whose value is the sum of ‘A +b’ and whose value changes when a and B change? If we write this:

let demo = {
    a:'a'.b:'b'.c:this.a+this.b
}
Copy the code

Let’s take a look at the output:

As you can see, the result of c defined this way is completely wrong, and we need to use the object.defineProperty () method in this case

Note: Because there are a lot of defineProperty parameters, here is not a list of water words, can be viewed in MDN, attached MDN address: developer.mozilla.org/zh-CN/docs/…

Take a look at this method for example

Object.defineProperty(demo,'c',{
    get(){
        return 12}})/* The first two parameters of the function correspond to the object to which the attribute is to be added and the name of the attribute. The third parameter sets the property descriptor to be defined or modified. The pass parameter is passed as an object. The get argument is a function that says that when I use the attribute I defined using defineProperty, I return the value of the function return; For example, if I define a property c to the demo object and add a get method to its property descriptor that returns the number 12, then if I go to the console demo.c, I should get the value 12
console.log(demo.c);
Copy the code

get

As you can see, the output is exactly what we expected, and the output is a get return with the number 12

C = demo.a+demo.b; c = demo.a+demo.b

let demo = {
    a:'a'.b:'b'
}
Object.defineProperty(demo,'c',{
    get(){
        return this.a+this.b
    }
})
console.log(demo.c)
Copy the code

Output result:

We can see that demo.c is equal to demo.a :’a’ + demo.b :’b’, and output ‘ab’

demo.a = 'change a'
console.log(demo.c);
Copy the code

As you can see, at this point we have completed the dynamic auto-update of Demo.c

set

The get method, and we know the set method, we first introduce from literal meaning, the get is obtained, so the value of the attribute is defined in access time is called, the same inference, the set of translation is to set up, so does when setting the value of the attribute is called, we use the code under test

let demo = {
    a:'a'.b:'b'
}
Object.defineProperty(demo,'c',{
    set(value){
        console.log(value)
    }
})
demo.c = 12;
/* Set takes an argument that tells you what value to assign to the property. For example, if I set demo.c = 12, then the value in set is 12 */
Copy the code

Output result:

So you can see that it does execute the method in set, so what’s the use of this, because it would be wasteful to just print, like we could change c, but we could change a, right

let demo = {
    a:'a'.b:'b'
}
Object.defineProperty(demo,'c',{
    set(value){
        this.a = value; }})console.log(demo.a);
demo.c = 12;
console.log(demo.a);
Copy the code

As you can see, when we change demo.c, demo.a is still a, and when we change demo.c, we actually change demo.a to 12, thus making an implicit change