Ievads arPārlūka API

Tīmekļa izstrādes ainava strauji attīstās. Katru gadu pārlūkprogrammas iegūst jaunas iespējas, kas var vienkāršot kodēšanas procesu. Līdz ar moderno tīmekļa lietojumprogrammu attīstību izstrādātājiem ir piekļuve jaudīgu rīku komplektam tieši pārlūkprogrammā, tādējādi novēršot nepieciešamību pēc pārmērīgām bibliotēkām un ietvariem.

Šajā rakstā mēs izpētīsim10 nepietiekami izmantotas pārlūkprogrammas APIkas var palīdzēt efektīvāk atrisināt izplatītas problēmas. Kāpēc pārblīvēt savu projektu ar bibliotēkām, ja pārlūkprogramma var veikt visu nepieciešamo?

Neatkarīgi no tā, vai esat pieredzējis izstrādātājs vai tikai sācējs, šīs API var jūs pārsteigt ar savu vienkāršību un jaudu. Iedziļināsimies un redzēsim, kā šie rīki var uzlabot jūsu tīmekļa lietojumprogrammas.

1. Strukturētā klona API

Structured Clone API ir spēļu mainītājs objektu kopēšanai. Daudziem izstrādātājiem objektu kopēšana vienmēr ir bijis grūts uzdevums, bieži vien ir nepieciešamas bibliotēkas vai sarežģītas funkcijas. Izmantojot šo API, varat bez pūlēm izveidot dziļu objekta kopiju:

const kopija = strukturētaClone(oriģināls);

Šis viena oderējums atrisina daudzas problēmas:

Apstrādā tādus sarežģītus datu tipus kāKarte, Iestatīt, unBlob.
Pārvalda cirkulārās atsauces, neveicot koda avāriju.
Piezīme. Tas neklonē funkcijas, kas ir ļoti svarīgi atcerēties.

Piemēram, apsveriet, kad jums ir jākopē sarežģīts objekts, kas ietver ligzdotus masīvus vai objektus. Tradicionālo metožu, piemēram, JSON serializācijas, izmantošana var izraisīt datu zudumu vai kļūdas, jo īpaši ar apļveida atsaucēm. Structured Clone API novērš šīs bažas, nodrošinot netraucētu veidu, kā dublēt jūsu datus.

Atbalsts:Pieejams modernās pārlūkprogrammās, piemēram, Chrome, Firefox un Safari, padarot to drošu ražošanas lietošanai.

Praktisks padoms. Lietojot šo API, vienmēr pārbaudiet pārlūkprogrammas saderību, lai nodrošinātu, ka lietojumprogramma darbojas konsekventi dažādās vidēs.

2. Performance API

Runājot par veiktspējas mērīšanu, Performance API bieži tiek ignorēta. Tā vietā, lai paļautos uz trešās puses rīkiem, varat izmantot šo API, lai izsekotu un salīdzinātu sava koda veiktspēju.

performance.mark("sākt");
// kods mērīšanai
performance.mark("beigas");
performance.measure("calc", "start", "end");
console.log(performance.getEntriesByName("calc"));

Tas var palīdzēt noteikt:

Kuras funkcijas ir ātrākas.
Ja optimizācija patiešām ir izdevīga.
Neatkarīgi no tā, vai ir vērts ieviest darbinieku vai WASM.

Piemēram, ja izstrādājat sarežģītu tīmekļa lietojumprogrammu, kas apstrādā lietotāja datus, varat izmantot Performance API, lai salīdzinātu noteiktas funkcijas vai līdzekļus. Mērot izpildes laiku, varat noteikt vājās vietas un attiecīgi optimizēt.

Turklāt Performance API ļauj reģistrēt detalizētus veiktspējas rādītājus, kas var būt nenovērtējami lietojumprogrammas atkļūdošanā vai optimizēšanā. Šos rādītājus varat skatīt pārlūkprogrammas izstrādātāja rīkos zem veiktspējas cilnes.

Atbalsts:Lieliski darbojas visās mūsdienu pārlūkprogrammās.

Praktisks padoms: izstrādes laikā izmantojiet Performance API, lai apkopotu datus par koda veiktspēju. Šī informācija var vadīt jūsu optimizācijas centienus un uzlabot lietotāja pieredzi.

3. Lapas redzamības API

Vai esat kādreiz domājis, kas notiek, kad lietotājs pārslēdz cilnes? Izmantojot lapas redzamības API, varat noteikt, kad jūsu cilne ir aktīva vai nē.

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    video.pause();
  }
});

Šī API ir neticami noderīga:

Galvenās pārlūkprogrammas API, kas jāzina

📦

Strukturētā klona API
Bez piepūles kopējiet sarežģītus objektus.

📈

Veiktspējas API
Izmēriet un uzlabojiet tīmekļa veiktspēju.

👀

Lapas redzamības API
Noteikt, kad lapa ir redzama.

📏

ResizeObserver
Reaģējiet uz elementa izmēra izmaiņām.

🔍

Krustojuma novērotājs
Uzraudzīt elementu redzamību.

Videoklipu apturēšana, kad lietotājs nav iesaistīts.
Nevajadzīgu aptauju pieprasījumu apturēšana, lai uzlabotu veiktspēju.
CPU izmantošanas samazināšana, lai taupītu akumulatora darbības laiku mobilajās ierīcēs.

Piemēram, ja izstrādājat video straumēšanas lietojumprogrammu, varat izmantot lapas redzamības API, lai apturētu video, kad lietotājs dodas prom no cilnes. Tas ne tikai uzlabo lietotāja pieredzi, bet arī ietaupa joslas platumu un servera resursus.

Turklāt varat ieviest analītikas funkcijas, kas izseko lietotāju iesaisti, pamatojoties uz redzamības izmaiņām. Šie dati var palīdzēt saprast, kā lietotāji mijiedarbojas ar jūsu lietojumprogrammu un kuras funkcijas ir vispievilcīgākās.

Atbalsts:Savietojams ar visām mūsdienu pārlūkprogrammām.

Praktisks padoms. Vienmēr pārbaudiet redzamības funkciju dažādos scenārijos, piemēram, pārslēdzot cilnes, minimizējot pārlūkprogrammu vai pārslēdzoties uz citu lietojumprogrammu, lai nodrošinātu, ka tā darbojas, kā paredzēts.

4. ResizeObserver

Atsaucīgam dizainam elementu izmēru sekošana var radīt grūtības. ResizeObserver API ļauj pārraudzīt elementa lieluma izmaiņas:

const ro = new ResizeObserver(ieraksti => {
  for (pastāvīgā ierakstu ievade) {
    console.log(entry.contentRect.width);
  }
});
ro.novērot(elements);

Šī API ir atvieglojums izstrādātājiem, kuri iepriekš ir saskārušies ar apgrūtinošu izmēru maiņas loģiku. Tagad pārlūkprogramma to var paveikt jūsu vietā!

Iedomājieties, ka veidojat informācijas paneli ar dažādiem logrīkiem, kuriem ir jāpielāgo to izkārtojums, pamatojoties uz skata loga izmēru. ResizeObserver var palīdzēt noteikt, kad lietotājs maina loga izmēru vai maina noteikta elementa lielumu, ļaujot dinamiski pārkārtot lietotāja interfeisu.

Atbalsts:Plaši pieejams mūsdienu pārlūkprogrammās.

Praktisks padoms. Izmantojiet ResizeObserver, lai uzlabotu lietotāja pieredzi, nodrošinot, ka jūsu lietojumprogrammas izkārtojums vienmērīgi reaģē uz lieluma izmaiņām. Tas ir īpaši izdevīgi atsaucīgiem dizainiem, kur elementiem ir jāpielāgojas nemanāmi.

5. Intersection Observer API

Vēl viens spēcīgs rīks ir Intersection Observer API. Tas ļauj pārraudzīt, kad elements ieiet skata logā vai iziet no tā:

const novērotājs = new IntersectionObserver(ieraksti => {
  entries.forEach(ieraksts => {
    if (entry.isIntersecting) {
      // Ielādējiet saturu vai aktivizējiet animācijas
    }
  });
});
novērotājs.novērot(targetElement);

Lietošanas gadījumi ietver:

Slinka attēlu ielāde, lai nodrošinātu labāku veiktspēju un ātrāku lapas ielādes laiku.
Animāciju aktivizēšana, kad elementi nonāk redzeslokā, lai nodrošinātu lietotājam saistošāku pieredzi.
Lietotāju pieredzes uzlabošana, pēc vajadzības ielādējot saturu, samazinot sākotnējo ielādes laiku.

Piemēram, ja jums ir garš raksts ar attēliem, varat ielādēt attēlus tikai tad, kad tie gatavojas iekļūt skata logā. Tas samazina sākotnējo ielādes laiku un ietaupa joslas platumu, īpaši mobilo ierīču lietotājiem.

Turklāt Intersection Observer API var palīdzēt veikt analīzi, izsekojot, cik lietotāju ritina līdz noteiktām jūsu tīmekļa lapas sadaļām, sniedzot vērtīgu ieskatu lietotāju iesaistīšanā.

Atbalsts:Pieejams mūsdienu pārlūkprogrammās.

Praktisks padoms: ieviešiet Intersection Observer API veiktspējas optimizēšanai, īpaši lietojumprogrammās, kurās ir daudz satura. Tas palīdzēs jums radīt vienmērīgāku pieredzi lietotājiem, vienlaikus taupot resursus.

6. API

XMLHttpRequest laiki ir pagājuši. Programma Fetch API vienkāršo tīkla pieprasījumu veikšanas procesu.

atnest(url)
  .then(response => response.json())
  .then(dati => konsole.log(dati));

Izmantojot šo API, jūs varat viegli:

Apstrādājiet dažādus atbilžu veidus, piemēram, JSON, tekstu un blobs.
Izmantojiet async/wait, lai kods būtu tīrāks un lasāmāks.
Iestatiet pielāgotas galvenes saviem pieprasījumiem, padarot to elastīgu dažādām API.

Piemēram, jums, iespējams, būs jāiegūst lietotāja dati no REST API. Izmantojot Fetch API, varat rakstīt īsu un lasāmu kodu, kas apstrādā tīkla pieprasījumu asinhrono raksturu bez atzvanīšanas sarežģītības.

Turklāt Fetch API atbalsta solījumus, atvieglojot darbu ar ķēdē savienotiem pieprasījumiem vai graciozu kļūdu apstrādi. Varat arī viegli apstrādāt dažādus atbilžu statusus, nodrošinot stabilu veidu, kā pārvaldīt tīkla mijiedarbību.

Atbalsts:Atbalsta visas mūsdienu pārlūkprogrammas.

Praktisks padoms. Izmantojiet Fetch API visiem tīkla pieprasījumiem, lai uzlabotu lasāmību un apkopi. Atcerieties pareizi rīkoties ar kļūdām, lai nodrošinātu vienmērīgu lietotāja pieredzi.

7. Web Storage API

Lietotāju preferenču vai sesijas datu saglabāšana nekad nav bijusi tik vienkārša, izmantojot Web Storage API. Tas nodrošina divas galvenās uzglabāšanas iespējas:

vietējāStoragepastāvīgiem datiem, kas saglabājas pēc lapas atsvaidzināšanas.
sessionStoragepagaidu datiem, kas ilgst tikai lapas sesijas laiku.

Piemērs:

Izmantojot Structured Clone API

Izveidojiet oriģinālo objektu

Definējiet kopējamo objektu.

Izsaukt strukturētuClone()

Izmantojiet API, lai klonētu objektu.

Rokturis sarežģīti veidi

Atbalsta Map, Set un Blob.

Izvairieties no funkciju klonēšanas

Atcerieties, ka tas neklonē funkcijas.

localStorage.setItem('key', 'value');
const vērtība = localStorage.getItem('key');

Šī API ir īpaši noderīga:

Lietotāja preferenču, piemēram, motīvu iestatījumu vai valodas izvēles, saglabāšana.
Sesijas datu, piemēram, lietotāju autentifikācijas pilnvaru, pārvaldība.
Sekojiet līdzi precēm iepirkumu grozā, neizmantojot servera puses risinājumu.

Piemēram, ja veidojat e-komercijas vietni, varat izmantot Web Storage API, lai atcerētos preces, ko lietotājs pievieno savam grozam, pat ja viņš dodas prom vai atsvaidzina lapu.

Atbalsts:Atbalsta visas mūsdienu pārlūkprogrammas.

Praktisks padoms. Izmantojiet localStorage datiem, kurus vēlaties saglabāt visās sesijās, un sessionStorage datiem, kas ir svarīgi tikai viena apmeklējuma laikā. Uzglabājot sensitīvu informāciju, vienmēr paturiet prātā ietekmi uz drošību.

8. Web Notifications API

Web paziņojumu API ļauj tīmekļa lietojumprogrammām rādīt paziņojumus lietotājiem. Šī funkcija var uzlabot lietotāju iesaisti, informējot viņus pat tad, ja viņi aktīvi neizmanto jūsu lietojumprogrammu.

if (Notification.permission !== "piešķirts") {
  Notification.requestPermission();
}

const notification = new Notification("Sveiks!", {
  body: "Šis ir paziņojuma ziņojums!",
});

Lietošanas gadījumi ietver:

Lietotāju brīdināšana par jauniem ziņojumiem vai atjauninājumiem tērzēšanas lietojumprogrammā.
Lietotāju paziņošana par svarīgiem notikumiem, piemēram, atgādinājumiem vai termiņiem.
Atsauksmju sniegšana pēc lietotāja darbības, piemēram, veidlapu iesniegšanas.

Piemēram, ja izstrādājat ziņojumapmaiņas lietotni, varat izmantot Web Notifications API, lai informētu lietotājus par jauniem ziņojumiem, kamēr viņi pārlūko citas cilnes vai lietojumprogrammas.

Paziņojumu ieviešana var ievērojami uzlabot lietotāja pieredzi, nodrošinot, ka lietotāji ir informēti par svarīgiem atjauninājumiem bez nepieciešamības pastāvīgi pārbaudīt lietojumprogrammu.

Atbalsts:Pieejams lielākajā daļā mūsdienu pārlūkprogrammu.

Praktisks padoms. Lai nodrošinātu pozitīvu lietotāja pieredzi, pirms paziņojumu nosūtīšanas vienmēr lūdziet lietotāja atļauju. Nodrošiniet jēgpilnu saturu paziņojumos, lai veicinātu lietotāju iesaistīšanos.

9. Servisa darbinieki

Service Workers ir jaudīgs līdzeklis, kas ļauj palaist skriptus fonā atsevišķi no tīmekļa lapas. Tas iespējo tādas funkcijas kā bezsaistes atbalsts un sinhronizācija fonā:

self.addEventListener('install', event => {
  // Veiciet instalēšanas darbības
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        atgriezt atbildi || atnest(notikums.pieprasījums);
      })
  );
});

Izmantojot pakalpojumu darbiniekus, jūs varat:

Saglabājiet resursus kešatmiņā, lai jūsu lietojumprogramma būtu pieejama bezsaistē.
Pārtveriet tīkla pieprasījumus, lai apkalpotu kešatmiņā saglabāto saturu vai rezerves atbildes.
Iespējojiet pašpiegādes paziņojumus, lai lietotāji būtu ieinteresēti.

Piemēram, ja veidojat progresīvo tīmekļa lietotni (PWA), pakalpojumu darbinieki ir būtiski, lai nodrošinātu netraucētu bezsaistes pieredzi. Lietotāji var turpināt mijiedarboties ar jūsu lietojumprogrammu pat bez interneta savienojuma, un visas izmaiņas tiks sinhronizētas, tiklīdz viņi atkal būs tiešsaistē.

Atbalsts:Atbalstīts mūsdienu pārlūkprogrammās, taču pirms ieviešanas vienmēr pārbaudiet saderību.

Praktisks padoms. Izmantojiet kešatmiņas API savos pakalpojumu darbiniekiem, lai saglabātu būtiskus resursus un uzlabotu atkārtoto lietotāju ielādes laiku. Pārliecinieties, vai jūsu pakalpojumu darbinieki ir pareizi reģistrēti un aktivizēti optimālai darbībai.

10. Web Share API

Web Share API ļauj lietotājiem koplietot saturu no jūsu tīmekļa lietojumprogrammas ar citām lietojumprogrammām savā ierīcē, piemēram, sociālajos saziņas līdzekļos:

navigator.share({
  nosaukums: "Web Share API",
  teksts: 'Apskatiet šo saturu!',
  url: 'https://example.com',
}).hen(() => {
  console.log('Saturs veiksmīgi kopīgots!');
}).catch((kļūda) => {
  console.error('Kļūdas kopīgošana:', kļūda);
});

Galvenās Web Share API funkcijas ietver:

Vienkārša teksta, URL un citu datu formātu kopīgošana.
Vietējais kopīgošanas dialoglodziņš, kas integrējas ar lietotāja ierīci.
Uzlabota lietotāju iesaistīšanās, veicinot kopīgošanu.

Piemēram, ja jums ir emuāra ziņa, varat ļaut lietotājiem kopīgot to savos sociālajos saziņas līdzekļos tieši no jūsu vietnes. Šī funkcija var ievērojami palielināt jūsu satura sasniedzamību un piesaisti.

Atbalsts:Pieejams lielākajā daļā mūsdienu pārlūkprogrammu ar mobilo atbalstu.

Praktisks padoms. Pirms Web Share API lietošanas pārbaudiet, vai lietotāja ierīce to atbalsta. Nodrošiniet koplietošanas rezerves opciju, ja API nav pieejama, lai nodrošinātu nevainojamu pieredzi.

Secinājums

Izmantojot pārlūkprogrammas API, var ievērojami uzlabot jūsu tīmekļa lietojumprogrammas, neizmantojot papildu bibliotēkas. Šajā rakstā mēs apskatījām 10 jaudīgus API, tostarp Structured Clone API, Performance API un citus. Katrs no šiem rīkiem var palīdzēt vienkāršot kodu un uzlabot veiktspēju.

Vai esat gatavs pacelt savas tīmekļa izstrādes prasmes nākamajā līmenī? Izpētiet šīs API savā nākamajā projektā un uzziniet, kā tās var jums palīdzēt. Lai uzzinātu vairāk par rīkiem, kas var uzlabot jūsu produktivitāti, skatiet mūsuattēlu uz GIF pārveidotājuunbezmaksas video uz MP3 pārveidotājs.

Lai iegūtu papildinformāciju par jaunākajiem sasniegumiem tīmekļa tehnoloģijās, apmeklējiet vietniOpenAIunApskāva seja.