小明：最近我在做前端项目，发现不同组件之间通信变得越来越复杂，有没有什么办法可以简化这个问题？

小李：你可以考虑引入一个统一的消息系统。这样各个组件可以通过发布和订阅的方式进行通信，而不是直接耦合。

小明：那这个消息系统怎么实现呢？有没有现成的库或者代码示例？

小李：我们可以用一个简单的事件总线来实现。下面是一个基本的实现代码：

      class EventBus {
        constructor() {
          this.events = {};
        }

        on(event, callback) {
          if (!this.events[event]) {
            this.events[event] = [];
          }
          this.events[event].push(callback);
        }

        emit(event, data) {
          if (this.events[event]) {
            this.events[event].forEach(cb => cb(data));
          }
        }

        off(event, callback) {
          if (this.events[event]) {
            this.events[event] = this.events[event].filter(cb => cb !== callback);
          }
        }
      }

      const bus = new EventBus();

      // 组件A
      bus.on('message', data => {
        console.log('收到消息:', data);
      });

      // 组件B
      bus.emit('message', { text: '你好！' });
    

小明：明白了，这确实能减少组件之间的耦合。那这种设计对前端架构有什么好处呢？

小李：统一消息系统有助于提高系统的可维护性和扩展性。特别是在大型单页应用中，多个模块需要共享状态或事件时，这种方式非常有效。

sso单点登陆

小明：谢谢，我打算在项目中尝试一下。