OverviewMainly use Object.defineProperty to implement data binding similar to vue. first stepconst 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 2const _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 dataconst data = { name: "tom", age: 14, friend: "name1": "Zhang San", "name2": "Li Si", "name3": "Wang Wu", "name4": "Zhao Liu" }, } Formatting initial valueconst 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 valueconst 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:
|
<<: MySQL view principles and basic operation examples
>>: How to install Oracle on Windows Server 2016
Main library binlog: # at 2420 #170809 17:16:20 s...
1. Change the virtual machine hardware version in...
1. Introduction to TypeScript The previous articl...
introduction The company's recent Vue front-e...
Find mirror We can search for images from the Doc...
Prepare: MySQL 8.0 Windows zip package download a...
Table of contents 1. v-for: traverse array conten...
Application scenarios: One of the new requirement...
1. Pull the image docker pull registry.cn-hangzho...
Preface Normal business needs: upload pictures, E...
disabled definition and usage The disabled attrib...
The optimization created by MySQL is to add index...
First download JDK. Here we use jdk-8u181-linux-x...
Table of contents Special characters in URLs URL ...
With the emergence of docker, many services have ...