Sveltejs Academy · Lektion

Ångra/gör om med store-historik

Bygg en historikstack kring en skrivbar store för att stödja ångra och gör om.

Lektion 4 av 413 steg

Ångra/gör om med store-historik är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 4 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.

Historikstack

Omslut en writable store med arrayer för tidigare, aktuellt och framtida tillstånd för att stödja ångra/gör om.

Grundläggande implementation

Underhåll en lista över tidigare tillstånd.

function createHistory(initial) {
  let past = [], future = [];
  const state = writable(initial);
  return {
    subscribe: state.subscribe,
    set(v) { past.push(get(state)); future = []; state.set(v); },
    undo() { if (past.length) { future.push(get(state)); state.set(past.pop()); } },
    redo() { if (future.length) { past.push(get(state)); state.set(future.pop()); } }
  };
}

Begränsa stackens storlek

Begränsa historikens längd för att hålla minnesanvändningen inom rimliga gränser.

Djupa kopior

Lägg in djupa kopior av objekt för att undvika problem med mutationer.

Tangentbordsgenvägar

Koppla Ctrl+Z och Ctrl+Shift+Z till ångra/gör om för en inbyggd känsla.

Spara historik

Spara i localStorage för att kunna ångra mellan sessioner, men var uppmärksam på storleken.

Prestanda

För stora tillstånd sparar du diffar i stället för fullständiga ögonblicksbilder.

Förgreningar

De flesta appar rensar framtiden vid en ny åtgärd. Vissa redigerare behåller en förgrenad historik.

Biblioteksalternativ

Bibliotek som svelte-undo tillhandahåller färdiga historik-stores.

Ledtrådar i gränssnittet

Inaktivera knapparna för ångra/gör om när det inte finns något att ångra eller göra om.

Testning

Testa sekvenser av åtgärder samt ångra/gör om för att säkerställa korrekt återställning.

Snabb kontroll

Vad används framtidsstacken till?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Implementera ångra/gör om med stackar för tidigare, aktuellt och framtida tillstånd runt en writable store. Begränsa storleken och koppla tangentbordsgenvägar.

Gratis att börja

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

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Ångra/gör om med store-historik” gratis?

Ja – hela texten till ”Ångra/gör om med store-historik” 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 ”Ångra/gör om med store-historik”?

Bygg en historikstack kring en skrivbar store för att stödja ångra och gör om. 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 4 av 4.

Hur lång tid tar lektionen ”Ångra/gör om med store-historik”?

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

← Tillbaka till Sveltejs Academy