Увод уАПИ-ји претраживача

Пејзаж веб развоја се брзо развија. Сваке године, претраживачи добијају нове могућности које могу поједноставити ваш процес кодирања. Са порастом модерних веб апликација, програмери имају приступ пакету моћних алата директно унутар претраживача, елиминишући потребу за прекомерним библиотекама и оквирима.

У овом чланку ћемо истражити10 недовољно коришћених АПИ-ја претраживачакоје вам могу помоћи да ефикасније решавате уобичајене проблеме. Зашто затрпати свој пројекат библиотекама када прегледач може да уради тежак посао?

Без обзира да ли сте искусан програмер или тек почињете, ови АПИ-ји би вас могли изненадити својом једноставношћу и снагом. Хајдемо одмах да видимо како ови алати могу побољшати ваше веб апликације.

1. АПИ за структурирани клон

Струцтуред Цлоне АПИ је мењач игре за копирање објеката. За многе програмере, копирање објеката је увек био тежак задатак, често захтевајући библиотеке или сложене функције. Помоћу овог АПИ-ја можете без напора да креирате дубоку копију објекта:

цонст цопи = струцтуредЦлоне(оригинал);

Ова једнолинија решава многа питања:

Рукује сложеним типовима података као што суМапа, Сет, иБлоб.
Управља кружним референцама без рушења кода.
Напомена: Не клонира функције, што је кључни аспект који треба запамтити.

На пример, размислите када треба да копирате сложени објекат који укључује угнежђене низове или објекте. Коришћење традиционалних метода као што је ЈСОН серијализација може довести до губитка података или грешака, посебно са кружним референцама. Струцтуред Цлоне АПИ елиминише ове недоумице, пружајући беспрекоран начин за дуплирање ваших података.

Подршка:Доступан у модерним прегледачима као што су Цхроме, Фирефок и Сафари, што га чини безбедним за употребу у производњи.

Практични савет: Када користите овај АПИ, увек проверите компатибилност претраживача да бисте били сигурни да ваша апликација ради доследно у различитим окружењима.

2. АПИ за перформансе

Када је реч о мерењу перформанси, АПИ за перформансе се често занемарује. Уместо да се ослањате на алатке треће стране, можете да користите овај АПИ за праћење и упоређивање перформанси вашег кода:

перформанце.марк("старт");
// код за мерење
перформанце.марк("крај");
перформанце.меасуре("цалц", "старт", "енд");
цонсоле.лог(перформанце.гетЕнтриесБиНаме("цалц"));

Ово вам може помоћи да одредите:

Које функције су брже.
Ако су оптимизације заиста корисне.
Било да је Воркер или ВАСМ вредно имплементације.

На пример, ако развијате сложену веб апликацију која обрађује корисничке податке, можете да користите АПИ за перформансе да бисте мерили одређене функције или карактеристике. Мерењем времена извршења, можете идентификовати уска грла и оптимизовати у складу са тим.

Поред тога, Перформанце АПИ вам омогућава да евидентирате детаљне метрике учинка, што може бити од непроцењиве вредности за отклањање грешака или оптимизацију ваше апликације. Ове метрике можете да видите у алаткама за програмере прегледача на картици перформанси.

Подршка:Одлично ради у свим модерним претраживачима.

Практични савет: Користите АПИ за перформансе током развоја да бисте прикупили податке о перформансама вашег кода. Ове информације могу водити ваше напоре у оптимизацији и побољшати корисничко искуство.

3. АПИ за видљивост странице

Да ли сте се икада запитали шта се дешава када корисник промени картицу? Помоћу АПИ-ја за видљивост странице можете да откријете када је ваша картица активна или не:

доцумент.аддЕвентЛистенер("висибилитицханге", () => {
  иф (доцумент.хидден) {
    видео.паусе();
  }
});

Овај АПИ је невероватно користан за:

Кључни АПИ-ји претраживача које треба знати

📦

АПИ за структурирани клон
Копирајте сложене објекте без напора.

📈

АПИ за перформансе
Измерите и побољшајте перформансе веба.

👀

АПИ за видљивост странице
Откријте када је страница видљива.

📏

РесизеОбсервер
Одговорите на промене величине елемента.

🔍

Посматрач раскрсница
Пратите видљивост елемената.

Паузирање видео снимака када корисник није ангажован.
Заустављање непотребних захтева за анкетирање ради побољшања перформанси.
Смањење употребе ЦПУ-а ради уштеде батерије на мобилним уређајима.

На пример, ако развијате апликацију за стриминг видео записа, можете да користите АПИ за видљивост странице да паузирате видео када корисник напусти картицу. Ово не само да побољшава корисничко искуство, већ и чува пропусни опсег и ресурсе сервера.

Штавише, можете да примените аналитичке функције које прате ангажовање корисника на основу промена видљивости. Ови подаци вам могу помоћи да разумете како корисници остварују интеракцију са вашом апликацијом и које функције су најзанимљивије.

Подршка:Компатибилан са свим модерним претраживачима.

Практични савет: Увек тестирајте функцију видљивости у различитим сценаријима, као што је промена картица, минимизирање прегледача или прелазак на другу апликацију да бисте се уверили да се понаша како се очекује.

4. РесизеОбсервер

За прилагодљив дизајн, праћење величина елемената може бити проблем. РесизеОбсервер АПИ вам омогућава да пратите промене у величини елемента:

цонст ро = нови РесизеОбсервер(ентриес => {
  за (константни унос уноса) {
    цонсоле.лог(ентри.цонтентРецт.видтх);
  }
});
ро.обсерве(елемент);

Овај АПИ је олакшање за програмере који су се у прошлости бавили гломазном логиком промене величине. Сада, претраживач може то да уради уместо вас!

Замислите да направите контролну таблу са различитим виџетима који морају да прилагоде свој изглед на основу величине прозора за приказ. РесизеОбсервер вам може помоћи да откријете када корисник промени величину прозора или промени величину одређеног елемента, омогућавајући вам да динамички преуредите свој кориснички интерфејс.

Подршка:Широко доступан у модерним претраживачима.

Практични савет: Користите РесизеОбсервер да побољшате корисничко искуство тако што ћете обезбедити да изглед ваше апликације течно реагује на промене у величини. Ово је посебно корисно за прилагодљиве дизајне где се елементи морају неприметно прилагођавати.

5. Интерсецтион Обсервер АПИ

Још један моћан алат је Интерсецтион Обсервер АПИ. Ово вам омогућава да надгледате када елемент улази или излази из прозора за приказ:

цонст обсервер = нев ИнтерсецтионОбсервер(ентриес => {
  ентриес.форЕацх(ентри => {
    иф (ентри.исИнтерсецтинг) {
      // Учитај садржај или активирај анимације
    }
  });
});
обсервер.обсерве(таргетЕлемент);

Случајеви употребе укључују:

Лење учитавање слика за боље перформансе и брже време учитавања странице.
Покретање анимација када се елементи појаве за занимљивије корисничко искуство.
Побољшање корисничког искуства учитавањем садржаја по потреби, смањујући почетно време учитавања.

На пример, ако имате дугачак чланак са сликама, можете учитати слике само када се спремају да уђу у оквир за приказ. Ово смањује почетно време учитавања и штеди пропусни опсег, посебно за кориснике мобилних уређаја.

Поред тога, Интерсецтион Обсервер АПИ може помоћи у аналитици праћењем колико корисника скролује до одређених делова ваше веб странице, дајући вам драгоцене увиде у ангажовање корисника.

Подршка:Доступан у модерним претраживачима.

Практични савет: Имплементирајте Интерсецтион Обсервер АПИ за оптимизацију перформанси, посебно у апликацијама са великим садржајем. Ово ће вам помоћи да креирате лакше искуство за кориснике, а истовремено ћете сачувати ресурсе.

6. Дохвати АПИ

Прошло је време КСМЛХттпРекуест-а. Фетцх АПИ поједностављује процес прављења мрежних захтева:

дохвати (урл)
  .тхен(респонсе => респонсе.јсон())
  .тхен(дата => цонсоле.лог(дата));

Са овим АПИ-јем можете лако:

Руковати различитим типовима одговора, као што су ЈСОН, текст и блобс.
Користите асинц/аваит за чишћи и читљивији код.
Подесите прилагођена заглавља за своје захтеве, чинећи их флексибилним за различите АПИ-је.

На пример, можда ћете морати да преузмете корисничке податке из РЕСТ АПИ-ја. Са Фетцх АПИ-јем можете написати концизан и читљив код који рукује асинхроном природом мрежних захтева без сложености повратних позива.

Штавише, Фетцх АПИ подржава обећања, што олакшава рад са уланчаним захтевима или елегантно руковање грешкама. Такође можете лако да рукујете различитим статусима одговора, пружајући робустан начин управљања мрежним интеракцијама.

Подршка:Подржавају сви модерни претраживачи.

Практични савет: Користите Фетцх АПИ за све ваше мрежне захтеве да бисте побољшали читљивост и могућност одржавања. Не заборавите да правилно поступате са грешкама како бисте обезбедили неометано корисничко искуство.

7. АПИ за веб складиште

Чување корисничких подешавања или података о сесији никада није било лакше са АПИ-јем за веб складиште. Пружа две главне опције складиштења:

лоцалСторагеза трајне податке који преживе освежавање странице.
сессионСторагеза привремене податке који трају само за време трајања сесије странице.

Пример:

Коришћење АПИ-ја за структуриране клонове

Направите оригинални објекат

Дефинишите објекат који желите да копирате.

Позовите струцтуредЦлоне()

Користите АПИ за клонирање објекта.

Руковати сложеним типовима

Подржава Мап, Сет и Блоб.

Избегавајте клонирање функција

Запамтите да не клонира функције.

лоцалСтораге.сетИтем('кеи', 'валуе');
цонст валуе = лоцалСтораге.гетИтем('кеи');

Овај АПИ је посебно користан за:

Чување корисничких подешавања, као што су подешавања теме или избор језика.
Управљање подацима о сесији, као што су токени за аутентификацију корисника.
Праћење артикала у корпи за куповину без потребе за решењем на страни сервера.

На пример, ако правите сајт за е-трговину, можете да користите АПИ за веб складиште да запамтите ставке које корисник додаје у своју корпу, чак и ако напусте страницу или освеже страницу.

Подршка:Подржавају сви модерни претраживачи.

Практични савет: Користите лоцалСтораге за податке које желите да задржите током свих сесија, а сессионСтораге за податке који су релевантни само током једне посете. Увек имајте на уму безбедносне импликације када чувате осетљиве информације.

8. АПИ за веб обавештења

АПИ за веб обавештења омогућава веб апликацијама да приказују обавештења корисницима. Ова функција може побољшати ангажовање корисника тако што ће их информисати чак и када не користе активно вашу апликацију:

иф (Нотифицатион.пермиссион !== "додељено") {
  Нотифицатион.рекуестПермиссион();
}

цонст нотифицатион = ново обавештење("Здраво!", {
  тело: "Ово је порука обавештења!",
});

Случајеви употребе укључују:

Упозорење корисника о новим порукама или ажурирањима у апликацији за ћаскање.
Обавештавање корисника о важним догађајима, као што су подсетници или рокови.
Пружање повратних информација након радње корисника, као што је слање обрасца.

На пример, ако развијате апликацију за размену порука, можете да користите АПИ за веб обавештења да обавестите кориснике о новим порукама док прегледају друге картице или апликације.

Примена обавештења може значајно побољшати корисничко искуство тако што ће обезбедити да корисници буду информисани о важним ажурирањима без потребе да стално проверавају апликацију.

Подршка:Доступан у већини модерних претраживача.

Практични савет: Увек тражите дозволу корисника пре слања обавештења да бисте обезбедили позитивно корисничко искуство. Обезбедите смислен садржај у обавештењима да бисте подстакли ангажовање корисника.

9. Услужни радници

Сервице Воркерс су моћна функција која вам омогућава да покренете скрипте у позадини, одвојено од веб странице. Ово омогућава функције као што су подршка ван мреже и синхронизација у позадини:

селф.аддЕвентЛистенер('инсталл', евент => {
  // Извршите кораке инсталације
});

селф.аддЕвентЛистенер('фетцх', евент => {
  евент.респондВитх(
    цацхес.матцх(евент.рекуест)
      .тхен(респонсе => {
        повратни одговор || дохвати(догађај.захтев);
      })
  );
});

Са услужним радницима можете:

Кеширајте ресурсе да би ваша апликација била доступна ван мреже.
Пресретните мрежне захтеве за послуживање кешираног садржаја или резервних одговора.
Омогућите пусх обавештења да бисте задржали ангажовање корисника.

На пример, ако правите прогресивну веб апликацију (ПВА), сервисни радници су од суштинског значаја за пружање беспрекорног искуства ван мреже. Корисници могу да наставе да комуницирају са вашом апликацијом чак и без интернет везе, а све промене ће се синхронизовати када поново буду онлајн.

Подршка:Подржано у модерним претраживачима, али увек проверите компатибилност пре имплементације.

Практични савет: Користите АПИ за кеширање у оквиру Сервице Воркерс-а да бисте ускладиштили основне ресурсе и побољшали време учитавања за поновне кориснике. Уверите се да су ваши сервисери регистровани и исправно активирани за оптималан учинак.

10. АПИ за веб дељење

Веб Схаре АПИ омогућава корисницима да деле садржај из ваше веб апликације са другим апликацијама на свом уређају, као што су друштвени медији:

навигатор.схаре({
  титле: 'АПИ за веб дељење',
  текст: 'Погледајте овај садржај!',
  урл: 'хттпс://екампле.цом',
}).тхен(() => {
  цонсоле.лог('Садржај је успешно дељен!');
}).цатцх((грешка) => {
  цонсоле.еррор('Грешка дељења:', грешка);
});

Кључне карактеристике АПИ-ја за веб дељење укључују:

Лако дељење текста, УРЛ адреса и других формата података.
Изворни дијалог за дељење који се интегрише са корисниковим уређајем.
Побољшано ангажовање корисника подстицањем дељења.

На пример, ако имате пост на блогу, можете дозволити корисницима да га деле на својим друштвеним медијима директно са ваше веб странице. Ова функција може значајно повећати досег и ангажовање вашег садржаја.

Подршка:Доступан у већини модерних претраживача са подршком за мобилне уређаје.

Практични савет: Пре употребе АПИ-ја за веб дељење, проверите да ли га уређај корисника подржава. Обезбедите резервну опцију за дељење ако АПИ није доступан да бисте обезбедили беспрекорно искуство.

Закључак

Коришћење АПИ-ја претраживача може значајно побољшати ваше веб апликације без потребе за додатним библиотекама. У овом чланку смо покрили 10 моћних АПИ-ја, укључујући АПИ за структуриране клонове, АПИ за перформансе и још много тога. Сваки од ових алата може помоћи да се поједностави ваш код и побољша перформансе.

Да ли сте спремни да своје вештине веб развоја подигнете на следећи ниво? Истражите ове АПИ-је у свом следећем пројекту и видите како могу да раде за вас. За даље читање о алатима који могу побољшати вашу продуктивност, погледајте нашепретварач слике у ГИФибесплатни видео конвертер у МП3.

За више информација о најновијим достигнућима у веб технологијама, посетитеОпенАИиХуггинг Фаце.