Navigation API apgūšana: vienas lapas lietojumprogrammu maršrutēšana un vēstures pārvaldība

Navigation API ir būtisks progress veidā, kā mēs pārvaldām maršrutēšanu un vēsturi vienas lapas lietojumprogrammās (SPA). Tradicionālās metodes bieži balstās uz `window.location` objekta manipulēšanu vai trešo pušu bibliotēku izmantošanu. Lai gan šīs pieejas ir labi kalpojušas, Navigation API piedāvā racionalizētāku, veiktspējīgāku un funkcijām bagātāku risinājumu, nodrošinot izstrādātājiem lielāku kontroli pār lietotāja navigācijas pieredzi.

Kas ir Navigation API?

Navigation API ir moderna pārlūkprogrammas API, kas izstrādāta, lai vienkāršotu un uzlabotu veidu, kā SPA pārvalda navigāciju, maršrutēšanu un vēsturi. Tā ievieš jaunu `navigation` objektu, nodrošinot metodes un notikumus, kas ļauj izstrādātājiem pārtvert un kontrolēt navigācijas notikumus, atjaunināt URL un uzturēt konsekventu pārlūkošanas vēsturi bez pilnas lapas pārlādes. Tas nodrošina ātrāku, plūdenāku un atsaucīgāku lietotāja pieredzi.

Navigation API izmantošanas priekšrocības

• Uzlabota veiktspēja: Novēršot pilnas lapas pārlādes, Navigation API ievērojami uzlabo SPA veiktspēju. Pārejas starp dažādiem skatiem kļūst ātrākas un plūdenākas, nodrošinot saistošāku lietotāja pieredzi.
• Paplašināta kontrole: API nodrošina detalizētu kontroli pār navigācijas notikumiem, ļaujot izstrādātājiem pārtvert un modificēt navigācijas uzvedību pēc nepieciešamības. Tas ietver navigācijas novēršanu, lietotāju pāradresēšanu un pielāgotas loģikas izpildi pirms vai pēc navigācijas.
• Vienkāršota vēstures pārvaldība: Pārlūkprogrammas vēstures steka pārvaldība ir kļuvusi vieglāka ar Navigation API. Izstrādātāji var programmatiski pievienot, aizstāt un pārvietoties pa vēstures ierakstiem, nodrošinot konsekventu un paredzamu pārlūkošanas pieredzi.
• Deklaratīvā navigācija: Navigation API veicina deklaratīvāku pieeju maršrutēšanai, ļaujot izstrādātājiem definēt navigācijas noteikumus un uzvedību skaidrā un kodolīgā veidā. Tas uzlabo koda lasāmību un uzturamību.
• Integrācija ar moderniem ietvariem: Navigation API ir izstrādāta, lai nevainojami integrētos ar moderniem JavaScript ietvariem un bibliotēkām, piemēram, React, Angular un Vue.js. Tas ļauj izstrādātājiem izmantot API funkcijas savās esošajās izstrādes darbplūsmās.

Pamatkoncepcijas un funkcijas

1. `navigation` objekts

Navigation API sirds ir `navigation` objekts, kas ir pieejams caur globālo `window` objektu (t.i., `window.navigation`). Šis objekts nodrošina piekļuvi dažādām īpašībām un metodēm, kas saistītas ar navigāciju, tostarp:

• `currentEntry`: Atgriež `NavigationHistoryEntry` objektu, kas pārstāv pašreizējo ierakstu navigācijas vēsturē.
• `entries()`: Atgriež `NavigationHistoryEntry` objektu masīvu, kas pārstāv visus ierakstus navigācijas vēsturē.
• `navigate(url, { state, info, replace })`: Pārvietojas uz jaunu URL.
• `back()`: Pārvietojas atpakaļ uz iepriekšējo vēstures ierakstu.
• `forward()`: Pārvietojas uz priekšu uz nākamo vēstures ierakstu.
• `reload()`: Pārlādē pašreizējo lapu.
• `addEventListener(event, listener)`: Pievieno notikumu uztvērēju ar navigāciju saistītiem notikumiem.

2. `NavigationHistoryEntry`

`NavigationHistoryEntry` saskarne attēlo vienu ierakstu navigācijas vēsturē. Tā sniedz informāciju par ierakstu, piemēram, tā URL, stāvokli un unikālo ID.

• `url`: Vēstures ieraksta URL.
• `key`: Unikāls identifikators vēstures ierakstam.
• `id`: Vēl viens unikāls identifikators, īpaši noderīgs navigācijas notikuma dzīves cikla izsekošanai.
• `sameDocument`: Būla vērtība, kas norāda, vai navigācija notiek tā paša dokumenta ietvaros.
• `getState()`: Atgriež stāvokli, kas saistīts ar vēstures ierakstu (iestatīts navigācijas laikā).

3. Navigācijas notikumi

Navigation API raida vairākus notikumus, kas ļauj izstrādātājiem uzraudzīt un kontrolēt navigācijas uzvedību. Šie notikumi ietver:

• `navigate`: Tiek raidīts, kad tiek uzsākta navigācija (piem., noklikšķinot uz saites, iesniedzot formu vai izsaucot `navigation.navigate()`). Šis ir primārais notikums, lai pārtvertu un apstrādātu navigācijas pieprasījumus.
• `navigatesuccess`: Tiek raidīts, kad navigācija veiksmīgi pabeigta.
• `navigateerror`: Tiek raidīts, kad navigācija neizdodas (piem., tīkla kļūdas vai neapstrādāta izņēmuma dēļ).
• `currentchange`: Tiek raidīts, kad mainās pašreizējais vēstures ieraksts (piem., pārvietojoties uz priekšu vai atpakaļ).
• `dispose`: Tiek raidīts, kad `NavigationHistoryEntry` vairs nav sasniedzams, piemēram, kad tas tiek noņemts no vēstures `replaceState` operācijas laikā.

Maršrutēšanas ieviešana ar Navigation API: praktisks piemērs

Ilustrēsim, kā izmantot Navigation API, lai ieviestu pamata maršrutēšanu vienkāršā SPA. Pieņemsim, ka lietojumprogrammai ir trīs skati: Sākums, Par mums un Kontakti.

Vispirms izveidojiet funkciju maršruta izmaiņu apstrādei:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Sākums
Laipni lūdzam Sākuma lapā!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
Par mums
Uzziniet vairāk par mums.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Kontakti
Sazinieties ar mums.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Nav atrasts
Lapa nav atrasta.
';
  }
}

Pēc tam pievienojiet notikumu uztvērēju `navigate` notikumam:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // Novērš noklusējuma pārlūkprogrammas navigāciju

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // Atrisina solījumu pēc maršruta apstrādes
  });

  event.transition = promise;
});

Šis kods pārtver `navigate` notikumu, izgūst URL no `event.destination` objekta, novērš noklusējuma pārlūkprogrammas navigāciju, izsauc `handleRouteChange`, lai atjauninātu saturu, un iestata `event.transition` solījumu. `event.transition` iestatīšana nodrošina, ka pārlūkprogramma gaida, kamēr satura atjaunināšana tiks pabeigta, pirms vizuāli atjaunināt lapu.

Visbeidzot, varat izveidot saites, kas ierosina navigāciju:

Sākums | Par mums | Kontakti

Un pievienojiet klikšķu uztvērēju šīm saitēm:

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'A' && event.target.hasAttribute('data-navigo')) {
    event.preventDefault();
    window.navigation.navigate(event.target.href);
  }
});

Tas iestata pamata klienta puses maršrutēšanu, izmantojot Navigation API. Tagad, noklikšķinot uz saitēm, tiks ierosināts navigācijas notikums, kas atjauninās `content` bloka saturu bez pilnas lapas pārlādes.

Stāvokļa pārvaldības pievienošana

Navigation API arī ļauj saistīt stāvokli ar katru vēstures ierakstu. Tas ir noderīgi, lai saglabātu datus starp navigācijas notikumiem. Pārveidosim iepriekšējo piemēru, iekļaujot stāvokļa objektu.

Izsaucot `navigation.navigate()`, varat nodot `state` objektu:

window.navigation.navigate('/about', { state: { pageTitle: 'Par Mums' } });

`navigate` notikuma uztvērējā varat piekļūt stāvoklim, izmantojot `event.destination.getState()`:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  const state = event.destination.getState();
  event.preventDefault();

  const promise = new Promise((resolve) => {
      handleRouteChange(url, state);
      resolve();
  });
  event.transition = promise;

});

function handleRouteChange(url, state = {}) {
  const contentDiv = document.getElementById('content');
  let title = state.pageTitle || 'Mana Aplikācija'; // Noklusējuma virsraksts

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Sākums
Laipni lūdzam Sākuma lapā!
';
      title = 'Sākums';
      break;
    case '/about':
      contentDiv.innerHTML = '
Par mums
Uzziniet vairāk par mums.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Kontakti
Sazinieties ar mums.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Nav atrasts
Lapa nav atrasta.
';
      title = '404 Nav atrasts';
  }
  document.title = title;
}

Šajā modificētajā piemērā `handleRouteChange` funkcija tagad pieņem `state` parametru un izmanto to, lai atjauninātu dokumenta virsrakstu. Ja stāvoklis nav nodots, tas pēc noklusējuma ir 'Mana Aplikācija'.

`navigation.updateCurrentEntry()` izmantošana

Dažreiz jūs varētu vēlēties atjaunināt pašreizējā vēstures ieraksta stāvokli, neizraisot jaunu navigāciju. `navigation.updateCurrentEntry()` metode ļauj to izdarīt. Piemēram, ja lietotājs maina iestatījumu pašreizējā lapā, jūs varat atjaunināt stāvokli, lai atspoguļotu šo izmaiņu:

function updateUserSetting(setting, value) {
  const currentState = navigation.currentEntry.getState() || {};
  const newState = { ...currentState, [setting]: value };
  navigation.updateCurrentEntry({ state: newState });
  console.log('Atjaunināts iestatījums:', setting, 'uz', value);
}

// Piemēra lietojums:
updateUserSetting('theme', 'dark');

Šī funkcija iegūst pašreizējo stāvokli, apvieno to ar atjaunināto iestatījumu un pēc tam atjaunina pašreizējo vēstures ierakstu ar jauno stāvokli.

Papildu lietošanas gadījumi un apsvērumi

1. Formu iesniegšanas apstrāde

Navigation API var izmantot, lai apstrādātu formu iesniegšanu SPA, novēršot pilnas lapas pārlādes un nodrošinot plūdenāku lietotāja pieredzi. Jūs varat pārtvert formas iesniegšanas notikumu un izmantot `navigation.navigate()`, lai atjauninātu URL un parādītu rezultātus bez pilnas lapas pārlādes.

2. Asinhronās operācijas

Apstrādājot navigācijas notikumus, jums var būt nepieciešams veikt asinhronas operācijas, piemēram, datu ielādi no API. `event.transition` īpašība ļauj saistīt solījumu (promise) ar navigācijas notikumu, nodrošinot, ka pārlūkprogramma gaida, līdz asinhronā operācija tiks pabeigta, pirms atjaunināt lapu. Skatiet iepriekšējos piemērus.

3. Ritināšanas pozīcijas atjaunošana

Ritināšanas pozīcijas saglabāšana navigācijas laikā ir būtiska, lai nodrošinātu labu lietotāja pieredzi. Navigation API nodrošina mehānismus ritināšanas pozīcijas atjaunošanai, pārvietojoties atpakaļ vai uz priekšu vēsturē. Varat izmantot `NavigationHistoryEntry` `scroll` īpašību, lai saglabātu un atjaunotu ritināšanas pozīciju.

4. Kļūdu apstrāde

Ir svarīgi apstrādāt kļūdas, kas var rasties navigācijas laikā, piemēram, tīkla kļūdas vai neapstrādātus izņēmumus. `navigateerror` notikums ļauj jums uztvert un apstrādāt šīs kļūdas, novēršot lietojumprogrammas avāriju vai kļūdas ziņojuma parādīšanu lietotājam.

5. Progresīvā uzlabošana

Veidojot SPA ar Navigation API, ir svarīgi apsvērt progresīvo uzlabošanu. Pārliecinieties, ka jūsu lietojumprogramma darbojas pareizi pat tad, ja pārlūkprogramma neatbalsta Navigation API. Varat izmantot funkciju noteikšanu, lai pārbaudītu `navigation` objekta esamību un nepieciešamības gadījumā izmantot tradicionālās maršrutēšanas metodes.

Salīdzinājums ar tradicionālajām maršrutēšanas metodēm

Tradicionālās maršrutēšanas metodes SPA bieži balstās uz `window.location` objekta manipulēšanu vai trešo pušu bibliotēku, piemēram, `react-router` vai `vue-router`, izmantošanu. Lai gan šīs metodes ir plaši izmantotas un labi iedibinātas, tām ir daži ierobežojumi:

• Pilnas lapas pārlādes: `window.location` tieša manipulēšana var izraisīt pilnas lapas pārlādes, kas var būt lēnas un traucējošas lietotāja pieredzei.
• Sarežģītība: Vēstures un stāvokļa pārvaldība ar tradicionālām metodēm var būt sarežģīta un kļūdaina, īpaši lielās un sarežģītās lietojumprogrammās.
• Veiktspējas slogs: Trešo pušu maršrutēšanas bibliotēkas var radīt ievērojamu veiktspējas slogu, īpaši, ja tās nav optimizētas jūsu lietojumprogrammas specifiskajām vajadzībām.

Navigation API risina šos ierobežojumus, nodrošinot racionalizētāku, veiktspējīgāku un funkcijām bagātāku risinājumu maršrutēšanai un vēstures pārvaldībai. Tā novērš pilnas lapas pārlādes, vienkāršo vēstures pārvaldību un nodrošina detalizētu kontroli pār navigācijas notikumiem.

Pārlūkprogrammu saderība

Sākot ar 2024. gada beigām, Navigation API ir labs atbalsts modernajās pārlūkprogrammās, tostarp Chrome, Firefox, Safari un Edge. Tomēr vienmēr ir laba prakse pārbaudīt jaunāko pārlūkprogrammu saderības informāciju resursos, piemēram, Can I use, pirms ieviest Navigation API savās produkcijas lietojumprogrammās. Ja ir nepieciešams atbalsts vecākām pārlūkprogrammām, apsveriet iespēju izmantot polifilu (polyfill) vai rezerves mehānismu.

Noslēgums

Navigation API ir spēcīgs rīks modernu, veiktspējīgu SPA veidošanai ar uzlabotām maršrutēšanas un vēstures pārvaldības iespējām. Izmantojot API funkcijas, izstrādātāji var radīt ātrāku, plūdenāku un saistošāku lietotāja pieredzi. Lai gan sākotnējā mācīšanās līkne varētu būt nedaudz stāvāka, salīdzinot ar vienkāršākām, vecākām metodēm, Navigation API priekšrocības, īpaši sarežģītās lietojumprogrammās, padara to par vērtīgu ieguldījumu. Izmantojiet Navigation API un atraisiet savu SPA pilno potenciālu.

Papildu mācību materiāli

• MDN Web Docs: Navigation API
• WICG Navigation API specifikācija