JavaScript proxy object Proxy first experience simple data-driven view overview

This article brings you relevant knowledge about JavaScript. It mainly introduces you to the simple data-driven view of the JS proxy object Proxy for the first time. Friends in need can refer to it. Let’s take a look at it together. I hope it will be helpful to everyone. Helpful.

Front-end (vue) entry to mastery course: enter learning

JQuery is event-driven, that is to say, when a piece of data is associated with a certain content of the DOM, I need to operate the DOM for synchronization after the data changes:

 <div id="data">data</div>

 var data = "data"
//The data has changed through some kind of event data = "new data"
$("#data").text = data

In simple interactions, this method still seems convenient, but once the interactions become huge, the code will be bloated.

When I was about to graduate, Angular, Vue, and React were emerging, and we discovered a new way - data-driven. That is to say, through the "binding" of DOM and data, we can directly modify the data, and the DOM content can be directly modified. There has been a change.

 <div>{{data}}</div>

 var data = "data"
// ...bound somehow data = "new data"

The content in the DOM directly becomes new data. It is very convenient to use and the code is relatively concise. It seemed magical at the time.

Different data-driven frameworks have different binding principles and processes, and they are all relatively complex. But today we will simplify it and use JS's Proxy object to implement data drive. (By the way, Vue3’s responsive data uses this principle. Of course, it will be much more complicated than today’s example)

What is a Proxy object?

The Proxy object is used to create a proxy for an object to implement interception and customization of basic operations (such as attribute lookup, assignment, enumeration, function calling, etc.). The specific usage methods are:

 new Proxy (object to be proxied, event object of proxy)

The following events can be delegated:

Use Proxy to write a simple data-driven view

Now that we understand the basic usage of Proxy, we can use it to proxy the object's setter to implement data drive.

First define a DOM element with the same ID as the data:

 <div id="firstName"></div>
<div id="age"></div>

Set a Proxy proxy for data , proxy its setter , and operate the DOM in it:

 var data = {
firstName: "",
age: 0
}
var p_data = new Proxy(data, {
set: function (obj, prop, newval) {
document.getElementById(prop).innerText = newval;
obj[prop] = newval; // Don’t forget to implement the original logic return true; // Setter proxy requirements, return true after successful processing
}
})

Then set the initial value and set the relevant interactions, and note that the agent p_data is operated instead of data :

 p_data.firstName = "The name will be displayed in two seconds..."
p_data.age = 25
setTimeout(() => {
p_data.firstName = "Lin Yuchen"
}, 2000)
document.getElementById("grow").onclick = function() {
p_data.age++
}

In this way, data drive is realized. As long as the attribute value of p_data is modified arbitrarily, the content of the DOM can be directly changed:

JS

 var data = {
firstName: "",
age: 0
}
var p_data = new Proxy(data, {
set: function (obj, prop, newval) {
document.getElementById(prop).innerText = newval;
obj[prop] = newval;
return true
}
})
p_data.firstName = "The name will be displayed in two seconds..."
p_data.age = 25
setTimeout(() => {
p_data.firstName = "Lin Yuchen"
}, 2000)
document.getElementById("grow").onclick = function() {
p_data.age++
}