How to implement simple data monitoring with JS

How to implement simple data monitoring with JS

Overview

Mainly use Object.defineProperty to implement data binding similar to vue.

first step

const data = {
  name: "tom",
  age: 14
}
Object.defineProperty(data, "name", {
  get(){
    return "name was read"
  },
 set(val){
   console.log('I was assigned',val)
 }
})
//Put this code in the browser console to view the effect console.log(data.name)

The output data.name is not tom, but name is read, because defineProperty monitors and hijacks the name field of data and modifies the value that the name field should have returned.

Step 2

const _data = { ...data }
for(let i in data){
  Object.defineProperty(data, i, {
    get(){
      return _data[i]+"modified by js"
    },
    set(val){
      _data[i] = val;
    }
  })
}

Why is a separate _data needed?

Answer: The data field is monitored and the return attribute of the field is modified. The resulting impact is that each time the monitored field in data is obtained, the browser will call the value returned by get. If you directly return return data[i] in get, the browser will continuously call the get method, thus entering an infinite loop.

Add a little more data to data

const data = {
  name: "tom",
  age: 14,
  friend:
        "name1": "Zhang San",
        "name2": "Li Si",
        "name3": "Wang Wu",
        "name4": "Zhao Liu"
  },
}

Formatting initial value

const createNewWatch = (val, path, parentKey, event) => {
       //If the value is not of object type, return the value directly if(typeof val != 'object') return val;
       //On the contrary, if it is of object type, then call WatchObject to traverse and monitor the child elements //WatchObject will be created in the following code return WatchObject(val,path.concat(parentKey), event)
    }
Guangzhou brand design company https://www.houdianzi.com

Format object and monitor value

const WatchObject = (data, path, event) => {
  function WatchObject(){
    for(var key in data){
        //Call the function created previously to format val
        data[key] = createNewWatch(data[key], path, key, event)
        //Create a listener for the data key defineProperty(this, key, data[key], path.concat(key), event)
    }
  }
  return new WatchObject()
}

Finally, execute the code and a simple data monitoring is completed.

const b = WatchObject(data,[],{ 
    set(path,val){ 
      console.log(path,val) 
    } 
})

The above is the details of how to use JS to implement simple data monitoring. For more information about JS data monitoring, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • How to monitor div resize event in JS
  • JavaScript monitoring combination key ideas and code implementation
  • How to monitor keyboard input and mouse clicks in JavaScript
  • NodeJS multiple ways to create WebSocket listeners (three)
  • Detailed explanation of sample code for monitoring URL changes without refreshing in js
  • JavaScript monitors keyboard events code implementation
  • Use JS to listen for keydown events
  • js implements watch code to monitor data changes
  • Detailed explanation of javascript event monitoring and event delegation examples

<<:  MySQL view principles and basic operation examples

>>:  How to install Oracle on Windows Server 2016

Recommend

A tutorial on how to install, use, and automatically compile TypeScript

1. Introduction to TypeScript The previous articl...

How to operate Docker and images

Find mirror We can search for images from the Doc...

Windows 10 + mysql 8.0.11 zip installation tutorial detailed

Prepare: MySQL 8.0 Windows zip package download a...

Detailed explanation of Vue's list rendering

Table of contents 1. v-for: traverse array conten...

How to position the header at the top using CSS sticky layout

Application scenarios: One of the new requirement...

Detailed explanation of the process of building an MQTT server using Docker

1. Pull the image docker pull registry.cn-hangzho...

Implementation of breakpoint resume in Node.js

Preface Normal business needs: upload pictures, E...

Specific usage of textarea's disabled and readonly attributes

disabled definition and usage The disabled attrib...

Solutions to Mysql index performance optimization problems

The optimization created by MySQL is to add index...

Linux centOS installation JDK and Tomcat tutorial

First download JDK. Here we use jdk-8u181-linux-x...

Based on the special characters in the URL escape encoding

Table of contents Special characters in URLs URL ...

How to install docker and portainer in kali

With the emergence of docker, many services have ...