tengo la siguiente situacion:

• Tengo dos componentes Vanilla JS.
• El primer componente, Alpha , puede realizar cambios en una variable de ventana, por ejemplo, window.App.messages .
• El segundo componente, Beta , necesita ejecutar una función dada, pero solo después de window.App.messages haya cambiado.

Tenemos las siguientes restricciones:

• [A] No queremos que los dos componentes se comuniquen entre sí de otra forma que no sea a través de window .
• [B] No queremos que Beta cambie window.App.messages de ninguna manera.
• [C] window.App.messages debe ser independiente con respecto a qué componente se set y get sus datos.

Encontré varios subprocesos de desbordamiento de pila relevantes, pero todos parecen sugerir soluciones que en realidad no funcionan para resolver este caso de uso. Específicamente:

• Utilice Proxy ( ejemplo 1 , ejemplo 2 ). El problema con Proxy es que luego necesita escuchar los cambios en el proxy y no en el objeto original. Esta implementación no funcionaría ya que requeriría que Alpha y Beta se comunicaran directamente. Se rompe [A].
• Sobrescriba setters y getters a través de defineProperty ( ejemplo ). Esta solución requiere que Beta cambie el objeto original y eso no está bien. Rompe tanto [B] como [C].
• Cree el objeto con setters y getters personalizados. Esto tampoco funciona ya que se rompe [C].

Lo que necesitaría es algo como esto:

 var window.App.messages = ["Hello, world!"]; function logChange(variable) { console.log(`New value: ${variable.at(-1)}`) }; var varListener = Listener(window.App.messages, logChange); window.app.messages.push("The answer is 42."); >> New value: The answer is 42.