为什么我的 PubSub 模式没有按预期工作答案

【问题标题】：why is my PubSub pattern not working as intended为什么我的 PubSub 模式没有按预期工作
【发布时间】：2022-01-04 05:41:15
【问题描述】：

为什么我的代码不起作用，我有点困惑。

我正在尝试使用以下代码练习 PubSub 设计模式。类实例 displayGreet 订阅了消息函数发布的消息事件。消息函数是附加到按钮的单击事件的处理程序。

目标是让消息函数在单击按钮时向 displayGreet 发送消息，以便将问候语更新到浏览器。

当 displayGreet 和 message 都被编写为函数时，我能够达到预期的结果。但是当 displaygreet 是一个类的实例时，我无法达到同样的效果。

请帮帮我。

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>

【问题讨论】：

标签： javascript class model-view-controller publish-subscribe loose-coupling

【解决方案1】：

您永远不会订阅 PubSub 实例。此外，subscribe() 期待回调，它必须是常规函数。所以你不能说this，因为那是一个类实例。请改用this.greet。

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;
    }
}

【讨论】：

请您澄清一下“您从不订阅 PubSub 实例”是什么意思？我已经完成了您指出的更正，但仍然无法将消息显示到浏览器。谢谢
您订阅了greet()，但从未调用greet()。看起来greet() 应该是 PubSub 所调用的，所以在那里订阅是没有意义的。创建对象时需要订阅。
感谢@Jessie。我将订阅调用移至构造函数并使其工作。但是我仍然无法真正理解工作原理。