Navigation API-ni o'zlashtirish: Bir Sahifali Ilova (SPA) Marshrutizatsiyasi va Tarixni Boshqarish

Navigation API Bir Sahifali Ilovalar (SPA) doirasida marshrutizatsiya va tarixni boshqarish usullarida muhim bir yutuqni ifodalaydi. An'anaviy usullar ko'pincha `window.location` obyektini manipulyatsiya qilishga yoki uchinchi tomon kutubxonalaridan foydalanishga tayanadi. Garchi bu yondashuvlar bizga yaxshi xizmat qilgan bo'lsa-da, Navigation API ishlab chiquvchilarga foydalanuvchining navigatsiya tajribasini yanada ko'proq nazorat qilish imkonini beruvchi soddalashtirilgan, samaraliroq va ko'proq funksiyalarga ega yechimni taklif etadi.

Navigation API nima?

Navigation API — bu SPA'larning navigatsiya, marshrutizatsiya va tarixni boshqarish usulini soddalashtirish va yaxshilash uchun mo'ljallangan zamonaviy brauzer API'sidir. U yangi `navigation` obyektini taqdim etadi, bu esa ishlab chiquvchilarga navigatsiya hodisalarini ushlab olish va nazorat qilish, URL manzilini yangilash hamda sahifani to'liq qayta yuklamasdan izchil ko'rish tarixini saqlab qolish imkonini beruvchi usullar va hodisalarni o'z ichiga oladi. Bu esa tezroq, silliqroq va sezgirroq foydalanuvchi tajribasiga olib keladi.

Navigation API-dan foydalanishning afzalliklari

• Yaxshilangan samaradorlik: Sahifani to'liq qayta yuklashlarni bartaraf etish orqali Navigation API SPA'larning samaradorligini sezilarli darajada oshiradi. Turli ko'rinishlar o'rtasidagi o'tishlar tezroq va silliqroq bo'ladi, bu esa foydalanuvchining yanada qiziqarli tajribasiga olib keladi.
• Kengaytirilgan nazorat: API navigatsiya hodisalari ustidan nozik nazoratni ta'minlaydi, bu esa ishlab chiquvchilarga navigatsiya harakatini kerak bo'lganda ushlab olish va o'zgartirish imkonini beradi. Bunga navigatsiyani oldini olish, foydalanuvchilarni qayta yo'naltirish va navigatsiyadan oldin yoki keyin maxsus mantiqni bajarish kiradi.
• Soddalashtirilgan tarixni boshqarish: Navigation API yordamida brauzerning tarix stekini boshqarish osonlashadi. Dasturchilar tarix yozuvlarini dasturiy ravishda qo'shishi, almashtirishi va ular bo'ylab harakatlanishi mumkin, bu esa izchil va kutiladigan ko'rish tajribasini ta'minlaydi.
• Deklarativ navigatsiya: Navigation API marshrutizatsiyaga yanada deklarativ yondashuvni rag'batlantiradi, bu esa ishlab chiquvchilarga navigatsiya qoidalari va harakatlarini aniq va ixcham tarzda belgilash imkonini beradi. Bu kodning o'qilishi va saqlanishini yaxshilaydi.
• Zamonaviy freymvorklar bilan integratsiya: Navigation API React, Angular va Vue.js kabi zamonaviy JavaScript freymvorklari va kutubxonalari bilan muammosiz integratsiyalash uchun mo'ljallangan. Bu esa ishlab chiquvchilarga o'zlarining mavjud ish jarayonlari doirasida API imkoniyatlaridan foydalanish imkonini beradi.

Asosiy tushunchalar va xususiyatlar

1. `navigation` obyekti

Navigation API'ning yuragi `navigation` obyekti bo'lib, unga global `window` obyekti orqali (ya'ni, `window.navigation`) kirish mumkin. Bu obyekt navigatsiyaga oid turli xususiyatlar va usullarga kirishni ta'minlaydi, jumladan:

• `currentEntry`: Navigatsiya tarixidagi joriy yozuvni ifodalovchi `NavigationHistoryEntry` obyektini qaytaradi.
• `entries()`: Navigatsiya tarixidagi barcha yozuvlarni ifodalovchi `NavigationHistoryEntry` obyektlari massivini qaytaradi.
• `navigate(url, { state, info, replace })`: Yangi URL manziliga o'tadi.
• `back()`: Tarixdagi avvalgi yozuvga qaytadi.
• `forward()`: Tarixdagi keyingi yozuvga o'tadi.
• `reload()`: Joriy sahifani qayta yuklaydi.
• `addEventListener(event, listener)`: Navigatsiyaga oid hodisalar uchun hodisa tinglovchisini qo'shadi.

2. `NavigationHistoryEntry`

`NavigationHistoryEntry` interfeysi navigatsiya tarixidagi bitta yozuvni ifodalaydi. U yozuv haqida, masalan, uning URL manzili, holati va noyob ID'si kabi ma'lumotlarni taqdim etadi.

• `url`: Tarix yozuvining URL manzili.
• `key`: Tarix yozuvi uchun noyob identifikator.
• `id`: Yana bir noyob identifikator, ayniqsa navigatsiya hodisasining hayot siklini kuzatish uchun foydali.
• `sameDocument`: Navigatsiya bir hujjat ichidagi navigatsiyaga olib kelishini ko'rsatuvchi mantiqiy (boolean) qiymat.
• `getState()`: Tarix yozuvi bilan bog'langan holatni qaytaradi (navigatsiya paytida o'rnatiladi).

3. Navigatsiya hodisalari

Navigation API ishlab chiquvchilarga navigatsiya harakatini kuzatish va nazorat qilish imkonini beruvchi bir nechta hodisalarni yuboradi. Bu hodisalar quyidagilarni o'z ichiga oladi:

• `navigate`: Navigatsiya boshlanganda (masalan, havolani bosish, formani yuborish yoki `navigation.navigate()` ni chaqirish) yuboriladi. Bu navigatsiya so'rovlarini ushlab olish va qayta ishlash uchun asosiy hodisadir.
• `navigatesuccess`: Navigatsiya muvaffaqiyatli yakunlanganda yuboriladi.
• `navigateerror`: Navigatsiya muvaffaqiyatsiz tugaganda (masalan, tarmoq xatosi yoki qayta ishlanmagan istisno tufayli) yuboriladi.
• `currentchange`: Joriy tarix yozuvi o'zgarganda (masalan, oldinga yoki orqaga o'tishda) yuboriladi.
• `dispose`: `NavigationHistoryEntry` endi mavjud bo'lmaganda, masalan, `replaceState` operatsiyasi paytida tarixdan o'chirilganda, yuboriladi.

Navigation API yordamida marshrutizatsiyani amalga oshirish: Amaliy misol

Keling, oddiy SPA'da asosiy marshrutizatsiyani amalga oshirish uchun Navigation API'dan qanday foydalanishni ko'rib chiqamiz. Ilovada uchta ko'rinish bor deb faraz qilaylik: Bosh sahifa, Biz haqimizda va Aloqa.

Birinchi navbatda, marshrut o'zgarishlarini qayta ishlaydigan funksiya yarating:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Home
Welcome to the Home page!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
About
Learn more about us.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Contact
Get in touch with us.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Not Found
Page not found.
';
  }
}

Keyin, `navigate` hodisasiga hodisa tinglovchisini qo'shing:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // Prevent default browser navigation

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // Resolve the promise after route handling
  });

  event.transition = promise;
});

Ushbu kod `navigate` hodisasini ushlab oladi, `event.destination` obyektidan URL manzilini oladi, brauzerning standart navigatsiyasini oldini oladi, kontentni yangilash uchun `handleRouteChange` funksiyasini chaqiradi va `event.transition` promisini o'rnatadi. `event.transition` ni o'rnatish brauzerning sahifani vizual yangilashdan oldin kontent yangilanishining tugashini kutishini ta'minlaydi.

Nihoyat, navigatsiyani ishga tushiradigan havolalar yaratishingiz mumkin:

Home | About | Contact

Va bu havolalarga bosish tinglovchisini biriktiring:

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

Bu Navigation API yordamida asosiy mijoz tomonidagi marshrutizatsiyani sozlaydi. Endi havolalarni bosish `content` divining tarkibini sahifani to'liq qayta yuklamasdan yangilaydigan navigatsiya hodisasini ishga tushiradi.

Holatni boshqarishni qo'shish

Navigation API shuningdek, har bir tarix yozuvi bilan holatni bog'lash imkonini beradi. Bu navigatsiya hodisalari davomida ma'lumotlarni saqlab qolish uchun foydalidir. Keling, oldingi misolni holat obyektini o'z ichiga oladigan qilib o'zgartiramiz.

`navigation.navigate()` funksiyasini chaqirayotganda, `state` obyektini uzatishingiz mumkin:

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

`navigate` hodisasi tinglovchisi ichida siz holatga `event.destination.getState()` yordamida kirishingiz mumkin:

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 || 'My App'; // Standart sarlavha

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Home
Welcome to the Home page!
';
      title = 'Home';
      break;
    case '/about':
      contentDiv.innerHTML = '
About
Learn more about us.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Contact
Get in touch with us.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Not Found
Page not found.
';
      title = '404 Not Found';
  }
  document.title = title;
}

Ushbu o'zgartirilgan misolda `handleRouteChange` funksiyasi endi `state` parametrini qabul qiladi va undan hujjat sarlavhasini yangilash uchun foydalanadi. Agar holat uzatilmasa, u standart 'My App' qiymatini oladi.

`navigation.updateCurrentEntry()`'dan foydalanish

Ba'zan siz yangi navigatsiyani ishga tushirmasdan joriy tarix yozuvining holatini yangilashni xohlashingiz mumkin. `navigation.updateCurrentEntry()` usuli buni amalga oshirishga imkon beradi. Masalan, agar foydalanuvchi joriy sahifadagi sozlamani o'zgartirsa, siz bu o'zgarishni aks ettirish uchun holatni yangilashingiz mumkin:

function updateUserSetting(setting, value) {
  const currentState = navigation.currentEntry.getState() || {};
  const newState = { ...currentState, [setting]: value };
  navigation.updateCurrentEntry({ state: newState });
  console.log('Updated setting:', setting, 'to', value);
}

// Foydalanish misoli:
updateUserSetting('theme', 'dark');

Ushbu funksiya joriy holatni oladi, yangilangan sozlamani birlashtiradi va keyin joriy tarix yozuvini yangi holat bilan yangilaydi.

Ilg'or foydalanish holatlari va e'tiborga olinadigan jihatlar

1. Formalarni yuborishni qayta ishlash

Navigation API SPA'larda formalarni yuborishni qayta ishlash, sahifani to'liq qayta yuklashlarning oldini olish va yanada silliq foydalanuvchi tajribasini taqdim etish uchun ishlatilishi mumkin. Siz formani yuborish hodisasini ushlab olishingiz va URL manzilini yangilash hamda natijalarni sahifani to'liq qayta yuklamasdan ko'rsatish uchun `navigation.navigate()`'dan foydalanishingiz mumkin.

2. Asinxron operatsiyalar

Navigatsiya hodisalarini qayta ishlashda sizga asinxron operatsiyalarni bajarish kerak bo'lishi mumkin, masalan, API'dan ma'lumotlarni olish. `event.transition` xususiyati navigatsiya hodisasi bilan promisni bog'lash imkonini beradi, bu esa brauzerning sahifani yangilashdan oldin asinxron operatsiya tugashini kutishini ta'minlaydi. Yuqoridagi misollarga qarang.

3. Skrollni tiklash

Navigatsiya paytida skroll pozitsiyasini saqlab qolish yaxshi foydalanuvchi tajribasini ta'minlash uchun juda muhimdir. Navigation API tarixda oldinga yoki orqaga o'tishda skroll pozitsiyasini tiklash uchun mexanizmlarni taqdim etadi. Siz skroll pozitsiyasini saqlash va tiklash uchun `NavigationHistoryEntry`'ning `scroll` xususiyatidan foydalanishingiz mumkin.

4. Xatolarni qayta ishlash

Navigatsiya paytida yuzaga kelishi mumkin bo'lgan xatolarni, masalan, tarmoq xatolari yoki qayta ishlanmagan istisnolarni, qayta ishlash muhimdir. `navigateerror` hodisasi ushbu xatolarni oqilona ushlab olish va qayta ishlash imkonini beradi, bu esa ilovaning ishdan chiqishi yoki foydalanuvchiga xato xabarini ko'rsatishining oldini oladi.

5. Progressiv takomillashtirish

Navigation API yordamida SPA'lar qurayotganda, progressiv takomillashtirishni hisobga olish muhimdir. Ilovangiz Navigation API brauzer tomonidan qo'llab-quvvatlanmasa ham to'g'ri ishlashiga ishonch hosil qiling. Siz `navigation` obyektining mavjudligini tekshirish uchun funksiya aniqlashdan foydalanishingiz va agar kerak bo'lsa, an'anaviy marshrutizatsiya usullariga qaytishingiz mumkin.

An'anaviy marshrutizatsiya usullari bilan taqqoslash

SPA'lardagi an'anaviy marshrutizatsiya usullari ko'pincha `window.location` obyektini manipulyatsiya qilishga yoki `react-router` yoki `vue-router` kabi uchinchi tomon kutubxonalaridan foydalanishga tayanadi. Garchi bu usullar keng qo'llanilsa va yaxshi o'rnatilgan bo'lsa-da, ularning ba'zi cheklovlari bor:

• Sahifani to'liq qayta yuklashlar: `window.location`ni to'g'ridan-to'g'ri manipulyatsiya qilish sahifani to'liq qayta yuklashlarga olib kelishi mumkin, bu esa sekin va foydalanuvchi tajribasiga xalaqit berishi mumkin.
• Murakkablik: An'anaviy usullar bilan tarix va holatni boshqarish murakkab va xatolarga moyil bo'lishi mumkin, ayniqsa katta va murakkab ilovalarda.
• Samaradorlik yuklamasi: Uchinchi tomon marshrutizatsiya kutubxonalari, ayniqsa ilovangizning maxsus ehtiyojlari uchun optimallashtirilmagan bo'lsa, sezilarli darajada samaradorlik yuklamasini qo'shishi mumkin.

Navigation API marshrutizatsiya va tarixni boshqarish uchun yanada soddalashtirilgan, samarali va ko'p funksiyali yechimni taqdim etish orqali ushbu cheklovlarni bartaraf etadi. U sahifani to'liq qayta yuklashlarni yo'q qiladi, tarixni boshqarishni soddalashtiradi va navigatsiya hodisalari ustidan nozik nazoratni ta'minlaydi.

Brauzer mosligi

2024-yil oxiriga kelib, Navigation API zamonaviy brauzerlar, jumladan Chrome, Firefox, Safari va Edge'da yaxshi qo'llab-quvvatlanadi. Biroq, ishlab chiqarish ilovalarida Navigation API'ni qo'llashdan oldin Can I use kabi manbalarda eng so'nggi brauzer mosligi ma'lumotlarini tekshirish har doim yaxshi amaliyotdir. Agar eski brauzerlarni qo'llab-quvvatlash zarur bo'lsa, polifill yoki zaxira mexanizmidan foydalanishni o'ylab ko'ring.

Xulosa

Navigation API ilg'or marshrutizatsiya va tarixni boshqarish imkoniyatlariga ega zamonaviy, samarali SPA'lar yaratish uchun kuchli vositadir. API xususiyatlaridan foydalanib, ishlab chiquvchilar tezroq, silliqroq va qiziqarliroq foydalanuvchi tajribalarini yaratishlari mumkin. Dastlabki o'rganish jarayoni oddiyroq, eski usullarga qaraganda biroz qiyinroq bo'lishi mumkin bo'lsa-da, Navigation API'ning afzalliklari, ayniqsa murakkab ilovalarda, uni o'rganishga arziydigan sarmoyaga aylantiradi. Navigation API'ni qabul qiling va SPA'laringizning to'liq salohiyatini oching.

Qo'shimcha o'rganish

• MDN Web Hujjatlari: Navigation API
• WICG Navigation API spetsifikatsiyasi