Event bus-mønstret med stores
Implementér en global event bus ved hjælp af en writable store til afkoblet kommunikation.
Event bus-mønstret med stores er en gratis Sveltejs Academy-lektion på CoddyKit. Dette er lektion 2 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 Sveltejs Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Sveltejs Academy-kurset indeholder 4 lektioner i alt.
Eventbus
En eventbus er en global publicerings-/abonneringskanal til afkoblet kommunikation.
Implementér med writable
En writable store, der indeholder den seneste hændelse, fungerer som en simpel bus.
const bus = writable(null);
export function emit(event) { bus.set(event); }
export function on(fn) { return bus.subscribe(e => { if (e) fn(e); }); }Anvendelse
Én komponent udsender en toast-hændelse, mens en anden abonnerer og viser toast-beskeder globalt.
Afkobling
Afsenderen og modtageren importerer ikke hinanden; begge afhænger af bussen.
Typesikkerhed
Typificér hændelser som en diskrimineret union, så abonnenterne bliver typesikre.
type Event = { type: "toast"; text: string } | { type: "logout" };Abonnér én gang
Pak det ind med automatisk afmelding via $-forkortelsen i komponenter.
Flere busser
Opdel efter domæne: appBus, modalBus og audioBus, så du undgår én enorm kanal.
Antimønster
Overdreven brug af eventbusser fører til et implicit dataflow. Foretræk direkte props/stores, når ejerskabet er tydeligt.
Semantik for afspilning
writable stores indeholder kun den seneste værdi. Brug en array-store til hele hændelseshistorikken.
Eksterne hændelser
En eventbus kan også pakke browserhændelser som ændringer af vinduets størrelse eller tastaturgenveje ind.
Test
Test kan udsende hændelser og kontrollere, at abonnenterne reagerer korrekt.
Hurtigt tjek
Hvad er fordelen ved en eventbus?
Opsummering
Byg en simpel eventbus med en writable store. Udsend hændelser, og abonnér på dem for afkoblet kommunikation på tværs af funktioner.
Lær HTML 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
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Event bus-mønstret med stores” gratis?
Ja — hele teksten til “Event bus-mønstret med stores” 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 Sveltejs Academy-kurset, skal du opgradere til CoddyKit PRO. Sveltejs Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Event bus-mønstret med stores”?
Implementér en global event bus ved hjælp af en writable store til afkoblet kommunikation. Du øver dig i Sveltejs Academy 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å Sveltejs Academy?
Der kræves ingen tidligere erfaring. Sveltejs Academy 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 2 af 4.
Hvor lang tid tager lektionen “Event bus-mønstret med stores”?
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 Sveltejs Academy-lektion?
Ja. Alle Sveltejs Academy-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
- Store-arkitektur: Feature-moduler
- Event bus-mønstret med stores
- Optimistiske UI-opdateringer
- Fortryd/gentag med store-historik