📖 Teorija
Namų darbas — tavo maršrutizatorius
Namų darbas — tavo maršrutizatorius.
- Maršrutų lentelė. Sukurk
js/router.jssuparseRoute,onRoute,navigateirhashchange. Susiek maršrutus su vaizdais (home, gallery, collection, detail). Pridėkhome.jsirdetail.js, jei dar neturi. - „Atgal" nemokamai. Naršai galeriją → nuotraukos detalę → paspaudi naršyklės „Atgal". Turi grįžti į galeriją — nieko papildomai neprogramavęs.
- Gilios nuorodos. Atidaryk
#/apod/<data>naujame skirtuke (be jokių įkeltų duomenų).detail.jsturi pats atsisiųsti tą nuotrauką ir ją parodyti. - URL sinchronizuota paieška.
url-state.jssugetParams/setParams. Ieškai „moon" → URL tampa#/gallery?q=moon; nukopijuok, atidaryk iš naujo → galerija nufiltruota. - Atkurk
replaceStatespąstą. Laikinai pakeisksetParamsįlocation.hash = .... Įvesk „moon", paspausk „Atgal" 4 kartus — trina po raidę. GrąžinkreplaceState— „Atgal" vėl normalus.
Privalomi testai:
- „Atgal" testas: naršyklės „Atgal" pereina per tavo maršrutus.
- Gilios nuorodos testas:
#/apod/<data>iš naujo užsikrauna. - Istorijos testas: su
replaceStatepaieška neužteršia istorijos.
Atsiskaitymui: video: (1) veikiantis „Atgal", (2) dalinama paieškos nuoroda naujame skirtuke, (3) replaceState prieš/po (istorijos spąstas).
Toliau — Part 3. Turi pilną, veikiančią vanilla programą. 15 pamokoje nukreipsim į ją TypeScript — ir jis atmes tikras, jau esančias klaidas (pvz.
pic.hdurl, kurio vaizdo įrašai neturi). Būtent tada atsiras ir įrankiai (Node, npm, Vite) — nes TypeScript be jų negali veikti.