History

localizeflow[bot] 29493713ca chore(i18n): sync translations with latest source changes (chunk 1/1, 291 changes)		7 months ago
..
README.md	chore(i18n): sync translations with latest source changes (chunk 1/1, 291 changes)	7 months ago
assignment.md	chore(i18n): sync translations with latest source changes (chunk 1/1, 291 changes)	7 months ago

README.md

Unescape Escape

Sukurkite bankinę programėlę 1 dalis: HTML šablonai ir maršrutai žiniatinklio programoje

journey
    title Jūsų bankininkystės programėlės kūrimo kelionė
    section Vieno puslapio programėlių pagrindai
      Suprasti vieno puslapio programėles: 3: Student
      Išmokti šablonų koncepcijas: 4: Student
      Įvaldyti DOM manipuliaciją: 4: Student
    section Maršrutizavimo sistemos
      Įgyvendinti kliento pusės maršrutizavimą: 4: Student
      Tvarkyti naršyklės istoriją: 5: Student
      Kurti navigacijos sistemas: 5: Student
    section Profesinės praktikos
      Kurti modulinę architektūrą: 5: Student
      Taikyti geriausias praktikas: 5: Student
      Kurti naudotojo patirtis: 5: Student

Kai Apollo 11 navigacijos kompiuteris 1969 m. nuskrido į mėnulį, jam reikėjo pereiti tarp skirtingų programų neperkraunant visos sistemos. Šiuolaikinės žiniatinklio programos veikia panašiai – jos keičia tai, ką matote, nenaudodamos visko perkrovimo iš naujo. Tai sukuria sklandžią ir jautrią vartotojų patirtį, kurios tikimasi šiandien.

Skirtingai nuo tradicinių svetainių, kurios kiekvieno veiksmo metu perkrauna visus puslapius, modernios žiniatinklio programos atnaujina tik tuos skyrius, kurie turi keistis. Šis požiūris, panašiai kaip misijos valdymo centras, kuris pereina tarp skirtingų rodinių išlaikydamas nuolatinį ryšį, sukuria tą sklandžią patirtį, kurios tikimės.

Štai kas šį skirtumą daro toks drastiškas:

Tradicinės kelių puslapių programos	Šiuolaikinės vieno puslapio programos
Navigacija	Kiekvienam ekranui įkeliama visa puslapio dalis
Veikimo greitis	Lėtesnis dėl pilnų HTML atsisiuntimų
Vartotojo patirtis	Ryškūs puslapio perkrovimai
Duomenų dalijimasis	Sudėtingas tarp puslapių
Kūrimas	Reikia daug HTML failų

Evoliucijos supratimas:

Tradiciinės programos reikalauja serverio užklausų kiekvienai navigacijos veiklai
Modernios vieno puslapio programos (SPA) įkelia kartą ir dinamiškai atnaujina turinį naudojant JavaScript
Vartotojai dabar tikisi greitų ir sklandžių sąveikų
Veiklos pranašumai apima sumažintą pralaidumą ir greitesnį reagavimą

Šioje pamokoje kursime bankinę programėlę su keliomis ekrano dalimis, kurios veikia kartu sklandžiai. Panašiai kaip mokslininkai naudoja moduliarius instrumentus, kuriuos galima keisti eksperimentams, mes naudosime HTML šablonus kaip pakartotinai naudojamus komponentus rodymui pagal poreikį.

Jūs dirbsite su HTML šablonais (pakartotinai naudojamomis ekrano dalimis), JavaScript maršrutizacija (sistema, kuri pereina tarp ekranų) ir naršyklės istorijos API (kuris palaiko „atgal“ mygtuko veikimą kaip įprasta). Tai yra tos pačios pagrindinės technikos, kurias naudoja tokie karkasai kaip React, Vue ir Angular.

Pamokos pabaigoje turėsite veikiančią bankinę programėlę, kuri demonstruos profesionalius vieno puslapio programų principus.

mindmap
  root((Vieno puslapio programos))
    Architecture
      Template System
      Client-side Routing
      State Management
      Event Handling
    Templates
      Pakartotiniai komponentai
      Dinaminis turinys
      DOM manipuliavimas
      Turinys keitimas
    Routing
      URL valdymas
      Istorijos API
      Navigacijos logika
      Naršyklės integracija
    User Experience
      Greita navigacija
      Sklandūs perėjimai
      Nuosekli būsena
      Šiuolaikinės sąveikos
    Performance
      Sumažinti serverio užklausas
      Greitesni puslapio perėjimai
      Efektyvus išteklių naudojimas
      Geresnis reagavimas

Išankstinis testas prieš paskaitą

Ko reikės

Reikės vietinio žiniatinklio serverio, kad galėtume išbandyti bankinę programėlę – nesijaudinkite, tai lengviau nei atrodo! Jei jo dar neturite, tiesiog įsidiekite Node.js ir paleiskite npx lite-server savo projekto aplanke. Ši patogi komanda paleidžia vietinį serverį ir automatiškai atidaro programėlę naršyklėje.

Paruošimas

Savo kompiuteryje sukurkite aplanką pavadinimu bank su failu index.html viduje. Pradėsime nuo šio HTML boilerplate:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bank App</title>
  </head>
  <body>
    <!-- This is where you'll work -->
  </body>
</html>

Štai ką suteikia šis boilerplate:

Nustato HTML5 dokumento struktūrą su tinkamu DOCTYPE deklaravimu
Nustato simbolių kodavimą kaip UTF-8, užtikrinant pasaulinį tekstų palaikymą
Įgalina reaguojančio dizaino palaikymą naudojant viewport meta žymę mobiliesiems įrenginiams
Nustato aprašomą puslapio pavadinimą, kuris matomas naršyklės skirtuke
Sukuria švarų body skyrių, kuriame statysime mūsų programėlę

📁 Projekto struktūros peržiūra

Pamokos pabaigoje jūsų projektas turės:
bank/
├── index.html      
├── app.js          
└── style.css       
Failų atsakomybės:

index.html: Apima visus šablonus ir suteikia programėlės struktūrą

app.js: Tvarko maršrutizaciją, navigaciją ir šablonų valdymą

Šablonai: Apibrėžia vartotojo sąsają prisijungimui, informacijos suvestinei ir kitiems ekranams

HTML Šablonai

Šablonai sprendžia pagrindinę problemą žiniatinklio kūrime. Kai Gutenbergas 1440-aisiais išrado judamąjį raidžių spausdinimą, jis suprato, kad vietoj visų puslapių išraižymo jis gali kurti pakartotinai naudojamus raidžių blokus ir komponuoti juos pagal poreikį. HTML šablonai veikia pagal tą patį principą – vietoj atskirų HTML failų kiekvienam ekranui, jūs apibrėžiate pakartotinai naudojamas struktūras, kurios gali būti rodoma pagal poreikį.

flowchart TD
    A["📋 Šablono apibrėžimas"] --> B["💬 Paslėpta DOM"]
    B --> C["🔍 JavaScript randa šabloną"]
    C --> D["📋 Nukopijuoti šablono turinį"]
    D --> E["🔗 Prijungti prie matomo DOM"]
    E --> F["👁️ Vartotojas mato turinį"]
    
    G["Prisijungimo šablonas"] --> A
    H["Prietaisų skydelio šablonas"] --> A
    I["Būsimi šablonai"] --> A
    
    style A fill:#e3f2fd
    style D fill:#e8f5e8
    style F fill:#fff3e0
    style B fill:#f3e5f5

Galvokite apie šablonus kaip planus skirtingoms jūsų programėlės dalims. Kaip architektas sukūręs vieną planą, kurį naudoja kelis kartus, o ne piešia kiekvieną identišką kambarį, mes sukuriame šablonus vieną kartą ir panaudojame pagal poreikį. Naršyklė laiko šiuos šablonus paslėptus, kol JavaScript juos aktyvuoja.

Jei norite sukurti kelis tinklapio ekranus, viena išeitis būtų sukurti vieną HTML failą kiekvienam rodiniui. Tačiau tai turi tam tikrų nepatogumų:

Reikia pilnai įkelti visą HTML perrašant ekraną, kas gali būti lėta.
Sudėtinga dalintis duomenimis tarp skirtingų ekranų.

Kita išeitis – turėti tik vieną HTML failą ir apibrėžti kelis HTML šablonus naudojant <template> elementą. Šablonas yra pakartotinai naudojamas HTML blokas, kurio naršyklė nerodo, jis turi būti instancijuojamas vykdymo metu naudojant JavaScript.

Pradėkime kurti

Kursime banko programėlę su dviem pagrindiniais ekranais: prisijungimo puslapiu ir informacijos suvestine. Pirmiausia pridėsime į HTML body vietos rezervavimo elementą – čia bus rodomi visi mūsų ekranai:

<div id="app">Loading...</div>

Apibūdinimas apie šį vietos rezervavimą:

Sukuria konteinerį su ID „app“, kuriame bus rodomi visi ekranai
Rodo įkėlimo pranešimą, kol JavaScript inicializuoja pirmą ekraną
Siūlo vieną tvirtinimo tašką dinamiškam turiniui
Įgalina lengvą paiešką naudojant document.getElementById()

💡 Profesionalus patarimas: Kadangi šio elemento turinys bus keičiama, galima čia įdėti įkėlimo pranešimą arba indikatorius, kurie rodys, kol programėlė kraunasi.

Toliau pridėsime žemiau HTML šabloną prisijungimo puslapiui. Šiuo metu jame bus tik pavadinimas ir skyrius su nuoroda, kuria naudositės navigacijai atlikti.

<template id="login">
  <h1>Bank App</h1>
  <section>
    <a href="/dashboard">Login</a>
  </section>
</template>

Šio prisijungimo šablono paaiškinimas:

Apibrėžia šabloną su unikaliu identifikatoriumi „login“ JavaScript taikymui
Įtraukia pagrindinį antraštės elementą, kuris nustato programėlės ženklą
Turi semantinį <section> elementą, kuris grupuoja susijusį turinį
Pateikia navigacijos nuorodą, kuri nukreips vartotojus į informacijos suvestinę

Tada pridėsime kitą HTML šabloną informacijos suvestinės puslapiui. Šis puslapis turės kelis skyrius:

Antraštę su pavadinimu ir atsijungimo nuoroda
Dabartinę banko sąskaitos balansą
Operacijų sąrašą, pateiktą lentelėje

<template id="dashboard">
  <header>
    <h1>Bank App</h1>
    <a href="/login">Logout</a>
  </header>
  <section>
    Balance: 100$
  </section>
  <section>
    <h2>Transactions</h2>
    <table>
      <thead>
        <tr>
          <th>Date</th>
          <th>Object</th>
          <th>Amount</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </section>
</template>

Supraskime kiekvieną šios suvestinės dalį:

Struktūruoja puslapį su semantiniu <header> elementu, kuriame yra navigacija
Rodo programėlės pavadinimą visuose ekranuose dėl jo ženklinimo
Pateikia atsijungimo nuorodą, kuri nukreipia atgal į prisijungimo ekraną
Rodo dabartinę sąskaitos balansą atskirame skyriuje
Organizuoja operacijų duomenis naudojant tinkamai struktūruotą HTML lentelę
Apibrėžia lentelės antraštes datai, objektui ir sumai
Palieka lentelės kūną tuščią dinamiškai informacijai įterpti vėliau

💡 Profesionalus patarimas: Kai kuriate HTML šablonus, jei norite pamatyti, kaip tai atrodys, galite „iškomentuoti“ <template> ir </template> eilutes įrašydami jas tarp .

🔄 Pedagoginė patikra

Šablonų sistemos supratimas: Prieš pradedant naudoti JavaScript, įsitikinkite, kad suprantate:

✅ Kaip šablonai skiriasi nuo įprastų HTML elementų
✅ Kodėl šablonai lieka paslėpti, kol juos neaktyvina JavaScript
✅ Semantinės HTML struktūros svarbą šablonuose
✅ Kaip šablonai leidžia kurti pakartotinai naudojamus UI komponentus

Greitas savitikris: Kas nutinka, jei pašalinsite <template> žymes iš savo HTML? Atsakymas: Turinys iškart tampa matomas ir praranda šablono funkcionalumą

Architektūros privalumai: Šablonai suteikia:

Pakartotinį naudojimą: Vienas apibrėžimas, daug instancijų
Veikimo greitį: Nėra bereikalingo HTML analizavimo
Priežiūrą: Centralizuota vartotojo sąsajos struktūra
Lankstumą: Dinamiškas turinio keitimas

✅ Kodėl, jūsų nuomone, naudojame id atributus šablonuose? Ar galėtume naudoti ką nors kitą, pavyzdžiui klases?

Šablonų įgyvendinimas su JavaScript

Dabar turime šablonus paversti funkcionaliais. Kaip 3D spausdintuvas paima skaitmeninį planą ir kuria fizinį objektą, taip JavaScript paima mūsų paslėptus šablonus ir sukuria matomus, interaktyvius elementus, kuriuos gali matyti ir naudoti vartotojai.

Procesas susideda iš trijų nuoseklių žingsnių, kurie sudaro moderniojo žiniatinklio kūrimo pagrindą. Kai suprasite šį modelį, jį atpažinsite daugelyje karkasų ir bibliotekų.

Jei savo dabartinį HTML failą paleisite naršyklėje, pamatysite, kad jis užstringa rodydamas Loading.... Tai todėl, kad turime pridėti šiek tiek JavaScript kodo, kad instancijuotume ir parodytume HTML šablonus.

Paprastai šablono instancijavimas vyksta per 3 žingsnius:

Gauti šablono elementą DOM'e, pvz., naudojant document.getElementById.
Nukopijuoti šablono elementą, naudojant cloneNode.
Pridėti jį prie DOM matomo elemento, pvz., naudojant appendChild.

flowchart TD
    A[🔍 1 žingsnis: Rasti šabloną] --> B[📋 2 žingsnis: Nukopijuoti šabloną]
    B --> C[🔗 3 žingsnis: Prijungti prie DOM]
    
    A1["document.getElementById('login')"] --> A
    B1["template.content.cloneNode(true)"] --> B  
    C1["app.appendChild(view)"] --> C
    
    C --> D[👁️ Šablonas matomas vartotojui]
    
    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style C fill:#e8f5e8
    style D fill:#fff3e0

Vizualus proceso paaiškinimas:

Žingsnis 1 suranda paslėptą šabloną DOM struktūroje
Žingsnis 2 sukuria veikiančią kopiją, kurią galima saugiai keisti
Žingsnis 3 įterpia kopiją į matomą puslapio plotą
Rezultatas yra funkcinis ekranas, su kuriuo vartotojai gali sąveikauti

✅ Kodėl reikia kopijuoti šabloną prieš jį pridedant į DOM? Ką, jūsų nuomone, nutiktų, jei praleistume šį žingsnį?

Užduotis

Sukurkite naują failą app.js savo projekto aplanke ir importuokite jį <head> skiltyje savo HTML dokumente:

<script src="app.js" defer></script>

Apie šį skripto importavimą:

Sujungia JavaScript failą su mūsų HTML dokumentu
Naudoja atributą defer, kad skriptas būtų vykdomas po to, kai HTML parsinimas baigtas
Įgalina prieigą prie visų DOM elementų, nes jie visi užkrauti prieš skripto vykdymą
Laikosi šiuolaikinių geriausių praktikų skriptų įkrovimui ir veikimui

Dabar app.js sukursime naują funkciją updateRoute:

function updateRoute(templateId) {
  const template = document.getElementById(templateId);
  const view = template.content.cloneNode(true);
  const app = document.getElementById('app');
  app.innerHTML = '';
  app.appendChild(view);
}

Žingsnis po žingsnio, vyksta štai kas:

Suranda šablono elementą pagal jo unikalų ID
Sukuria gilų šablono turinio kopiją naudodamas cloneNode(true)
Randa programėlės konteinerį, kuriame bus rodoma informacija
Išvalo visą esamą programėlės konteinerio turinį
Įterpia nukopijuotą šablono turinį į matomą DOM sritį

Iškvieskite šią funkciją su bet kuriuo šablono ID ir pažiūrėkite rezultatą.

updateRoute('login');

Šio funkcijos kvietimo nauda:

Aktyvuoja prisijungimo šabloną perduodant jo ID kaip parametrą
Demonstruoja kaip programiškai jungtis tarp skirtingų programėlės ekranų
Rodo prisijungimo ekraną vietoje „Loading...“ žinutės

✅ Koks šio kodo app.innerHTML = ''; paskirtis? Kas nutiktų be jo?

Maršrutų kūrimas

Maršrutizacija iš esmės reiškia URL sujungimą su tinkamu turiniu. Palyginkite su ankstyvaisiais telefonų operatoriais, kurie naudodavo jungiamuosius panelius, kad sujungtų skambučius – jie gautą užklausą nukreipdavo į teisingą adresatą. Žiniatinklio maršrutizacija veikia taip pat, gaunant URL užklausą ir nusprendžiant, kokį turinį rodyti.

flowchart LR
    A["🌐 URL kelias<br/>/dashboard"] --> B["🗺️ Maršrutų objektas<br/>Paieška"]
    B --> C["🎯 Šablono ID<br/>'dashboard'"]
    C --> D["📌 Rasti šabloną<br/>getElementById"]
    D --> E["👁️ Rodyti ekraną<br/>Klonuoti ir pridėti"]
    
    F["📍 /login"] --> G["🎯 'login'"]
    H["📍 /unknown"] --> I["❌ Nerasta"]
    I --> J["🔄 Peradresuoti į /login"]
    
    style B fill:#e3f2fd
    style E fill:#e8f5e8
    style I fill:#ffebee
    style J fill:#fff3e0

Tradiciškai, žiniatinklio serveriai tai darė pateikdami skirtingus HTML failus skirtingiems URL. Kadangi mes kuriame vieno puslapio programą, turime patys valdyti maršrutizaciją su JavaScript. Šis požiūris suteikia daugiau kontrolės vartotojo patirčiai ir veikimui.

flowchart LR
    A["🌐 URL Kelias<br/>/dashboard"] --> B["🗺️ Maršrutų Objektas<br/>Paieška"]
    B --> C["🎯 Šablono ID<br/>'dashboard'"]
    C --> D["📄 Rasti Šabloną<br/>getElementById"]
    D --> E["👁️ Rodyti Ekraną<br/>Klonuoti ir Pridėti"]
    
    F["📍 /login"] --> G["🎯 'login'"]
    H["📍 /unknown"] --> I["❌ Nerasta"]
    I --> J["🔄 Peradresuoti į /login"]
    
    style B fill:#e3f2fd
    style E fill:#e8f5e8
    style I fill:#ffebee
    style J fill:#fff3e0

Maršrutizacijos srauto supratimas:

URL pasikeitimai sukelia užklausą mūsų maršrutų konfigūracijoje
Galiojantys maršrutai susieja su specifiniais šablono ID rodymui
Negaliojantys maršrutai sukelia atsarginį elgesį, kad būtų išvengta nesklandumų
Šablonų rodymas vyksta pagal anksčiau mokytą trijų žingsnių procesą

Kalbant apie žiniatinklio programą, maršrutizacija reiškia ketinimą sujungti URL su specifiniais ekranais, kurie turi būti rodomi. Svetainėje su daug HTML failų, tai vyksta automatiškai pagal failų kelius URL. Pavyzdžiui, turint tokius failus projekto aplanke:

mywebsite/index.html
mywebsite/login.html
mywebsite/admin/index.html

Jei sukursite žiniatinklio serverį, kur mywebsite bus šaknis, URL žemėlapis bus:

https://site.com            --> mywebsite/index.html
https://site.com/login.html --> mywebsite/login.html
https://site.com/admin/     --> mywebsite/admin/index.html

Tačiau mūsų žiniatinklio programa naudoja vieną HTML failą su visais ekranais, todėl šis numatytasis elgesys mums nepadės. Turime rankiniu būdu sukurti šį žemėlapį ir atnaujinti rodomą šabloną naudojant JavaScript.

Užduotis

Naudosime paprastą objektą, kad įgyvendintume žemėlapį tarp URL kelių ir mūsų šablonų. Pridėkite šį objektą viršuje savo app.js faile.

const routes = {
  '/login': { templateId: 'login' },
  '/dashboard': { templateId: 'dashboard' },
};

Šios maršrutų konfigūracijos supratimas:

Apibrėžia susiejimą tarp URL kelių ir šablonų identifikatorių
Naudoja objekto sintaksę, kur raktai yra URL keliai, o reikšmės – šablono informacija
Leidžia lengvai surasti, kurį šabloną rodyti pagal bet kurį URL
Suteikia plečiamą struktūrą naujų maršrutų pridėjimui ateityje Dabar šiek tiek pakeiskime updateRoute funkciją. Vietoj to, kad tiesiogiai perduotume templateId kaip argumentą, norime jį gauti pirmiausia pažvelgę į esamą URL, o tada naudodami mūsų žemėlapį gauti atitinkamą šablono ID reikšmę. Galime naudoti window.location.pathname, kad gautume tik URL kelio dalį.

function updateRoute() {
  const path = window.location.pathname;
  const route = routes[path];

  const template = document.getElementById(route.templateId);
  const view = template.content.cloneNode(true);
  const app = document.getElementById('app');
  app.innerHTML = '';
  app.appendChild(view);
}

Išskaidymas, kas čia vyksta:

Ištraukia esamą kelią iš naršyklės URL naudodamas window.location.pathname
Ieško atitinkamos maršruto konfigūracijos mūsų routes objekte
Gauk šablono ID iš maršruto konfigūracijos
Atlieka tą patį šablonų atvaizdavimo procesą kaip anksčiau
Sukuria dinaminę sistemą, kuri reaguoja į URL pakeitimus

Čia mes susiejome deklaruotus maršrutus su atitinkamu šablonu. Galite pabandyti patikrinti, ar jis veikia teisingai, keisdami URL rankiniu būdu naršyklėje.

✅ Kas nutinka, jei URL įvesite nežinomą kelią? Kaip galėtume tai išspręsti?

Navigacijos pridėjimas

Kai maršrutizavimas nustatytas, vartotojams reikia būdo naviguoti programėlėje. Tradicinės svetainės įkelia visą puslapį spustelėjus nuorodas, tačiau mes norime atnaujinti tiek URL, tiek turinį be puslapio perkrovimo. Tai sukuria sklandesnę patirtį, panašią į tai, kaip darbalaukio programos keičia skirtingus vaizdus.

Turime suderinti du dalykus: atnaujinti naršyklės URL, kad vartotojai galėtų žymėti puslapius ir dalintis nuorodomis, ir parodyti tinkamą turinį. Teisingai įgyvendinus, tai sukuria be pertrūkių navigaciją, kokią tikisi šiuolaikinės programėlės.

sequenceDiagram
    participant User
    participant Browser
    participant App
    participant Template
    
    User->>Browser: Paspaudžia "Prisijungti" nuorodą
    Browser->>App: onclick įvykis suaktyvintas
    App->>App: preventDefault() & navigate('/dashboard')
    App->>Browser: history.pushState('/dashboard')
    Browser->>Browser: URL atnaujintas į /dashboard
    App->>App: updateRoute() iškviestas
    App->>Template: Rasti ir nukopijuoti prietaisų skydelio šabloną
    Template->>App: Grąžina nukopijuotą turinį
    App->>Browser: Pakeisti programos turinį šablonu
    Browser->>User: Rodyti prietaisų skydelio ekraną
    
    Note over User,Template: Vartotojas paspaudžia naršyklės atgal mygtuką
    
    User->>Browser: Paspaudžia atgal mygtuką
    Browser->>Browser: Istorija grįžta į /login
    Browser->>App: popstate įvykis sukeliamas
    App->>App: updateRoute() iškviestas automatiškai
    App->>Template: Rasti ir nukopijuoti prisijungimo šabloną
    Template->>App: Grąžina nukopijuotą turinį
    App->>Browser: Pakeisti programos turinį šablonu
    Browser->>User: Rodyti prisijungimo ekraną

🔄 Pedagoginė Patikra

Vieno puslapio programėlės architektūra: Patikrinkite savo supratimą apie visą sistemą:

✅ Kaip klientinės pusės maršrutizavimas skiriasi nuo tradicinio serverio pusės maršrutizavimo?
✅ Kodėl History API yra būtinas tinkamai SPA navigacijai?
✅ Kaip šablonai leidžia dinamiškai keisti turinį nereikalaujant puslapio perkrovimo?
✅ Kokį vaidmenį atlieka įvykių tvarkymas reaguojant į navigaciją?

Sistemų integracija: Jūsų SPA demonstruoja:

Šablonų valdymas: Pakartotinai naudojami UI komponentai su dinamišku turiniu
Klientinės pusės maršrutizavimas: URL valdymas be serverio užklausų
Įvykių valdymo architektūra: Reaguojanti navigacija ir vartotojo sąveikos
Naršyklės integracija: Tinkamas istorijos bei atgal/į priekį mygtukų palaikymas
Veikimo optimizavimas: Greiti perėjimai ir sumažintas serverio krūvis

Profesionalūs modeliai: Jūs įgyvendinote:

Modelio ir vaizdo atskyrimas: Šablonai atskirti nuo programos logikos
Būsenos valdymas: URL būsena suderinta su rodomu turiniu
Progresyvus papildymas: JavaScript papildo bazinę HTML funkcionalumą
Vartotojo patirtis: Sklandi, programėlę primenanti navigacija be puslapio perkrovimo

<EFBFBD> Architektūros įžvalga: Navigacijos sistemos komponentai

Ką kuriate:

🔄 URL valdymas: Atnaujina naršyklės adreso juostą be puslapio perkrovimo

📋 Šablonų sistema: Dinamiškai keičia turinį pasikeitus maršrutui

📚 Istorijos integracija: Išlaiko naršyklės atgal/į priekį mygtukų veikimą

🛡️ Klaidos valdymas: Graceful fallback mechanizmai neteisingiems ar trūkstamiems maršrutams

Kaip komponentai veikia kartu:

Klauso navigacijos įvykių (paspaudimų, istorijos pokyčių)

Atnaujina URL naudodami History API

Atvaizduoja tinkamą šabloną naujam maršrutui

Užtikrina sklandžią vartotojo patirtį viso proceso metu

Kitas žingsnis mūsų programėlėje – pridėti galimybę naviguoti tarp puslapių nekeičiant URL rankiniu būdu. Tai reiškia du dalykus:

Atnaujinti esamą URL
Atnaujinti rodomą šabloną pagal naują URL

Antrojo punkto jau pasirūpinome su updateRoute funkcija, tad dabar turime išsiaiškinti, kaip atnaujinti esamą URL.

Turėsime naudoti JavaScript ir konkrečiau history.pushState, kuris leidžia atnaujinti URL ir sukurti naują įrašą naršymo istorijoje, neperkrovus HTML.

⚠️ Svarbi pastaba: Nors HTML ankerio elementas <a href> gali būti naudojamas savarankiškai kurti nuorodoms į skirtingus URL, jis pagal numatytuosius nustatymus privers naršyklę perkrauti HTML. Kai naudojate maršrutizavimą su pasirinktiniu JavaScript, būtina užkirsti kelią šiam elgesiui naudojant preventDefault() funkciją paspaudimo įvykyje.

Užduotis

Sukurkime naują funkciją navigacijai mūsų programėlėje:

function navigate(path) {
  window.history.pushState({}, path, path);
  updateRoute();
}

Šios navigacijos funkcijos supratimas:

Atnaujina naršyklės URL į naują kelią naudodama history.pushState
Priduria naują įrašą naršyklės istorijos kiegyje, kad veiktų atgal/į priekį mygtukai
Iškviečia updateRoute() funkciją, kad būtų parodytas atitinkamas šablonas
Išlaiko vieno puslapio programėlės patirtį be puslapio perkrovimų

Šis metodas pirmiausia atnaujina esamą URL pagal pateiktą kelią, tada atnaujina šabloną. Savybė window.location.origin grąžina URL šaknį, leidžiant mums rekonstruoti pilną URL iš duoto kelio.

Kadangi turime šią funkciją, galime išspręsti problemą, jei kelio nesutinkame jokiame apibrėžtame maršrute. Modifikuosime updateRoute, pridėdami atsarginį variantą, jei nerandame atitikmens.

function updateRoute() {
  const path = window.location.pathname;
  const route = routes[path];

  if (!route) {
    return navigate('/login');
  }

  const template = document.getElementById(route.templateId);
  const view = template.content.cloneNode(true);
  const app = document.getElementById('app');
  app.innerHTML = '';
  app.appendChild(view);
}

Svarbiausi punktai prisiminti:

Patikrina, ar egzistuoja maršrutas esamam keliui
Peradresuoja į prisijungimo puslapį, jei pasiekiamas neteisingas maršrutas
Teikia atsarginį mechanizmą, kuris apsaugo nuo nutrūkusios navigacijos
Užtikrina, kad vartotojas visada matytų tinkamą ekraną, net ir su klaidingais URL

Jei maršrutas nerandamas, dabar bus peradresuota į login puslapį.

Dabar sukurkime funkciją, kuri gaus URL, kai bus spustelėta nuoroda, ir užkirs kelią naršyklės numatytam elgesiui:

function onLinkClick(event) {
  event.preventDefault();
  navigate(event.target.href);
}

Šio paspaudimo tvarkyklės išskaidymas:

Užkerta kelią naršyklės numatytam elgesiui naudojant preventDefault()
Ištraukia tikslinį URL iš spustelėtos nuorodos elemento
Iškviečia mūsų pasirinktą navigate funkciją vietoj puslapio perkrovimo
Išlaiko sklandžią vieno puslapio programėlės patirtį

<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
...
<a href="/login" onclick="onLinkClick(event)">Logout</a>

Ką reiškia ši onclick susiejimas:

Susieja kiekvieną nuorodą su mūsų pasirinkta navigacijos sistema
Perduoda paspaudimo įvykį mūsų onLinkClick funkcijai apdoroti
Įgalina sklandžią navigaciją be puslapio perkrovimo
Išlaiko tinkamą URL struktūrą, kurią vartotojai gali žymėti ar dalintis

onclick atributas susieja click įvykį su JavaScript kodu, šiuo atveju sukviečia navigate() funkciją.

Išbandykite spustelėjimą ant šių nuorodų, dabar turėtumėte galėti naviguoti tarp skirtingų jūsų programėlės ekranų.

✅ history.pushState metodas yra HTML5 standarto dalis ir įgyvendintas visose moderniose naršyklėse. Jei kuriate interneto programėlę senesnėms naršyklėms, yra triukas, kurį galite naudoti vietoje šio API: naudodami hash (#) prieš kelią galite sukurti maršrutizavimą, kuris veiktų su įprastine ankerio navigacija ir nepersikrautų puslapis, nes jo paskirtis buvo kurti vidines nuorodas puslapyje.

Atgal ir pirmyn mygtukų veikimo užtikrinimas

Atgal ir pirmyn mygtukai yra pagrindiniai naršymo internete elementai, panašiai kaip NASA misijų valdytojai gali peržiūrėti ankstesnes sistemos būsenas kosminių misijų metu. Vartotojai tikisi, kad šie mygtukai veiks, o jei ne – prarandama įprasta naršymo patirtis.

Mūsų vieno puslapio programėlei reikia papildomos konfigūracijos tai palaikyti. Naršyklė saugo istorijos steką (kurį mes papildėme naudodami history.pushState), tačiau kai vartotojai naršo per šią istoriją, mūsų programėlė turi reaguoti atnaujindama rodomą turinį atitinkamai.

sequenceDiagram
    participant User
    participant Browser
    participant App
    participant Template
    
    User->>Browser: Paspaudžia "Prisijungti" nuorodą
    Browser->>App: onclick įvykis suveikė
    App->>App: preventDefault() & navigate('/dashboard')
    App->>Browser: history.pushState('/dashboard')
    Browser->>Browser: URL atnaujinama į /dashboard
    App->>App: iškviečiamas updateRoute()
    App->>Template: Rasti ir nukopijuoti prietaisų skydelio šabloną
    Template->>App: Grąžina nukopijuotą turinį
    App->>Browser: Pakeičia programos turinį į šabloną
    Browser->>User: Rodo prietaisų skydelio ekraną
    
    Note over User,Template: Vartotojas paspaudžia naršyklės atgal mygtuką
    
    User->>Browser: Paspaudžia atgal mygtuką
    Browser->>Browser: Istorija grįžta į /login
    Browser->>App: popstate įvykis suveikė
    App->>App: automatiškai iškviečiamas updateRoute()
    App->>Template: Rasti ir nukopijuoti prisijungimo šabloną
    Template->>App: Grąžina nukopijuotą turinį
    App->>Browser: Pakeičia programos turinį į šabloną
    Browser->>User: Rodo prisijungimo ekraną

Pagrindiniai sąveikos taškai:

Vartotojo veiksmai sukelia navigaciją per paspaudimus ar naršyklės mygtukus
Programėlė perima nuorodų paspaudimus, kad užkirstų kelią puslapio perkrovimui
History API valdo URL pakeitimus ir naršyklės istorijos steką
Šablonai suteikia turinio struktūrą kiekvienam ekranui
Įvykių klausytojai užtikrina, kad programa atsakytų į visų tipų navigaciją

Naudojant history.pushState, sukuriami nauji įrašai naršyklės navigacijos istorijoje. Galite patikrinti tai paspausdami ir palaikydami naršyklės atgal mygtuką, jis turėtų parodyti kažką panašaus:

Jei kelis kartus spustelėsite atgal mygtuką, pamatysite, kad esamas URL keičiasi ir istorija atnaujinama, tačiau tas pats šablonas vis dar rodomas.

Taip yra todėl, kad programa nežino, jog turime kaskart iškviesti updateRoute(), kai istorija keičiasi. Jei pažiūrėtumėte į history.pushState dokumentaciją, pamatytumėte, kad jei būsena pasikeičia – tai reiškia, kad pereita prie kito URL – įvyksta popstate įvykis. Tai naudosime problemos sprendimui.

Užduotis

Kad būtų užtikrinta, jog rodomas šablonas bus atnaujintas, kai keičiasi naršyklės istorija, pridėsime naują funkciją, kuri kvies updateRoute(). Tai padarysime app.js failo apačioje:

window.onpopstate = () => updateRoute();
updateRoute();

Šios istorijos integracijos supratimas:

Klauso popstate įvykių, kurie vyksta, kai vartotojai naviguoja naršyklės mygtukais
Naudoja rodyklės funkciją trumpai įvykių tvarkyklės sintaksei
Automatiškai kviečia updateRoute() kiekvieną kartą, kai keičiasi istorijos būsena
Inicijuoja programėlę kviesdama updateRoute() kai puslapis pirmą kartą įsikrauna
Užtikrina teisingą šablono rodymą, nepaisant to, kaip vartotojai naršo

💡 Profesionalus patarimas: Čia panaudojome rodyklės funkciją popstate įvykių tvarkyklei dėl trumpumo, tačiau įprasta funkcija veikdavo taip pat.

Čia trumpas priminimas apie rodyklės funkcijas:

🎥 Spustelėkite aukščiau esantį paveikslėlį, kad pamatytumėte vaizdo įrašą apie rodyklės funkcijas.

Dabar išbandykite naudoti atgal ir pirmyn mygtukus savo naršyklėje, ir patikrinkite, ar rodomas maršrutas šį kartą atnaujinamas teisingai.

⚡ Ką Galite Nuveikti Per Kitą 5 Minutes

Išbandyti savo bankinės programėlės navigaciją naudojant naršyklės atgal/pirmyn mygtukus
Rankiniu būdu įvesti skirtingus URL adreso juostoje ir patikrinti maršrutizavimą
Atidaryti naršyklės DevTools ir stebėti, kaip šablonai klonuojami į DOM
Eksperimentuoti pridedant console.log teiginius maršrutizavimo srautui sekti

🎯 Ką Galite Pasiekti Per Šią Valandą

Atlikti pamokos pabaigos testą ir suprasti SPA architektūros sąvokas
Pridėti CSS stilių, kad jūsų bankinės programėlės šablonai atrodytų profesionaliai
Įgyvendinti 404 klaidos puslapio iššūkį su tinkamu klaidų valdymu
Sukurti kredito puslapio iššūkį su papildoma maršrutizavimo funkcija
Pridėti įkėlimo būsenas ir perėjimus tarp šablonų

📅 Jūsų SPA Kūrimo Savaitės Planas

Užbaigti pilną bankinę programėlę su formomis, duomenų valdymu ir išsaugojimu
Pridėti pažangias maršruto funkcijas, tokias kaip maršruto parametrai ir įdėti maršrutai
Įdiegti navigacijos apsaugas ir autentifikacija pagrįstą maršrutizavimą
Kurti pakartotinai naudojamus šablonų komponentus ir komponentų biblioteką
Pridėti animacijas ir perėjimus sklandesnei vartotojo patirčiai
Diegti savo SPA į talpinimo platformą ir tinkamai sukonfigūruoti maršrutizavimą

🌟 Jūsų Mėnesio Frontendo Architektūros Meistriškumas

Kurti sudėtingas SPA naudojant modernius karkasus kaip React, Vue ar Angular
Išmokti pažangius būsenos valdymo modelius ir bibliotekas
Išmokti naudoti kūrimo įrankius ir vystymo darbo srautus SPA kūrimui
Įgyvendinti progresyvias interneto programėles ir neprisijungimo funkcionalumą
Išstudijuoti našumo optimizavimo metodikas didelio masto SPA
Prisidėti prie atviro kodo SPA projektų ir dalintis savo žiniomis

🎯 Jūsų Vieno puslapio programėlės Meistriškumo Laiko Juosta

timeline
    title SPA kūrimo ir modernios žiniatinklio architektūros mokymosi eiga
    
    section Pagrindai (20 minučių)
        Šablonų sistemos: HTML šablonų elementai
                        : DOM manipuliacija
                        : Turinys klonavimas
                        : Dinaminis atvaizdavimas
        
    section Maršrutizavimo pagrindai (30 minučių)
        Klientų pusės navigacija: URL valdymas
                              : Istorijos API
                              : Maršrutų atvaizdavimas
                              : Įvykių tvarkymas
        
    section Vartotojo patirtis (40 minučių)
        Navigacijos tobulinimas: Naršyklės integracija
                               : Grįžimo mygtuko palaikymas
                               : Klaidų tvarkymas
                               : Sklandūs perėjimai
        
    section Architektūros modeliai (50 minučių)
        Profesionali SPA: Komponentų sistemos
                         : Būsenos valdymas
                         : Veikimo optimizavimas
                         : Klaidos ribos
        
    section Pažangios technikos (1 savaitė)
        Sistemų integracija: React Router
                             : Vue Router
                             : Angular Router
                             : Būsenos bibliotekos
        
    section Produkcijos įgūdžiai (1 mėnuo)
        Įmonių vystymas: Kūrimo sistemos
                         : Testavimo strategijos
                         : Diegimo procesai
                         : Veikimo stebėjimas

🛠️ Jūsų SPA Kūrimo Įrankių Rinkinys

Baigus šią pamoką, jūs įvaldėte:

Šablonų architektūrą: pakartotinai naudojami HTML komponentai su dinamišku turinio atvaizdavimu
Klientinės pusės maršrutizavimą: URL valdymą ir navigaciją be puslapio perkrovimo
Naršyklės integraciją: History API naudojimą ir atgal/į priekį mygtukų palaikymą
Įvykių valdymo sistemas: navigacijos valdymą ir vartotojo sąveikos tvarkymą
DOM manipuliaciją: šablonų klonavimą, turinio keitimą ir elementų valdymą
Klaidų valdymą: malonius sprendimus neteisingiems maršrutams ar trūkstamam turiniui
Veikimo modelius: efektyvų turinio įkėlimą ir atvaizdavimo strategijas

Realios Pasaulio Programos: Jūsų SPA kūrimo įgūdžiai tiesiogiai pritaikomi:

Modernioms interneto programoms: React, Vue, Angular ir kitų karkasų kūrimui
Progresyvioms interneto programėlėms: neprisijungimo galimybės ir programėlės tipo patirtys
Įmonių valdymo sistemoms: sudėtingoms verslo programoms su keliomis peržiūromis
El. prekybos platformoms: produktų katalogams, krepšeliams ir atsiskaitymo procesams
Turinio valdymui: dinamiško turinio kūrimui ir redagavimo sąsajoms
Mobiliesiems sprendimams: hibridinėms programėlėms naudojant interneto technologijas

Įgyti Profesiniai Įgūdžiai: Dabar galite:

Kurkite vieno puslapio programas su tinkamu atsakomybių atskyrimu
Įgyvendinkite klientinėje pusėje veikiančias maršruto sistemas, kurios auga kartu su programos sudėtingumu
Derinkite sudėtingas naršymo eigas naudodami naršyklės kūrėjų įrankius
Optimizuokite programos veikimą efektyviai valdant šablonus
Sukurkite vartotojo patirtis, kurios atrodo natūralios ir reaguoja greitai

Įvaldytos priekinės dalies kūrimo sąvokos:

Komponentų architektūra: Pernaudojami UI modeliai ir šablonų sistemos
Būsenos sinchronizavimas: URL būsenos valdymas ir naršyklės istorija
Įvykių valdymas: Vartotojo sąveikos valdymas ir naršymas
Veikimo optimizavimas: Efektyvus DOM manipuliavimas ir turinio įkėlimas
Vartotojo patirties dizainas: Lygūs perėjimai ir intuityvus naršymas

Kitas lygis: Jūs esate pasiruošę tyrinėti modernias priekinės dalies sistemas, pažangų būsenos valdymą arba kurti sudėtingas įmonių programas!

🌟 Pasiektas laimėjimas: Jūs sukūrėte profesionalios vieno puslapio programos pagrindą, naudodami modernius interneto architektūros modelius!

GitHub Copilot Agent Iššūkis 🚀

Naudokite Agent režimą, kad įvykdytumėte šį iššūkį:

Aprašymas: Patobulinkite banko programėlę įgyvendindami klaidų tvarkymą ir 404 puslapio šabloną neteisingiems maršrutams, gerindami vartotojo patirtį naršant į neegzistuojančius puslapius.

Užduotis: Sukurkite naują HTML šabloną su id „not-found“, kuris rodo draugišką 404 klaidos puslapį su stiliumi. Tada pakeiskite JavaScript maršrutų logiką, kad šis šablonas būtų rodomas, kai vartotojai patenka į neteisingus URL, ir pridėkite mygtuką „Eiti į pradžią“, kuris nukreipia atgal į prisijungimo puslapį.

Daugiau apie agent režimą sužinokite čia.

🚀 Iššūkis

Pridėkite naują šabloną ir maršrutą trečiajam puslapiui, kuris rodo šios programėlės kreditus.

Iššūkio tikslai:

Sukurkite naują HTML šabloną su tinkama turinio struktūra
Pridėkite naują maršrutą į maršrutų konfigūracijos objektą
Įtraukite navigacijos nuorodas į ir iš kreditų puslapio
Išbandykite, kad visa navigacija veikia tinkamai su naršyklės istorija

Po paskaitos testas

Apžvalga ir savarankiškas mokymasis

Maršrutizacija yra viena iš netikėtai sudėtingų interneto kūrimo dalių, ypač kai žiniatinklis pereina nuo puslapio perkrovimo elgsenos prie vieno puslapio programų perkrovimo. Perskaitykite šiek tiek apie kaip Azure Static Web App paslauga tvarko maršrutizaciją. Ar galite paaiškinti, kodėl kai kurie sprendimai šiame dokumente yra reikalingi?

Papildomi mokymosi resursai:

Tyrinėkite, kaip populiarios sistemos, tokios kaip React Router ir Vue Router, įgyvendina klientinėje pusėje veikiančią maršrutizaciją
Ištirkite skirtumus tarp maršrutizacijos naudojant hash ir istorijos API
Sužinokite apie serverio pusės vaizdų generavimą (SSR) ir kaip jis veikia maršrutizacijos strategijas
Išnagrinėkite, kaip progresyvios interneto programos (PWA) tvarko maršrutizaciją ir navigaciją

Užduotis

Patobulinkite maršrutizaciją

Atsakomybės apribojimas: Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą Co-op Translator. Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Pirminis dokumentas gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Svarbiai informacijai rekomenduojamas profesionalus vertimas žmogaus. Mes neatsakome už bet kokius nesusipratimus ar neteisingą interpretaciją, kylančią naudojant šį vertimą.

README.md Unescape Escape

Sukurkite bankinę programėlę 1 dalis: HTML šablonai ir maršrutai žiniatinklio programoje

Išankstinis testas prieš paskaitą

Ko reikės

Paruošimas

HTML Šablonai

Pradėkime kurti

🔄 Pedagoginė patikra

Šablonų įgyvendinimas su JavaScript

Užduotis

Maršrutų kūrimas

Užduotis

Navigacijos pridėjimas

🔄 Pedagoginė Patikra

Užduotis

Atgal ir pirmyn mygtukų veikimo užtikrinimas

Užduotis

⚡ Ką Galite Nuveikti Per Kitą 5 Minutes

🎯 Ką Galite Pasiekti Per Šią Valandą

📅 Jūsų SPA Kūrimo Savaitės Planas

🌟 Jūsų Mėnesio Frontendo Architektūros Meistriškumas

🎯 Jūsų Vieno puslapio programėlės Meistriškumo Laiko Juosta

🛠️ Jūsų SPA Kūrimo Įrankių Rinkinys

GitHub Copilot Agent Iššūkis 🚀

🚀 Iššūkis

Po paskaitos testas

Apžvalga ir savarankiškas mokymasis

Užduotis

README.md

Unescape Escape