使用 事件的跨互動

在某些情況下，多個微型前端可能需要彼此互動，以回應狀態變更或使用者動作。例如，頁面上的多個微型前端可以包含折疊式功能表。當使用者選擇按鈕時，會出現功能表。當使用者按一下其他任何地方時，功能表會隱藏，包括在不同的微型前端內轉譯的另一個功能表。

在技術上，Redux 等共用狀態程式庫可供多個微型前端使用，並由 shell 協調。不過， 會在應用程式之間建立顯著的耦合，導致程式碼難以測試，而且在轉譯期間可能會降低效能。

一種常見的有效方法是開發事件匯流排，該匯流排以程式庫形式分佈，由應用程式 shell 協調，並由多個微型前端使用。以這種方式，每個微型前端都會以非同步方式發佈和接聽特定事件，僅根據自己的內部狀態進行行為。然後，多個團隊可以維護共用的 Wiki 頁面，描述事件並記錄使用者體驗設計人員同意的行為。

在事件匯流排範例的實作中，下拉式清單元件會使用共用匯流排來發佈drop-down-open-menu名為 且承載為 的事件{"id": "homepage-aboutus-button"}。元件會將接聽程式新增至drop-down-open-menu事件，以確保如果針對新 ID 觸發事件，下拉式清單元件會轉譯為隱藏其可摺疊區段。以這種方式，微型前端可以非同步方式對變更做出反應，以提高效能和更好的封裝，讓多個團隊更輕鬆地設計和測試行為。

我們建議您使用現代瀏覽器原生實作的標準 APIs，以提高簡單性和可維護性。MDN 事件參考提供搭配用戶端轉譯應用程式使用事件的相關資訊。