微前端原理之通信

在微前端中往往需要实现多对多的双向通信模式，例如微应用之间实现通信，主应用和微应用之间实现通信，因此使用发布 / 订阅模式是一种不错的选择。如果微应用和主应用处于同一个全局执行上下文，那么可以利用 window 变量实现通信，因为 window 实现了 EventTarget 的通信接口，例如常见的 single-spa，它会将应用的生命周期通过 EventTarget （window.dispatchEvent）的形式广播出来，从而可以使得 qiankun 实现监听处理。

// 主应用
window.addEventListener("microChannel", (e) => {
  console.log("main addEventListener: ", e);
 
  window.dispatchEvent(
    new CustomEvent("mainChannel", {
      detail: "main",
    })
  );
});
 
// iframe 子应用1（加载以后立马触发）
window.parent.addEventListener("mainChannel", (e) => {
  console.log("micro1 addEventListener: ", e);
});
 
window.parent.dispatchEvent(
  new CustomEvent("microChannel", {
    detail: "micro1",
  })
);
 
// iframe 子应用2
window.parent.addEventListener("mainChannel", (e) => {
  console.log("micro2 addEventListener: ", e);
});
 
window.parent.dispatchEvent(
  new CustomEvent("microChannel", {
    detail: "micro2",
  })
);
 

如果主子应用存在同源策略问题可使用postMessage解决