Question

我正在遵循 micro前端体系结构 来创建大型应用程序。假设我将整个应用程序分为5个Micro Apps （micro-app-A（在Vue中），micro-app-B（在Vue中），micro-app-C（在Angular中），micro-app -D（在React中）和一个外壳应用程序My-App-Shell（在Vue中））

我已经使用 pubsub-js 库（使用JavaScript编写的基于主题的发布/订阅库）在微型应用程序中的不同组件之间进行交流。我的每个微型应用程序都完美地使用此pubsub系统在其自己的组件之间进行通信。但是我需要一个通用的pubsub系统（由外壳应用程序管理）才能在不同的微型应用程序之间进行通信。

如何实现？

Answer 1

您可以在CustomEvent上轻松构建一个抽象：

const handlers = {};

window.publish = (topic, message) => {
  var ev = new CustomEvent('pubsub', {
    detail: { topic, message },
  });
  document.body.dispatchEvent(ev);
};

window.subscribe = (topic, handler) => {
  const topicHandlers = handlers[topic] || [];
  topicHandlers.push(handler);
  handlers[topic] = topicHandlers;
};

window.unsubscribe = (topic, handler) => {
  const topicHandlers = handlers[topic] || [];
  const index = topicHandlers.indexOf(handler);
  index >= 0 && topicHandlers.splice(index, 1);
};

document.body.addEventListener('pubsub', ev => {
  const { topic, message } = ev.detail;
  const topicHandlers = handlers[topic] || [];
  topicHandlers.forEach(handler => handler(message));
});

（有关演示，请访问：https://jsfiddle.net/qo5nca71/）

在大多数情况下，这应该足够了。如果您想获得更多的“安全性”（例如，微前端不能更改抽象，这在全局范围内就意味着隐含的含义），我建议您使用更复杂的方法，例如Piral中的事件机制（请参阅{{3} }。

微型前端：用于微型前端的Pubsub系统

1 个答案: