Ar kada nors reikėjo paleisti kodą naršyklėje, kuri užtruko tiek ilgai, kol programa kurį laiką nereaguoja? Naudodami HTML5 žiniatinklio darbuotojus jums niekada nebereikės to patirti.

Žiniatinklio darbuotojai leidžia atskirti ilgai veikiantį kodą ir paleisti jį nepriklausomai nuo kito puslapyje veikiančio kodo. Tai užtikrina, kad jūsų vartotojo sąsaja reaguoja net atliekant sudėtingas operacijas.

Kas yra žiniatinklio darbuotojai?

Tradiciškai „JavaScript“ yra vienos gijos kalba. Tai reiškia, kad niekas kitas negali veikti, kol veikia viena kodo dalis. Pavyzdžiui, jei turite kodą, bandantį animuoti DOM elementą, kodas, bandantis pakeisti kintamąjį, turi palaukti, kol animacija baigsis, kad būtų galima paleisti.

Žiniatinklio darbuotojai yra „JavaScript“ failai, kurie vykdomi atskiroje gijoje be tiesioginės prieigos prie DOM.

Vienas iš būdų galvoti apie žiniatinklio darbuotojus yra tai, kad tai yra kodo dalys, kurių paleidimas užtrunka daug laiko, todėl suteikiate juos naršyklei vykdyti fone. Kadangi šis kodas dabar veikia fone, jis neturi įtakos „JavaScript“, atsakingai už jūsų tinklalapį.

instagram viewer

Kaip šalutinis poveikis, jis nebegali tiesiogiai sąveikauti su likusiu jūsų kodu, todėl žiniatinklio darbuotojai neturi prieigos prie DOM. Tačiau vis dar yra daug kitų naršyklės API, įskaitant WebSocket ir Fetch API.

Vis dėlto žiniatinklio darbuotojai nėra visiškai atskirti nuo pagrindinės gijos. Kai darbuotojui reikia susisiekti su pagrindine gija, jis gali išsiųsti pranešimą, o pagrindinė gija gali išsiųsti savo pranešimą.

Kodėl žiniatinklio darbuotojai?

Prieš žiniatinklio darbuotojus vienintelis būdas paleisti „JavaScript“, kuriam reikėjo daug laiko naršyklėje, buvo:

  • Sutikite, kad puslapis kurį laiką nereaguos.
  • Sulaužykite tą kodą asinchroniniai gabalai.

Kadangi nereaguojantis puslapis paprastai yra bloga vartotojo patirtis, galite pasirinkti asinchroninę parinktį. Rašant kodą tokiu būdu, jis yra padalintas į mažesnes dalis, kurias naršyklė gali paleisti, kol netvarko vartotojo sąsajos. Dalys turi būti pakankamai mažos, kad jei reikia atnaujinti vartotojo sąsają, naršyklė galėtų užbaigti dabartinės dalies vykdymą ir pasirūpinti vartotojo sąsaja.

Prie HTML5 buvo įtraukti žiniatinklio darbuotojai, siekiant pasiūlyti geresnį šios problemos sprendimą. Užuot priversti jus kūrybiškai naudoti asinchroninį kodą, jie leidžia aiškiai atskirti funkciją, kad ji veiktų atskiroje gijoje.

Tai palengvino kūrėjams tokio kodo rašymą ir pagerino vartotojo patirtį.

Naudojimo atvejai žiniatinklio darbuotojams

Bet kuri programa, kuriai reikia daug skaičiavimo kliento pusėje, gali būti naudinga žiniatinklio darbuotojams.

Tarkime, kad jūsų programa nori sugeneruoti naudojimo ataskaitą ir saugo visus kliento duomenis dėl privatumo.

Kad sugeneruotų tą ataskaitą, jūsų žiniatinklio programa turi nuskaityti duomenis, atlikti skaičiavimus, sutvarkyti rezultatus ir pateikti juos vartotojui.

Jei bandysite tai padaryti pagrindinėje gijoje, vartotojas visiškai negalės naudoti programos, kol programa apdoros duomenis. Vietoj to galite perkelti dalį arba visą kodą į žiniatinklio darbuotoją. Tai leidžia vartotojui toliau naudoti programą, kol atliekami skaičiavimai.

Kaip naudoti žiniatinklio darbuotojus „JavaScript“.

The Web Worker API apibrėžia, kaip naudoti žiniatinklio darbuotojus. Naudojant šią API reikia sukurti Worker objektą su Worker konstruktoriumi, pavyzdžiui:

tegul newWorker = Darbuotojas ('darbuotojas.js');

The Darbininkas konstruktorius priima JavaScript failo pavadinimą kaip savo parametrą ir paleidžia failą naujoje gijoje. Jis grąžina darbuotojo objektą, kad pagrindinė gija galėtų sąveikauti su darbuotojo gija.

Darbuotojai bendrauja su pagrindine gija siųsdami pranešimus pirmyn ir atgal. Jūs naudojate postMessage funkcija siųsti įvykius tarp darbuotojo ir pagrindinės gijos. Naudoti žinute įvykių klausytojas, kad galėtumėte klausytis kitos šalies pranešimų.

Štai kodo pavyzdys. Pirma, pagrindinė tema gali atrodyti taip:

leisti darbuotojas = naujas Darbuotojas („darbininkas.js“)
worker.postMessage('Ei!')
darbuotojas.onmessage = funkcija(e) {
 console.log('Darbininko siūlas sako', el. duomenys)
}

Ši pagrindinė gija sukuria darbuotojo objektą iš worker.js, tada siunčia jam pranešimą su darbuotojas.postMessage. Tada jis apibrėžia įvykių klausytoją, savo koncepciją panašų į a DOM įvykių klausytojas. Įvykis suaktyvinamas kiekvieną kartą, kai darbuotojas išsiunčia pranešimą atgal į pagrindinę giją, o tvarkytojas įrašo darbuotojo pranešimą į konsolę.

Darbuotojo viduje esantis kodas (worker.js) turi vieną užduotį:

pranešimas = funkcija(e) {
leisti pranešimas = e.duomenys;
 console.log('Sakė pagrindinė tema', žinutė);
 postMessage('Sveiki!')
}

Jis išklauso visus pranešimus, siunčiamus iš pagrindinės gijos, įrašo pranešimą į konsolę ir siunčia grįžtamąjį pranešimą atgal į pagrindinę giją.

Visi šiame pavyzdyje pateikti pranešimai buvo eilutės, bet tai nėra reikalavimas: galite siųsti beveik bet kokio tipo duomenis kaip pranešimą.

Tokie darbuotojai, kuriuos matėte iki šiol, vadinami atsidavusiais darbuotojais. Juos galite pasiekti tik iš failo, kuriame juos sukūrėte (jie tam skirti). Bendrinami darbuotojai yra priešingi: jie gali gauti pranešimus iš kelių failų ir siųsti pranešimus į juos. Bendri darbuotojai iš esmės yra tokie patys kaip atsidavę darbuotojai, tačiau jūs turite juos naudoti šiek tiek kitaip.

Pažiūrėkime į pavyzdį. Užuot naudojęs darbuotojo konstruktorių, kiekvienas failas, kuris nori naudoti bendrinamą darbuotoją, turi sukurti darbuotojo objektą SharedWorker ():

leisti SharedWorker = naujas SharedWorker('worker.js')

Tačiau skirtumai tuo nesibaigia. Kad failas galėtų siųsti arba gauti pranešimą iš bendrai naudojamo darbuotojo, jis turi tai padaryti prieiga prie a uostas objektą, o ne tai darydami tiesiogiai. Štai kaip tai atrodo:

sharedWorker.port.postMessage('Sveiki!')
shareWorker.port.onMessage = funkcija(e) {
 console.log('Pasidalijamas darbuotojas atsiuntė', e.duomenys);
}

Taip pat turite naudoti prievado objektą darbuotojo viduje:

prisijungus = funkcija(e) {
konst prievadas = e.ports[0];
port.onmessage = funkcija(e) {
 console.log('Pranešimas gautas', el. duomenys)
 port.postMessage('Sveiki!');
 }
}

The prisijungus klausytojas suaktyvinamas kiekvieną kartą, kai atsiranda ryšys su prievadu (kai an žinute įvykių klausytojas nustatytas pagrindinėje gijoje).

Kai taip nutinka, kodas gauna prievadą, prie kurio ką tik buvo prijungtas, iš prisijungimo įvykio ir išsaugo jį kintamajame. Tada kodas užregistruoja žinute klausytojas uosto objekte. Tada kodas įrašo pranešimą į konsolę ir naudoja prievadą, kad išsiųstų pranešimą atgal į pagrindinę giją.

Žiniatinklio darbuotojai gerina naudotojų patirtį

Žiniatinklio darbuotojai yra „JavaScript“ gijos, leidžiančios fone paleisti sudėtingas ir ilgai veikiančias kodo dalis. Tada šis kodas neužblokuos vartotojo sąsajos. Naudojant žiniatinklio darbuotojus tokio tipo kodo rašymas yra daug lengvesnis ir pagerina programos naudotojo patirtį. Galite kurti žiniatinklio darbuotojus ir su jais bendrauti naudodami žiniatinklio darbuotojo API.