前端订阅发布模式轻而易举、用3行代码就行，你绝对没试过！

前端订阅发布模式：用3行代码构建一个订阅发布中心

订阅发布模式是一种消息通信模式，允许不同的对象之间进行通信，而无需它们之间建立直接的依赖关系。在前端开发中，订阅发布模式非常有用，因为它可以帮助我们构建松耦合、易于维护的应用程序。

要实现订阅发布模式，我们需要以下3个步骤：

1. 创建事件中心

事件中心是一个对象，它负责存储订阅者和发布者。当发布者发布消息时，事件中心会将消息发送给所有订阅者。

const eventCenter = {};

2. 订阅消息

要订阅消息，我们需要调用事件中心的subscribe方法。subscribe方法接收两个参数：事件名称和回调函数。当事件名称对应的消息发布时，回调函数就会被调用。

eventCenter.subscribe('message', (data) => {
  console.log(data);
});

3. 发布消息

要发布消息，我们需要调用事件中心的publish方法。publish方法接收两个参数：事件名称和数据。事件名称用于标识要发布的消息，数据是我们要发送的数据。

eventCenter.publish('message', 'Hello, world!');

这就是实现订阅发布模式的全部代码。是不是非常简单？

现在，让我们来看一个具体的例子。假设我们有一个按钮，当按钮被点击时，我们要在控制台输出"Hello, world!"。我们可以使用订阅发布模式来实现这个功能。

首先，我们需要创建一个事件中心。

const eventCenter = {};

然后，我们需要订阅click事件。

eventCenter.subscribe('click', (data) => {
  console.log(data);
});

最后，我们需要在按钮的onclick事件处理程序中发布click事件。

const button = document.getElementById('button');

button.onclick = () => {
  eventCenter.publish('click', 'Hello, world!');
};

这样，当按钮被点击时，"Hello, world!"就会在控制台输出。

以上就是前端订阅发布模式的简单实现。希望这篇文章对你有帮助。