🚚 Logică pentru routerul unui spa
Logica din spatele unui router conține pașii următori.
- Încărcați traseul. Identificați unde suntem pe site. Se face printr-o sarcină inițială a traseului.
- Comparați adresa URL cu una dintre rutele noastre. URL-ul pe care dorim să-l mișcăm, ar trebui să fie comparat cu rutele pe care le avem, deoarece traseul solicitat trebuie să fie între căile noastre definite pentru a fi încărcate.
- Actualizați traseul în bara de navigare. Pentru aceasta putem folosi o metodă HTML cunoscută sub numele de
pushState. Această metodă face parte din obiectul ferestrei Navigatorului nostruwindows.history.pushState. Această metodă ne adaugă o stare istoriei noastre de navigație și atunci când adăugăm un stat nou se reflectă în bara de navigare. - Actualizați Sunderul cu cel nou. Noul conținut poate fi trimis prin
innerHTMLFișier în care veți trăi tematul nostru care va primi conținutul care se va schimba în duminică.Pe de altă parte, logica aplicației va fi în fișierele noastre
.js, care vor fi trei așa cum se arată în următoarea diagramă.
ID DIV = „CF2ECA6ABA”> APP arhitectura
structura folderului cu care vom lucra.
|- root|-- /js|--- index.js|--- router.js|--- routes.js|-- index.html|-- style.css🧭 De ce SPA?
SPA ca numele dvs. indică faptul că sunt o singură pagină web și navigare în cadrul acestuia are loc fără a fi nevoie să reîncărcați browserul.
DIV id = ” 704F99F65E „>
💡 Scopul efectuării rutei cu JavaScript Vanilla este de a înțelege funcționarea bibliotecilor de rutare a cadrelor.
Pentru a lucra cu adresa URL, vom folosi API-ul de istorie, care nu este o caracteristică a JavaScript dacă nu browserul. Acest API aduce o metodă numită iv Id = „747ed44626”
care ne ajută să aducem datele stiva de navigație.
🖥 Mergem la codul
Am început Oferind structura șablonului HTML. Amintiți-vă că funcționalitatea acestei mici practici este de a face un router cu Vanilla JavaScript, astfel încât șablonul nostru va fi cât mai simplu posibil.
div>
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SPA Routing</title> <link rel="stylesheet" href="style.css"></head><body> <!-- Botones de navegación --> <header> <button onclick="ROUTER.load('home')">Home </button> <button onclick="ROUTER.load('about')">About</button> <button onclick="ROUTER.load('contact')">Contact</button> </header> <!-- Aquí es donde se insertará el contenido según la página en la que nos encontremos --> <div></div> <!-- En estos archivos estará la mágica para la navegación --> <script src="./js/router.js"></script> <script src="./js/routes.js"></script> <script src="./js/index.js"></script></body></html>Cu șablonul nostru HTML a jucat următorul pas va fi de a defini dicționarul nostru de rute, aici va fi o listă a tuturor rutelor disponibile din spa-ul nostru și conținutul fiecăruia dintre acestea
const PATHS = { home: { path: "/", template: `<h1>🏠 Home</h1>`, }, about: { path: "/about", template: `<h1>👩🏻💻 Sobre mi</h1>`, }, contact: { path: "/contact", template: `<h1>📱 Contacto</h1>`, }} Fișierul următor de lucru va fi cel care conține toată logica pentru a opera rutele noastre, dacă vom lucra acum în router.js În care vom defini o clasă numită Router, această clasă este cea pe care o vom inițializa în index.js, dar asta o va vedea Mai târziu.
class Router {Primul va fi definirea unui constructor pentru clasa noastră. Funcțiile acestui constructor vor fi încărcate pe lista noastră de rute și inițializând routerul.
cu constructorul nostru creat Noi va scrie logica pentru a porni routerul. Această funcție este responsabilă pentru identificarea traseului în care se află browserul nostru.
initRouter() { const { location: { pathname = "/" } } = window; const URL = pathname === "/" ? "home" : pathname.replace("/", ""); this.load(URL); } cu traseul identificat, noi poate începe să lucreze la funcția care va fi responsabilă pentru încărcarea paginilor pe care doriți să le vizualizați utilizatorul. Aceasta va fi funcția load pe care le primiți în mod implicit Parametrul de home așa cum vrem ca conținutul să fie conținutul principal al spa-ului nostru . Div id = „
Acum, cu toată logica routerului nostru construit, rămâne doar să inițializăm clasa în index.js.
const ROUTER = new Router(PATHS);Acum, pentru a încerca corect spa-ul nostru mic necesare pentru a avea un server local. Acest lucru poate fi implementat în mai multe moduri, dar vă recomandăm ca, dacă utilizați VScde, instalați serverul live care vă va face viața mai ușoară.
→ LiveServer
✅ Concluzii
Acest lucru ar fi într-un mod foarte simplu, modul în care routerele unor cadre JavaScript funcționează ca unghiular sau vuie. Personal nu recomand „cu mâna” router, dacă nu va fi un proiect foarte mic. Cel mai bun lucru este utilizarea implementărilor fiecărui cadru.
Deși, desigur, este întotdeauna bun să spargeți lucrurile în jos și să știți din baze.
Codul codului poate fi găsit în depozitul meu GitHub. Aici las linkul.
→ vanilie router spa