Objeto proxy JavaScript Primera experiencia de proxy descripción general de la vista simple basada en datos

Este artículo le brinda conocimientos relevantes sobre JavaScript. Principalmente le presenta la vista simple basada en datos del objeto proxy JS. Los amigos que lo necesiten pueden consultarlo juntos. será útil para todos.

Curso de entrada al dominio de front-end (vue): ingrese al aprendizaje

JQuery está controlado por eventos, es decir, cuando un dato está asociado con un determinado contenido del DOM, necesito operar el DOM para la sincronización después de que los datos cambian:

 <div id="datos">datos</div>

 var datos = "datos"
//Los datos han cambiado a través de algún tipo de evento data = "nuevos datos"
$("#datos").texto = datos

En interacciones simples, este método todavía parece conveniente, pero una vez que las interacciones se vuelven enormes, el código se inflará.

Cuando estaba a punto de graduarme, estaban surgiendo Angular, Vue y React, y descubrimos una nueva forma: basada en datos, es decir, a través de la "vinculación" de DOM y datos, podemos modificar directamente los datos. el contenido del DOM se puede modificar directamente. Ha habido un cambio.

 <div>{{datos}}</div>

 var datos = "datos"
// ...vinculado de alguna manera datos = "nuevos datos"

El contenido del DOM se convierte directamente en datos nuevos. Es muy cómodo de usar y el código es relativamente conciso. Parecía mágico en ese momento.

Los diferentes marcos basados ​​en datos tienen diferentes principios y procesos vinculantes, y todos ellos son relativamente complejos. Pero hoy lo simplificaremos y usaremos el objeto Proxy de JS para implementar la unidad de datos. (Por cierto, los datos receptivos de Vue3 utilizan este principio. Por supuesto, será mucho más complicado que el ejemplo de hoy)

¿Qué es un objeto proxy?

El objeto Proxy se utiliza para crear un proxy para un objeto para implementar la interceptación y personalización de operaciones básicas (como búsqueda de atributos, asignación, enumeración, llamada de funciones, etc.). Los métodos de uso específicos son:

 nuevo Proxy (objeto a ser proxy, objeto de evento del proxy)

Se pueden delegar los siguientes eventos:

Utilice Proxy para escribir una vista simple basada en datos

Ahora que entendemos el uso básico de Proxy, podemos usarlo para representar al setter del objeto para implementar la unidad de datos.

Primero defina un elemento DOM con el mismo ID que los datos:

 <div id="nombre"></div>
<div id="edad"></div>

Establezca un proxy Proxy para data , represente su setter y opere el DOM en él:

 datos var = {
nombre de pila: "",
edad: 0
}
var p_data = nuevo Proxy(datos, {
conjunto: función (obj, prop, nuevo valor) {
document.getElementById(prop).innerText = newval;
obj[prop] = newval; // No olvide implementar la lógica original return true; // Establece los requisitos del proxy, devuelve verdadero después de un procesamiento exitoso.
}
})

Luego establezca el valor inicial y establezca las interacciones relevantes, y tenga en cuenta que el agente p_data se opera en lugar de data :

 p_data.firstName = "El nombre se mostrará en dos segundos..."
p_data.edad = 25
setTimeout(() => {
p_data.firstName = "Lin Yuchen"
}, 2000)
document.getElementById("crecer").onclick = función() {
p_data.edad++
}

De esta manera, se logra la unidad de datos, siempre que el valor del atributo de p_data se modifique arbitrariamente, el contenido del DOM se puede cambiar directamente:

js

 datos var = {
nombre de pila: "",
edad: 0
}
var p_data = nuevo Proxy(datos, {
conjunto: función (obj, prop, nuevo valor) {
document.getElementById(prop).innerText = newval;
obj[prop] = nuevovalor;
devolver verdadero
}
})
p_data.firstName = "El nombre se mostrará en dos segundos..."
p_data.edad = 25
setTimeout(() => {
p_data.firstName = "Lin Yuchen"
}, 2000)
document.getElementById("crecer").onclick = función() {
p_data.edad++
}