Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.
Interaktive Nutzung von Ereignissen
In einigen Szenarien müssen möglicherweise mehrere Mikrofrontends miteinander interagieren, um auf Statusänderungen oder Benutzeraktionen zu reagieren. Beispielsweise können mehrere Mikrofrontends auf der Seite zusammenklappbare Menüs enthalten. Ein Menü erscheint, wenn der Benutzer eine Schaltfläche auswählt. Das Menü wird ausgeblendet, wenn der Benutzer auf eine andere Stelle klickt, einschließlich eines anderen Menüs, das in einem anderen Mikrofrontend gerendert wird.
Technisch gesehen kann eine gemeinsam genutzte Statusbibliothek wie Redux von mehreren Mikrofrontends verwendet und von einer Shell koordiniert werden. Dies führt jedoch zu einer erheblichen Kopplung zwischen Anwendungen, was dazu führt, dass Code schwieriger zu testen ist und die Leistung beim Rendern beeinträchtigen kann.
Ein gängiger, effektiver Ansatz besteht darin, einen Event-Bus zu entwickeln, der als Bibliothek verteilt, von der Anwendungsshell orchestriert und von mehreren Mikro-Frontends verwendet wird. Auf diese Weise veröffentlicht und überwacht jedes Mikro-Frontend bestimmte Ereignisse asynchron, wobei sein Verhalten nur auf seinem eigenen internen Status basiert. Anschließend können mehrere Teams eine gemeinsame Wiki-Seite verwalten, auf der Ereignisse beschrieben und Verhaltensweisen dokumentiert werden, auf die sich die User Experience Designer geeinigt haben.
In einer Implementierung des Event-Bus-Beispiels verwendet eine Dropdownkomponente den gemeinsam genutzten Bus, um ein Ereignis zu veröffentlichen, das drop-down-open-menu mit einer Nutzlast von aufgerufen wurde. {"id": "homepage-aboutus-button"} Die Komponente fügt dem Ereignis einen Listener hinzu, um sicherzustellen, dass, wenn ein drop-down-open-menu Ereignis für eine neue ID ausgelöst wird, die Dropdownkomponente so gerendert wird, dass ihr zusammenklappbarer Abschnitt ausgeblendet wird. Auf diese Weise kann das Mikro-Frontend asynchron auf Änderungen reagieren, was die Leistung erhöht und die Kapselung verbessert, was es mehreren Teams erleichtert, Verhaltensweisen zu entwerfen und zu testen.
Wir empfehlen die Verwendung von Standards, die von modernen Browsern nativ APIs implementiert werden, um die Einfachheit und Wartbarkeit zu verbessern. Die MDN-Ereignisreferenz
