Tema
/
Interneto svetainių kliento dalies kūrimas JS
📖 Teorija

Namų darbas — tavo maršrutizatorius

Namų darbas — tavo maršrutizatorius.

  1. Maršrutų lentelė. Sukurk js/router.js su parseRoute, onRoute, navigate ir hashchange. Susiek maršrutus su vaizdais (home, gallery, collection, detail). Pridėk home.js ir detail.js, jei dar neturi.
  2. „Atgal" nemokamai. Naršai galeriją → nuotraukos detalę → paspaudi naršyklės „Atgal". Turi grįžti į galeriją — nieko papildomai neprogramavęs.
  3. Gilios nuorodos. Atidaryk #/apod/<data> naujame skirtuke (be jokių įkeltų duomenų). detail.js turi pats atsisiųsti tą nuotrauką ir ją parodyti.
  4. URL sinchronizuota paieška. url-state.js su getParams/setParams. Ieškai „moon" → URL tampa #/gallery?q=moon; nukopijuok, atidaryk iš naujo → galerija nufiltruota.
  5. Atkurk replaceState spąstą. Laikinai pakeisk setParams į location.hash = .... Įvesk „moon", paspausk „Atgal" 4 kartus — trina po raidę. Grąžink replaceState — „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 replaceState paieš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.