JavaScript
Özet - History API
pushState ve popstate ile iki sayfalı basit bir SPA yönlendirme uygulaması yazarsın.
Özet - History API
Bu grupta History API'nin temellerini öğrendin: history nesnesi oturum geçmişine erişim sağlar; pushState yeni kayıt ekler ve URL'i değiştirir; replaceState mevcut kaydı günceller; popstate geri veya ileri gezinmede tetiklenir.
history.pushState({path}, '', '/about');
window.addEventListener('popstate', (e) => {
render(e.state.path);
});
Bunları birleştirerek sayfa yenilenmeden çalışan basit bir SPA yönlendirici kurarsın.
Uygulama router fonksiyonu yaz
router(path) adında bir fonksiyon yaz. İçinde history.pushState çağrısı yapsın: ilk parametre { path }, ikinci parametre boş dize, üçüncü parametre path. Sonra render(path) çağrısıyla görünümü güncellesin.
Örnek çözümü göster
function router(path) {
history.pushState({ path }, '', path);
render(path);
}
Hepsini birleştir
Bir SPA yönlendiricinin akışı şöyledir: bağlantı tıklanır, preventDefault ile yeniden yükleme engellenir, pushState ile URL güncellenir ve render ile görünüm değiştirilir. Geri veya ileri sırasında popstate tetiklenir ve event.state'ten yola çıkılarak doğru görünüm çizilir.
function router(path) {
history.pushState({ path }, '', path);
render(path);
}
window.addEventListener('popstate', (e) => {
if (e.state) router(e.state.path);
});
Bu yapı, modern istemci tarafı yönlendirmenin özüdür.
Uygulama popstate ile görünümü geri yükle
window nesnesine 'popstate' dinleyicisi ekle. Dinleyici bir ok fonksiyonu alsın ve event parametresi taşıyan bir fonksiyon olsun. Eğer event.state.path varsa render(event.state.path) çağrısı yapsın; yoksa render('/') çağrısı yapsın.
Örnek çözümü göster
window.addEventListener('popstate', (event) => {
if (event.state && event.state.path) {
render(event.state.path);
} else {
render('/');
}
});
Kendini test et
-
Bir SPA'da geri veya ileri düğmelerini doğru şekilde yöneten kombinasyon hangisidir?
- Yalnızca pushState kullanmak yeterli
- Yalnızca replaceState kullanmak yeterli
- pushState ile görünümleri değiştir ve popstate ile geri veya ileri'yi yakala
- window.onload ile tüm yönlendirmeyi yap
Cevabı göster
pushState ile görünümleri değiştir ve popstate ile geri veya ileri'yi yakala — Doğru! pushState ile yönlendir, popstate ile geri veya ileri'yi yakala.
-
History API özetini eşleştir
- pushState
- yeni kayıt ekler
- replaceState
- mevcut kaydı değiştirir
- popstate
- geri veya ileri olayı
- router
- yönlendirmeyi yönetir
Sıradaki ders: IndexedDB nedir?
