Objeto proxy JavaScript Proxy primeira experiência visão geral simples baseada em dados

Este artigo traz a você conhecimento relevante sobre JavaScript. Ele apresenta principalmente a visão simples baseada em dados do objeto proxy JS. Amigos necessitados podem consultá-lo. será útil para todos.

Entrada front-end (vue) para curso de domínio: entre no aprendizado

JQuery é orientado a eventos, ou seja, quando um dado está associado a um determinado conteúdo do DOM, preciso operar o DOM para sincronização após a alteração dos dados:

 <div id="dados">dados</div>

 var dados = "dados"
//Os dados foram alterados através de algum tipo de evento data = "new data"
$("#dados").texto = dados

Em interações simples, esse método ainda parece conveniente, mas quando as interações se tornarem enormes, o código ficará inchado.

Quando eu estava prestes a me formar, Angular, Vue e React estavam surgindo, e descobrimos uma nova forma - orientada a dados. Ou seja, por meio da "ligação" de DOM e dados, podemos modificar diretamente os dados, e o conteúdo do DOM pode ser modificado diretamente. Houve uma mudança.

 <div>{{dados}}</div>

 var dados = "dados"
// ...vinculado de alguma forma data = "novos dados"

O conteúdo do DOM torna-se diretamente novos dados. É muito conveniente de usar e o código é relativamente conciso. Parecia mágico na época.

Diferentes estruturas baseadas em dados têm princípios e processos vinculativos diferentes e são todas relativamente complexas. Mas hoje vamos simplificá-lo e usar o objeto Proxy do JS para implementar a movimentação de dados. (A propósito, os dados responsivos do Vue3 usam este princípio. Claro, será muito mais complicado do que o exemplo de hoje)

O que é um objeto proxy?

O objeto Proxy é usado para criar um proxy para um objeto para implementar a interceptação e personalização de operações básicas (como pesquisa de atributos, atribuição, enumeração, chamada de função, etc.). Os métodos de uso específicos são:

 novo Proxy (objeto a ser proxy, objeto de evento do proxy)

Os seguintes eventos podem ser delegados:

Use Proxy para escrever uma visualização simples baseada em dados

Agora que entendemos o uso básico do Proxy, podemos usá-lo para fazer proxy do setter do objeto para implementar a unidade de dados.

Primeiro defina um elemento DOM com o mesmo ID dos dados:

 <div id="primeiroNome"></div>
<div id="idade"></div>

Defina um proxy Proxy para data , faça proxy de seu setter e opere o DOM nele:

 var dados = {
primeiro nome: "",
idade: 0
}
var p_dados = novo Proxy(dados, {
definir: função (obj, prop, newval) {
document.getElementById(prop).innerText = newval;
obj[prop] = newval; // Não se esqueça de implementar a lógica original return true; // Configurando os requisitos do proxy, retorne true após o processamento bem-sucedido;
}
})

Em seguida, defina o valor inicial e defina as interações relevantes e observe que o agente p_data é operado em vez de data :

 p_data.firstName = "O nome será exibido em dois segundos..."
p_dados.idade = 25
setTimeout(() => {
p_data.firstName = "Lin Yuchen"
}, 2000)
document.getElementById("crescer").onclick = function() {
p_data.age++
}

Desta forma, a movimentação de dados é realizada. Contanto que o valor do atributo p_data seja modificado arbitrariamente, o conteúdo do DOM pode ser alterado diretamente:

JS

 var dados = {
primeiro nome: "",
idade: 0
}
var p_dados = novo Proxy(dados, {
definir: função (obj, prop, newval) {
document.getElementById(prop).innerText = newval;
obj[prop] = newval;
retornar verdadeiro
}
})
p_data.firstName = "O nome será exibido em dois segundos..."
p_dados.idade = 25
setTimeout(() => {
p_data.firstName = "Lin Yuchen"
}, 2000)
document.getElementById("crescer").onclick = function() {
p_data.age++
}