Brugerdefinerede kommunikationsløsninger
Design og implementér brugerdefinerede kommunikationsmekanismer, der er tilpasset specifikke Micro Frontend-behov.
Brugerdefinerede kommunikationsløsninger er en gratis Mikrofrontendarkitektur med Module Federation-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Mikrofrontendarkitektur med Module Federation, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Mikrofrontendarkitektur med Module Federation-kurset indeholder 4 lektioner i alt.
Ud over standardkommunikation
I mikrofrontend-arkitekturer er kommunikation mellem forskellige dele afgørende. Vi har gennemgået hændelsesbusser og håndtering af delt tilstand.
Nogle gange kan dine specifikke behov dog kræve mere skræddersyede tilgange. Denne lektion handler om at designe og implementere tilpassede kommunikationsløsninger.
Hvorfor tilpassede løsninger?
Hvorfor skulle du vælge en tilpasset løsning frem for et etableret mønster?
- Specifik interaktion: Når der er behov for en meget bestemt, direkte interaktion.
- Ydeevne: For at optimere kommunikation med meget høj frekvens eller lav forsinkelse.
- Minimalt overhead: Til enkle, ad hoc-behov uden at medtage tunge biblioteker.
- Tæt kobling (sjældent): I situationer, hvor to MFE'er med vilje er tæt forbundne og deler en overordnet Context.
Direkte overførsel af callback-funktioner
En tilpasset tilgang består i at sende funktioner (callback-funktioner) direkte fra en værtsapplikation til en fjernapplikation som props eller argumenter. Det egner sig, når en værtskomponent gengiver en fjernkomponent direkte og skal reagere på dens handlinger.
Module Federation giver dig mulighed for at dele funktioner på samme måde som komponenter eller data.
Eksempel: Overførsel af en callback
Forestil dig, at en vært sender en »notify«-funktion til en fjernapplikation, som derefter kalder den. Dette er en forenklet JavaScript-repræsentation:
function hostApp() {
function handleNotification(message) {
console.log(`Host received: ${message}`);
}
// In a real MFE, remote would be loaded
// and `onNotify` passed as a prop.
// For demo, we'll simulate the call.
console.log("Host ready to receive.");
remoteApp(handleNotification);
}
function remoteApp(onNotify) {
console.log("Remote app started.");
setTimeout(() => {
onNotify("Data processed successfully!");
}, 1000);
}
hostApp();Browserens postMessage-API
postMessage-API'et er en effektiv browserfunktion til sikker kommunikation på tværs af oprindelser mellem vinduer, iframes og Web Workers.
Det er ideelt til at sende meddelelser mellem en vært og en indlejret MFE (f.eks. i en iframe), hvor direkte JavaScript-adgang er begrænset på grund af sikkerhedspolitikker.
Eksempel: postMessage (konceptuelt)
Sådan vil en vært og en fjernapplikation (f.eks. i en iframe) konceptuelt bruge postMessage til at kommunikere. Bemærk: Det kræver et browsermiljø for at kunne køre fuldt ud.
// Host (parent window):
// const iframe = document.getElementById('remote-mfe');
// iframe.contentWindow.postMessage('Hello from Host!', 'http://remote.com');
// window.addEventListener('message', (event) => {
// if (event.origin === 'http://remote.com') {
// console.log('Host received:', event.data);
// }
// });
// Remote (inside iframe):
// window.addEventListener('message', (event) => {
// if (event.origin === 'http://host.com') {
// console.log('Remote received:', event.data);
// event.source.postMessage('Hello from Remote!', event.origin);
// }
// });
// This snippet simulates the message flow:
function simulatePostMessage() {
console.log("Simulating postMessage...");
const hostMessage = "Hello from Host!";
const remoteMessage = "Hello from Remote!";
// Host sends to Remote
console.log(`Host sends: "${hostMessage}"`);
// Remote receives and replies
console.log(`Remote receives: "${hostMessage}"`);
console.log(`Remote sends: "${remoteMessage}"`);
// Host receives reply
console.log(`Host receives: "${remoteMessage}"`);
}
simulatePostMessage();Delt globalt register eller delt global tjeneste
Til bestemte, begrænsede globale data eller tjenester kan du oprette et tilpasset JavaScript-objekt eller en klasse og eksponere det via Module Federations delte scope.
Det fungerer som en let, tilpasset singleton, som alle fødererede applikationer kan få adgang til og interagere med uden fuld håndtering af tilstand.
Eksempel: Tilpasset delt register
Her er et enkelt tilpasset registerobjekt, som kan deles. Hver MFE kan importere og bruge mySharedRegistry.
// mySharedRegistry.js (exposed via Module Federation)
const mySharedRegistry = {
_data: {},
set: function(key, value) {
this._data[key] = value;
console.log(`Registry updated: ${key} = ${value}`);
},
get: function(key) {
return this._data[key];
},
getAll: function() {
return { ...this._data };
}
};
// Simulate usage in different MFEs
console.log("--- MFE A ---");
mySharedRegistry.set("userTheme", "dark");
console.log("--- MFE B ---");
console.log(`Current user theme: ${mySharedRegistry.get("userTheme")}`);
mySharedRegistry.set("appVersion", "1.0.1");
console.log("--- MFE A (again) ---");
console.log(`Current app version: ${mySharedRegistry.get("appVersion")}`);
Overvejelser og afvejninger
Selvom tilpassede løsninger giver fleksibilitet, medfører de nogle afvejninger:
- Øget kobling: Kan gøre MFE'er mindre uafhængige.
- Kompleksitet: Sværere at vedligeholde og fejlfinde end standardmønstre.
- Skalerbarhed: Skalerer muligvis ikke godt, hvis kommunikationsbehovene vokser.
- Sikkerhed: `postMessage` kræver omhyggelig validering af oprindelsen.
Afvej altid fordelene mod disse potentielle ulemper.
Kontrol af tilpasset kommunikation
Du implementerer en mikrofrontend-arkitektur. Én MFE er indlejret i en iframe på et andet domæne. Du skal sende enkle meddelelser sikkert mellem værten og iframen.
Opsummering: Tilpassede løsninger
Vi har gennemgået tilpassede kommunikationsløsninger til mikrofrontends, der går videre end hændelsesbusser og delt tilstand.
- Direkte callbacks: Til tæt koblede komponenter.
postMessage-API: Til sikker kommunikation på tværs af oprindelser, især med iframes.- Delte registre: Til lette, tilpassede globale data eller tjenester.
Husk nøje at overveje afvejningerne ved øget kobling og kompleksitet, før du vælger en tilpasset tilgang.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 12
- Lektioner
- 48
Ofte stillede spørgsmål
Er lektionen “Brugerdefinerede kommunikationsløsninger” gratis?
Ja — hele teksten til “Brugerdefinerede kommunikationsløsninger” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Mikrofrontendarkitektur med Module Federation-kurset, skal du opgradere til CoddyKit PRO. Mikrofrontendarkitektur med Module Federation-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Brugerdefinerede kommunikationsløsninger”?
Design og implementér brugerdefinerede kommunikationsmekanismer, der er tilpasset specifikke Micro Frontend-behov. Du øver dig i Mikrofrontendarkitektur med Module Federation med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Mikrofrontendarkitektur med Module Federation?
Der kræves ingen tidligere erfaring. Mikrofrontendarkitektur med Module Federation på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Brugerdefinerede kommunikationsløsninger”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Mikrofrontendarkitektur med Module Federation-lektion?
Ja. Alle Mikrofrontendarkitektur med Module Federation-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Event bus til kommunikation på tværs af apps
- Håndtering af delt tilstand
- Brugerdefinerede kommunikationsløsninger
- Kommunikation med brugerdefinerede DOM-hændelser