Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

282
Visualizações
¿Cómo detectar y rastrear cambios de objetos en JS?

Quiero mantener un historial de los cambios realizados en una entidad. Por ejemplo, entidad de usuario:

 { name: 'Raz', places_visited: [ { city: 'Jerusalem', street: 'King David', house_number: 10 } ] }

Entonces se pueden aplicar estos tipos de cambios:

  1. el nombre 'Raz' se ha actualizado a 'Raziel'
  2. El primer lugar que visitó se actualizó de house_number 10 a house_number 20
  3. Se ha insertado un nuevo lugar en la parte superior (visitó este lugar antes que el lugar que ya había visitado, como unshift ): { city: 'Tel Aviv', street: 'Ibn Gabirol', house_number: 30 }

Quiero almacenar esos cambios de alguna manera, probablemente en la base de datos en una colección de historial dedicada que almacenará cualquier cambio, independientemente de la entidad del usuario. La colección de historial puede verse así y tener estos campos:

EntityType, EntityId, KeyChanged, OldValue, NewValue, ... (IAT y By, etc.)

Entonces, en nuestro caso, la colección de historial debe contener las siguientes 4 filas:

  1. usuario, 123, nombre, Raz, Raziel, hoy, por administrador
  2. usuario, 123, lugares_visitados.0.número_casa, 10, 20, hoy, por administrador
  3. usuario, 123, lugares_visitados.0, { city: 'Jerusalem', street: 'King David', house_number: 20 } , { city: 'Tel Aviv', street: 'Ibn Gabiron', house_number: 30 } , hoy, por administración,
  4. usuario, 123, lugares_visitados.1, indefinido, { city: 'Jerusalem', street: 'King David', house_number: 20 } , hoy, por administrador

He intentado usar la nueva clase Proxy JS incorporada:

 const handler = { get(target, prop) { if (typeof target[prop] === "object" && target[prop] !== null) { handler.prefix += `${prop}.` return new Proxy(target[prop], handler) } return target[prop] }, set(target, prop, newValue) { const oldValue = target[prop] target[prop] = newValue if (oldValue !== newValue) { console.log(oldValue, newValue) } return true } } const proxy = new Proxy(user, handler)

Sin embargo, cuando se utilizan métodos como push , unshift o similares, se complican y el seguimiento se arruina. Además, el estilo "condenado" no se aplica, como "places_visited.0", solo el valor primitivo en su lugar.

¿Cómo se puede lograr esto?

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Básico :

Para aplicaciones más simples, puede establecer puntos de observación en la pestaña Fuentes (parte superior del panel izquierdo) en la ventana DevTools en Chrome (accesible a través de Inspeccionar en el menú del botón derecho), aunque esto tiene la desventaja de tener que mirar los objetos manualmente dentro cierres Eso puede ser lo suficientemente bueno como una verificación rápida para su caso de uso si sabe cuándo y cómo cambia el objeto en el código.


Intermedio:

Si desea realizar un seguimiento más longitudinal de los cambios de objetos (incluidas las mutaciones), un compañero de equipo me presentó recientemente la extensión Redux DevTools para Chrome, FireFox y las subsiguientes bifurcaciones de estos dos navegadores. Como extensión, es una versión más liviana del paquete NPM del mismo nombre que no requiere instalación en su ensamblaje de hilo, etc.

Tenga en cuenta que fue diseñado y es más útil para Redux, pero según la documentación , también es posible usarlo con otros marcos.


Avanzado:

Las capacidades más avanzadas proporcionadas por una instalación completa del paquete redux-devtools brindan acceso a monitores personalizables que se pueden ajustar a una variedad de componentes, lo que le permite orquestar el registro de nivel de depuración dentro de la operación normal de tiempo de ejecución de la aplicación.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda