Sveltejs Academy · Ders

Store Geçmişiyle Geri Alma/Yineleme

Geri alma ve yinelemeyi desteklemek için yazılabilir bir store çevresinde geçmiş yığını oluşturun.

4. ders / 413 adım

Store Geçmişiyle Geri Alma/Yineleme, CoddyKit'te ücretsiz bir Sveltejs Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Sveltejs Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Sveltejs Academy kursu toplamda 4 dersten oluşur.

Geçmiş Yığını

Geri alma/ileri alma desteği sağlamak için yazılabilir bir depoyu past/present/future dizileriyle sarın.

Temel Uygulama

Önceki state'lerin listesini tutun.

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()); } }
  };
}

Yığın Boyutunu Sınırlama

Bellek kullanımını sınırlamak için geçmiş uzunluğuna üst sınır koyun.

Derin Kopyalar

Değişiklik sorunlarını önlemek için nesnelerin derin kopyalarını push edin.

Klavye Kısayolları

Yerel bir kullanım hissi için Ctrl+Z ve Ctrl+Shift+Z tuşlarını geri alma/ileri alma işlemlerine bağlayın.

Geçmişi Kalıcılaştırma

Oturumlar arasında geri almayı desteklemek için localStorage'a kaydedin; boyuta dikkat edin.

Performans

Büyük state'lerde tam anlık görüntüler yerine farkları saklayın.

Dallanma

Çoğu uygulama yeni bir eylemde future'ı temizler; bazı editor'ler dallanan bir geçmişi korur.

Kütüphane Seçenekleri

svelte-undo gibi kütüphaneler kullanıma hazır geçmiş depoları sağlar.

Kullanıcı Arayüzü İpuçları

Geri alınacak veya ileri alınacak hiçbir şey olmadığında geri alma/ileri alma düğmelerini devre dışı bırakın.

Sınama

Doğru geri almayı sağlamak için eylem + geri alma/ileri alma dizilerini sınayın.

Hızlı Kontrol

future yığını ne işe yarar?

Özet

Yazılabilir bir deponun çevresinde past/present/future yığınları kullanarak geri alma/ileri alma işlemlerini uygulayın. Boyuta üst sınır koyun ve kısayolları bağlayın.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar
41
Dersler
163

Sıkça Sorulan Sorular

“Store Geçmişiyle Geri Alma/Yineleme” dersi ücretsiz mi?

Evet — “Store Geçmişiyle Geri Alma/Yineleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Sveltejs Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Sveltejs Academy kursu toplamda 4 dersten oluşur.

“Store Geçmişiyle Geri Alma/Yineleme” dersinde ne öğreneceğim?

Geri alma ve yinelemeyi desteklemek için yazılabilir bir store çevresinde geçmiş yığını oluşturun. Sveltejs Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Sveltejs Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Sveltejs Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Store Geçmişiyle Geri Alma/Yineleme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Sveltejs Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Sveltejs Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Store Mimarisi: Özellik Modülleri
  2. Store'larla Olay Veri Yolu Deseni
  3. İyimser Arayüz Güncellemeleri
  4. Store Geçmişiyle Geri Alma/Yineleme
← Sveltejs Academy Sayfasına Dön