Įvadas į žiniatinklio darbuotojų JavaScript API

Žiniatinklio darbuotojai yra „JavaScript“ API, kuri leidžia jums paleisti scenarijus atskirame sriegyje iš pagrindinio. Jis gali būti naudingas, kai nenorite, kad dėl pagrindinio scenarijaus scenarijų būtų užkirstas kelias vykdyti pagrindinius scenarijus.

Žiniatinklio darbuotojų API yra palaikoma beveik visose naršyklėse, išsamesnės informacijos ieškokite „CanIUse“ dokumentuose. Prieš patekdami į kodą, pamatysime keletą scenarijų, kuriuose galbūt norėsite naudoti šią API, kad galėtumėte suprasti, ką turiu galvoje foniniai scenarijai.

Naudojimo atvejai

Tarkime, kad yra scenarijus atkuria ir apdoroja failą. Jei failas yra žymiai didelė tai užtruks ilgai, kol bus tvarkomi! Kuris gali sustabdyti kitus scenarijus, kurie vėliau buvo panaudoti, kad jie būtų vykdomi.

Tačiau, jei failų apdorojimas perkeliamas į fono sriegį, žinomas kaip darbuotojo siūlai, kiti įvykiai nebus užblokuoti, kol nebus baigtas pirmasis.

Scenarijus atliekamas fono darbuotojas yra žinomas kaip darbuotojo scenarijus arba tiesiog darbuotojas.

Kitas pavyzdys, įsivaizduokite, kad yra didelė forma, išdėstyta skirtukuose. Jis parašytas taip, kad viename skirtuke būtų atnaujinami valdikliai paveikia kai kuriuos kitų kontrolės priemonių.

Jei kitų skirtukų atnaujinimas trunka šiek tiek laiko negali nuolat naudoti dabartinio skirtuko be jo įvykių. Tai gali užšaldyti UI, naudotojo nerimą.

Kadangi vartotojas negali matyti kitų skirtukų, užpildydamas esamą, galite atnaujinkite kitų fono sriegių skirtukų valdiklius. Tokiu būdu vartotojas gali tęsti dabartinį skirtuką, kurį jis užpildo, nesukeldamas kitų scenarijų naujinimo proceso, kai jo scenarijai blokuojami.

Taip pat, jei radote scenarijų, kuriame yra scenarijus gali užblokuoti naudotoją naudoti vartotojo sąsają kol jis bus įvykdytas, galite apsvarstyti galimybę jį perkelti į darbuotojo siūlą, kad jis galėtų būti vykdomas fone.

Darbuotojų aprėptis ir rūšys

Žiniatinklio darbuotojų API tikriausiai yra viena iš paprasčiausių API, su kuria norite dirbti. Jis turi gana paprastus metodus sukurti darbuotojo temas ir bendrauti su jais iš pagrindinio scenarijaus.

Darbuotojų gijų pasaulinė apimtis yra kitokia, nei pagrindinė gija. Tu negali pasiekti metodų ir savybių langas objektą toks kaip budrus() viduje darbuotojo siūlai. Tu taip pat negali tiesiogiai pakeisti DOM iš darbuotojo siūlų.

Tačiau jūs gali naudoti daug API langas, pavyzdžiui Pažadas ir Fetch, jūsų darbuotojo temoje (žr. visą sąrašą).

Taip pat galite turėti įdėtų darbuotojų siūlai: darbininkų siūlai, sukurti iš kito darbuotojo siūlų. Darbuotojas, sukurtas kito, vadinamas a subworkeris.

Taip pat yra daug tipai darbuotojų. Du pagrindiniai yra specialistų ir bendrų darbuotojų.

Specialūs darbuotojai priklauso tam pačiam naršymo kontekstui kad jų pagrindinis siūlas priklauso. Tačiau bendri darbuotojai yra naršymo kontekste (pvz., iframe) iš pagrindinio scenarijaus. Abiem atvejais pagrindinis scenarijus ir darbuotojai turi būti toje pačioje srityje.

Šio vadovo pavyzdys bus apie specialų darbuotoją, kuris yra labiausiai paplitęs tipas.

API metodai

Žr. Žemiau pateiktą diagramą greitai apžvelgti visus pagrindinius metodus kuri sudaro „Web Workers API“.

The Darbuotojas () konstruktorius sukuria specialų darbuotojo siūlą ir grąžina savo atskaitos objektą. Tada mes naudojame šį objektą bendrauti su šiuo konkrečiu darbuotoju.

The postMessage () metodas naudojamas tiek pagrindiniame, tiek darbuotojo scenarijuose siųsti viena kitai. Tada siunčiami duomenys gaunami kitoje pusėje onmessage įvykių tvarkytojas.

The nutraukti () metodas nutraukia darbuotojo siūlą iš pagrindinio scenarijaus. Šis nutraukimas yra nedelsiant: bet koks dabartinis scenarijų vykdymas ir laukiami scenarijai bus atšaukti. The Uždaryti() metodas daro tą patį, bet tai pašnekovas uždaro save.

Pavyzdinio kodas

Dabar pažiūrėkime keletą pavyzdžių. The index.html puslapyje yra pagrindinis scenarijus viduje

Mes pradedame nuo darbuotojo gijos kūrimas iš pagrindinio scenarijaus.

  w = naujas darbuotojas („worker.js“); 
 The Darbuotojas () konstruktorius atsiima darbuotojo failo URL kaip argumentą.
 Tada pridedame įvykių tvarkytoją onmessage naujai sukurto darbuotojo atveju gauti duomenis iš jo. The duomenis turto nuosavybė e įvykis saugo gautus duomenis.
  w = naujas darbuotojas („worker.js“); w.onmessage = (e) => console.log („Gauta iš darbuotojo: $ e.data“);  
 Dabar mes naudojame postMessage () į siųsti kai kuriuos duomenis į darbuotojo siūlą paspaudus mygtuką. The postMessage () metodas gali priimti du argumentus. Pirmasis gali būti bet kokio tipo (eilutė, masyvas…). Tai duomenys siunčiami darbuotojo siūlai (arba į pagrindinį scenarijų, kai metodas yra darbuotojo siūle).
 Antrasis, neprivalomas parametras yra objektų masyvas gali naudoti darbininkų siūlai (bet ne pagrindiniu scenarijumi arba atvirkščiai). Tokie objektai yra vadinami Perleidžiami objektų.
  document.querySelector ('mygtukas'). onclick = () => w.postMessage ('john');  
 Aš tiesiog siunčiu eilutės reikšmę darbuotojo siūlui.
 Darbuotojų temoje turime pridėti onmessage įvykių tvarkytojas gaus duomenis siunčiami pagrindinio scenarijaus mygtuko paspaudimu. Viduje prižiūrėtojas, mes susieti gautą eilutę su kita ir siųsti rezultatą atgal į pagrindinį scenarijų.
  console.info („sukurtas darbuotojas“); onmessage = (e) => postMessage („Hi $ e.data“);  
 Skirtingai nei pagrindinis scenarijus, kur turėjome naudoti w nuorodos objektas nurodykite konkretų darbuotojo siūlą tada scenarijus naudoja onmessage ir postMessage metodai, yra darbuotojo siūlai nereikalingas atskaitos objektas nukreipti į pagrindinį sriegį.
 Kodas veikia taip. Kai naršyklė įkeliama index.html, konsolėje bus rodoma „sukurtas darbuotojas“ pranešimą darbuotojas () konstruktorius vykdomas pagrindiniame sriegyje, kuriant naują darbuotoją.
 Kai spustelėsite mygtuką puslapyje, gausite „Gautas iš darbuotojo:„ Hi john “ pranešimas konsolėje, kuri yra eilutė, kuri buvo susietas su darbuotojo gija buvo siunčiami duomenys ir tada buvo siunčiami atgal į pagrindinį scenarijų.