Eventbussmönstret med stores
Implementera en global eventbuss med en skrivbar store för frikopplad kommunikation.
Eventbussmönstret med stores är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Eventbuss
En eventbuss är en global kanal för publicering och prenumeration som möjliggör lös koppling mellan komponenter.
Implementera med writable
En writable store som innehåller den senaste händelsen fungerar som en enkel eventbuss.
const bus = writable(null);
export function emit(event) { bus.set(event); }
export function on(fn) { return bus.subscribe(e => { if (e) fn(e); }); }Användningsfall
En komponent skickar en toast-händelse. En annan prenumererar och visar toast-meddelanden globalt.
Frikoppling
Avsändaren och mottagaren importerar inte varandra. Båda är beroende av bussen.
Typsäkerhet
Typbestäm händelser som en diskriminerad union för säkra prenumeranter.
type Event = { type: "toast"; text: string } | { type: "logout" };Prenumerera en gång
Omslut prenumerationen med automatisk avprenumeration via $-förkortningen i komponenter.
Flera bussar
Dela upp efter domän: appBus, modalBus och audioBus för att undvika en enda jättestor kanal.
Antimönster
Överanvändning av eventbussar leder till ett implicit dataflöde. Föredra direkta props eller stores där ägarskapet är tydligt.
Återuppspelningssemantik
writable stores innehåller bara det senaste värdet. Använd en array-store för hela händelsehistoriken.
Externa händelser
En eventbuss kan även kapsla in webbläsarhändelser som fönsterstorleksändringar eller tangentbordsgenvägar.
Testning
Tester kan skicka händelser och kontrollera att prenumeranter reagerar på rätt sätt.
Snabb kontroll
Vilken är fördelen med en eventbuss?
Sammanfattning
Bygg en enkel eventbuss med en writable store. Skicka händelser och prenumerera på dem för frikopplad kommunikation mellan olika delar av appen.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Eventbussmönstret med stores” gratis?
Ja – hela texten till ”Eventbussmönstret med stores” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Eventbussmönstret med stores”?
Implementera en global eventbuss med en skrivbar store för frikopplad kommunikation. Ni övar på Sveltejs Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Sveltejs Academy?
Du behöver inga förkunskaper. Utbildningen i Sveltejs Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Eventbussmönstret med stores”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Sveltejs Academy-lektionen?
Ja. Varje Sveltejs Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Store-arkitektur: funktionsmoduler
- Eventbussmönstret med stores
- Optimistiska UI-uppdateringar
- Ångra/gör om med store-historik