Por favor, estoy un poco confundido por qué mi código no funciona.
Estoy tratando de practicar el patrón de diseño de PubSub usando el siguiente código. La instancia de clase displayGreet está suscrita al evento enviado publicado por la función de mensajes. La función de mensaje es el controlador del evento de clic adjunto al botón.
El objetivo es hacer que la función de mensaje envíe un mensaje a displayGreet cuando se hace clic en el botón para que el saludo se actualice en el navegador.
Pude lograr el resultado deseado cuando tanto displayGreet como el mensaje se escribieron como funciones. Pero no puedo lograr lo mismo cuando displaygreet es una instancia de una clase.
Por favor, ayúdame.
class Pubsub { constructor() { this.subscribers = {}; } subscribe(event, callback) { if (!this.subscribers[event]) { this.subscribers[event] = []; } this.subscribers[event].push(callback); } publisher(event, data) { if (!this.subscribers[event]) { return; } this.subscribers[event].forEach((callback) => { callback(data); }); } } const pubsub = new Pubsub(); class Sub { constructor(pubsub) { this.pubsub = pubsub; } greet(greeting) { console.log(greeting); const paragraph = document.querySelector('.show') paragraph.textContent = greeting; this.pubsub.subscribe("greeted", greeting); } } const displayGreet = new Sub(pubsub); function morning() { const greeting = "good morning"; pubsub.publisher("greeted", greeting); return greeting; } const button = document.querySelector('.submit') button.addEventListener('click', morning) <!DOCTYPE html> <html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> </head> <body> <div id="app"> <p class="show"></p> <button class="submit">submit</button> </div> <script src="src/index.js"> </script> </body> </html>Nunca te suscribes a la instancia de PubSub. Además, subscribe() espera una devolución de llamada, que debe ser una función normal. Entonces no puedes decir this ya que es una instancia de clase. Use this.greet en su lugar.
class Sub { constructor(pubsub) { this.pubsub = pubsub; // Subscribe and call `this.greet` this.pubsub.subscribe("greeted", this.greet); } greet(greeting) { console.log(greeting); const paragraph = document.querySelector('.show') paragraph.textContent = greeting; } }