MVVM introduction and demonstration

• easyUI
• knockout
• smartclient
• exit.js

• First of all, the first M refers to the Model, that is, the * * data Model. In fact, it refers to the data * * in the Vue component instance. However, we have defined this data from the beginning, which is called responsive data

• The second V refers to the View, that is, the * * page View. Changing to Vue is the DOM object converted from our template**

• The third VM refers to * * ViewModel, which is the manager of View and data. It manages the work of changing our data into View. In Vue, it refers to our current Vue instance, a bridge between Model data and View view View communication**

• In a word: data driven view, data change = > View update, bidirectional binding view update = > data change

Vue = = > MVVM = > bidirectional data binding = > this. Name = 'Zhang San'

React = > MVVM = > one way data binding = > only from data = > view = > this. Setstate ({Name: 'Zhang San'})

<!-- view -->
<template>
  <div>{{ message }}</div>
</template>
<script>
// Model common data object
export default {
  data () {
    return {
      message: 'Hello World'
    }
  }
}
</script>

<style>

</style>

MVVM responsive principle Object.defineProperty() - basic use

Vue documentation

From the above description, we found several keywords, object.defineproperty getter / setter

Definition: the Object.defineProperty() method will directly define a new property on an object, or modify an existing property of an object, and return the object.

Parameter: Obj = > the object on which to define the attribute.

Prop = > property name to be added or modified

Descriptor = > the attribute descriptor to be defined or modified.

Return value: the object passed to the function. That is, the obj object passed in

There are two main forms of attribute descriptors in object: data descriptors and access descriptors. A data descriptor is an attribute with a value that may or may not be writable. The access descriptor is a property described by the getter setter function. A descriptor must be one of these two forms; it cannot be both.

Let's write a simple example of * * data descriptor * *

        // Object.defineProperty(obj,prop, desciptor)
       //  Descriptor = > data descriptor access descriptor
       var obj = {
          name: 'Cao Yang'
       }
      var o = Object.defineProperty(obj, 'weight', {
           // Descriptor is an object
           // Data description access description
           value: '280kg'   // Data descriptor value
       })
       console.log(o)

Object.defineProperty() - data descriptor mode

• Value = > the value corresponding to the attribute. Can be any valid JavaScript value (value, object, function, etc.). Unfind by default
• Writable = > value can only be changed by the assignment operator if and only if the writable of the attribute is true. The default is false.

• Configuration = > when and only when the configuration of the attribute is true, the attribute descriptor can be changed, and the attribute can also be deleted from the corresponding object. The default is false. Decide whether writable can be changed
• Enumerable = > the attribute can appear in the enumeration property of an object only if and only if the enumerable of the attribute is true. The default is false.

Because these two attributes can appear not only in the data descriptor, but also in the access descriptor

   var obj = {
          name: 'Cao Yang'
      }
     Object.defineProperty(obj, 'money', {
         value: "10k" // Salary is immutable at this time
     })
     Object.defineProperty(obj, 'weight', {
         value: '150 Jin', // Ten thousand hairs
         writable: true
     })
     obj.money = '20k'
     obj.hair = '200 Jin'
     console.log(obj)

  var obj = {
          name: 'Cao Yang'
      }
     Object.defineProperty(obj, 'money', {
         value: '10k', // Salary is immutable at this time
         configurable: true  // The writeable property can only be changed if it is true here
     })
     Object.defineProperty(obj, 'weight', {
         value: '150 Jin', // Ten thousand hairs
         writable: true
     })
     obj.money = "20k"
     obj.weight = '200 Jin'
     console.log(obj)
     Object.defineProperty(obj, 'money', {
         writable: true 
     })
     obj.money = '20k'
     console.log(obj)

      var obj = {
          name: 'Cao Yang'
      }
     Object.defineProperty(obj, 'money', {
         value: '10k', // Salary is immutable at this time
         configurable: true,
         enumerable: true
     })
     Object.defineProperty(obj, 'weight', {
         value: '150 Jin', // Ten thousand hairs
         writable: true,
         enumerable: true

     })
     obj.money = "20k"
     obj.weight = '200 Jin'
     console.log(obj)
     Object.defineProperty(obj, 'money', {
         writable: true 
     })
     obj.money = '20k'
     console.log(obj)
     for(var item in obj) {
         console.log(item)
     }

Object.defineProperty() - access descriptor mode

• get a method that provides a getter for a property. If there is no getter, it is undefined. When the property is accessed, the method will be executed. No parameters will be passed in when the method is executed, but this object will be passed in (because of inheritance, this here is not necessarily the object defining the property).
• set a method that provides a setter for a property. If there is no setter, it is undefined. This method is triggered when the property value is modified. The method takes a unique parameter, the new parameter value of the property.

Let's make a way to read the settings through get and set

  var obj = {
          name: 'Cao Cao'
      }
      var wife = 'Little Joe'
      Object.defineProperty(obj, 'wife',{
          get () {
              return wife
          },
          set (value) {
             wife = value
          }
      })
      console.log(obj.wife)
     obj.wife= 'Big Joe'
      console.log(obj.wife)

 var obj = {
          name: 'Cao Cao'
      }
      var wife = 'Little Joe'
      Object.defineProperty(obj, 'wife',{
          configurable:true,
          enumerable: true,
          get () {
              return wife
          },
          set (value) {
             wife = value
          }
      })
      console.log(obj.wife)
     obj.wife= 'Big Joe'
      console.log(obj.wife)
      for(var item in obj) {
          console.log(item)
      }

Object.defineProperty() - simulate vm object

When Vue is instantiated, we explicitly assign data to data, but it can be accessed and set through * * vm instance. Property * *

How?

 var data = {
        name: "Zhang San"
      };
      var vm = {};
      Object.defineProperty(vm, "name", {
        set(value) {
          data.name = value;
        },
        get() {
          return data.name;
        }
      });
      console.log(vm.name);
      vm.name = "Li Si";
      console.log(vm.name);

Summary: We proxy the data in data in the access descriptors of set and get,

MVVM = > data agent = > object. Defineproperty = > access descriptor get / set = > agent data

MVVM not only needs to acquire these data, but also update them to DOM in a responsive manner. In other words, when the data changes, we need to reflect the data * * to the view

So how to notify? What technology to use? In the next section, we will bring the publish and subscribe mode

Introduction to the publish and subscribe mode

In fact, we have used it many times. Publishing / subscribing means that someone * * publishes news * * and someone subscribes to news. When it comes to data level, it means more = > more

That is, A program can trigger multiple messages or subscribe to multiple messages

What do we do with this model?

Let's write out some elements of the core code of this publish and subscribe

According to the above thought, we get the following code

 //  Create a constructor
      function Events (){}
        // Subscription message
        Events.prototype.$on = function(){}
        //  Publish news
        Events.prototype.$emit = function(){}

Implementation of publish and subscribe mode

    function Events () {
            this.subs = {}
        }
        Events.prototype.$on = function (eventName, fn) {
           this.subs[eventName] = this.subs[eventName]  || []
           this.subs[eventName].push(fn)
        }
        Events.prototype.$emit = function (eventName, ...params) {
            if(this.subs[eventName]) {
                this.subs[eventName].forEach(fn => {
                    //fn.apply(this, [...params])
                    //fn.call(this, ...params)
                    fn.bind(this,...params)()
                });
            }
        }
        var test = new Events()
        test.$on("updateABC", function(a,b,c){
          console.log(a+'-'+b+'-'+c)
          console.log(this)
        })
        var go = function(){
            test.$emit("updateABC", 1,2,3)
        }

MVVM implementation DOM review

What is DOM?

What is the role of Dom?

What are the types of object nodes in Dom

  <div id="app">
        <h1>Our wills unite like a fortress,Common anti epidemic situation</h1>
        <div>
            <span style='color:red;font-weight: bold;'>fairly tall:</span>
            <span>Wish all students a bright future</span>
        </div>
    </div>
    <script>
       var app = document.getElementById("app")
       console.dir(app)
    </script>

Node type of element type nodeType is 1, text type is 3, and every content in document object is * * node**

childNodes is the child value of all nodes, all elements = > nodeType = > node type

All child nodes are placed under the property childNodes. ChildNodes is a pseudo array = > pseudo array has no array method and len gt h property

attributes

Let's start by writing an example of MVVM

MVVM implementation - Implementation of Vue's constructor and data broker

        // First implement a constructor
        function Vue (options) {
            this.$options = options // All attributes give this an attribute
            this.$data = options.data || {}
            this.$el = typeof options.el ==="string"  ? document.querySelector(options.el) : options.el
            // Proxy all data to the current instance
            this.$proxyData()
        }
        // Proxy data
        Vue.prototype.$proxyData  = function () {
            Object.keys(this.$data).forEach(key => {
                Object.defineProperty(this, key, {
                    get () {
                        return this.$data[key]
                    },
                    set (value) {
                        if(this.$data[value] === value) return
                        this.$data[key] = value
                    }
                })
            })
        }
       var vm = new Vue({
          el: '#app',
          data: {
              name: 'Cao Yang',
              company: 'Seize the moon'
          }
        })
        console.log(vm.company)
        vm.company = 'Clasp the moon in the Ninth Heaven'
        console.log(vm.$data.company)
        vm.$data.company = 'Catch turtle in the sea'
        console.log(vm.company)

MVVM implementation - Data hijacking Observer

In the code in the previous section, we can use vm.company = 'value' or vm.$data.name = 'value'. Where can we capture the change of data?

        // Monitoring data
        Vue.prototype.observer = function () {
           Object.keys(this.$data).forEach(key => {
            let value =  this.$data[key]
            Object.defineProperty(this.$data, key, {
                get () {
                    return value
                },
                set (newValue) {
                    if(newValue === value) return;
                    value = newValue
                    // If the data changes, we need to change the view
                }
            })
           })
        }

  // First implement a constructor
        function Vue (options) {
            this.$options = options // All attributes give this an attribute
            this.$data = options.data || {}
            this.$el = typeof options.el ==="string"  ? document.querySelector(options.el) : options.el
            // Proxy all data to the current instance
            this.$proxyData()
            this.observer() // Enable monitoring data
        }

MVVM implementation compile template Compiler design structure

        // Compilation template
        Vue.prototype.compile = function () {}
        // Working with text nodes
        Vue.prototype.compileTextNode = function (node){}
        // Processing element nodes
        Vue.prototype.compileElementNode = function (node) {}
        // Determine whether it is a text node
        Vue.prototype.isTextNode = function(node) {};
        // Determine whether it is an element node
       Vue.prototype.isElementNode = function(node) {};
        // Determine whether the attribute is an instruction
        Vue.prototype.isDirective = function(attr) {};

MVVM implementation compile template Compiler implementation basic framework logic

        // Compilation template
        Vue.prototype.compile = function (rootnode) {
            let nodes = Array.from(rootnode.childNodes) // First convert the pseudo array to an array
            nodes.forEach(item => {
                if(this.isTextNode(item)) {
                    this.compileTextNode(node)
                }
                if(this.isElementNode(item)) {
                    this.compileElementNode(node)
                    this.compile(node) // The idea of recursion
                }
            })
        }
        // Working with text nodes
        Vue.prototype.compileTextNode = function (node){}
        // Processing element nodes
        Vue.prototype.compileElementNode = function (node) {}
        // Determine whether it is a text node
        Vue.prototype.isTextNode = function(node) {
            return node.nodeType === 3;
        };
        // Determine whether it is an element node
       Vue.prototype.isElementNode = function(node) {
         return node.nodeType === 1;
       };
        // Judge whether the attribute is implemented
        Vue.prototype.isDirective = function(attr) {
            return attr.startsWith("v-");
        };

MVVM implementation compile template Compiler process text node

   // Working with text nodes
      Vue.prototype.compileTextNode = function (node){
            const text = node.textContent 
            const reg = /\{\{(.+?)\}\}/g
            if(reg.test(text)) {
                // If the double brace is satisfied
                const key = RegExp.$1.trim()
                this.$on(key, () => {
                    node.textContent = text.replace(reg, this[key]) // Replace the corresponding data if the brace is found
                })
                node.textContent = text.replace(reg, this[key]) // Replace the corresponding data if the brace is found
            }
        }

MVVM implementation compile template Compiler process element node

   // Processing element nodes
        Vue.prototype.compileElementNode = function (node) {
          let atts = Array.from(node.attributes) 
          attrs.forEach(attr => {
              if(this.isDirective(attr.name)) {
                //  Determine whether it is an instruction
                if(attr.name === 'v-text') {
                    node.textContent = this[attr.value] // Equal to the value of the current property
                }
                if(attr.name === 'v-model') {
                    // v-model binds the value attribute of the form
                    node.value = this[attr.value]
                }
              }
          })
        }

MVVM implementation - data driven view - publish and subscribe Manager

        // First implement a constructor
        function Vue (options) {
            this.subs = {} //Publish Subscription Manager
            this.$options = options // All attributes give this an attribute
            this.$data = options.data || {}
            this.$el = typeof options.el ==="string"  ?                 document.querySelector(options.el) : options.el
            // Proxy all data to the current instance
            this.$proxyData()
            this.observer() // Enable monitoring data
        }
       Vue.prototype.$on=  function (eventName, fn) {
           this.subs[eventName] = this.subs[eventName]  || []
           this.subs[eventName].push(fn)
        }
        Vue.prototype.$emit = function (eventName, ...params) {
            if(this.subs[eventName]) {
                this.subs[eventName].forEach(fn => {
                    //fn.apply(this, [...params])
                    //fn.call(this, ...params)
                    fn.bind(this,...params)()
                });
            }
        }

MVVM implementation - driving view changes when data changes

     // Monitoring data
        Vue.prototype.observer = function () {
           Object.keys(this.$data).forEach(key => {
            let value =  this.$data[key]
            Object.defineProperty(this.$data, key, {
                get () {
                    return value
                },
                set: (newValue) => {
                    if(newValue === value) return;
                    value = newValue
                    
                    // If the data changes, we need to change the view
                    this.$emit(key) //Trigger data change
                }
            })
           })
        }

  // Working with text nodes
        Vue.prototype.compileTextNode = function (node){
            const text = node.textContent 
            if(/\{\{(.+)\}\}/.test(text)) {
                // If the double brace is satisfied
                const key = RegExp.$1.trim()
                this.$on(key, () => {
                    node.textContent = text.replace(reg, this[key]) // Replace the corresponding data if the brace is found
                })
                node.textContent = text.replace(reg, this[key]) // Replace the corresponding data if the brace is found
            }
        }
        // Processing element nodes
        Vue.prototype.compileElementNode = function (node) {
          let atts = Array.from(node.attributes) 
          attrs.forEach(attr => {
              if(this.isDirective(attr.name)) {
                //  Determine whether it is an instruction
                if(attr.name === 'v-text') {
                    node.textContent = this[attr.value] // Equal to the value of the current property
                    this.$on(attr.value, () => {
                       node.textContent =  this[attr.value] // Replace the corresponding data if the brace is found
                   })
                }
                if(attr.name === 'v-model') {
                    // v-model binds the value attribute of the form
                    node.value = this[attr.value]
                    this.$on(attr.value, () => {
                       node.value =  this[attr.value] // Replace the corresponding data if the brace is found
                    })
                }
              }
          })
        }

MVVM implementation - view change update data

        // Processing element nodes
        Vue.prototype.compileElementNode = function (node) {
          let attrs = Array.from(node.attributes) 
          attrs.forEach(attr => {
              if(this.isDirective(attr.name)) {
                //  Determine whether it is an instruction
                if(attr.name === 'v-text') {
                    node.textContent = this[attr.value] // Equal to the value of the current property
                    this.$on(key, () => {
                       node.textContent =  this[attr.value] // Replace the corresponding data if the brace is found
                   })
                }
                if(attr.name === 'v-model') {
                    // v-model binds the value attribute of the form
                    node.value = this[attr.value]
                    this.$on(key, () => {
                       node.value =  this[attr.value] // Replace the corresponding data if the brace is found
                    })
                    node.oninput = () => {
                        this[attr.value] = node.value
                    }
                }
              }
          })
        }