Johdatus web-työntekijöiden JavaScript-sovellusliittymään

Web-työntekijät on JavaScript-sovellusliittymä, jonka avulla voit suorita skriptejä erillisestä langasta tärkeimmältä. Se voi olla kätevä, kun et halua mitään haittaa pääskriptien suorittamisessa taustakuvien avulla.

Web Workers API on tuettu lähes kaikissa selaimissa, Katso tarkemmat tiedot CanIUse-dokumenteista. Ennen kuin pääset koodiin, katsotaan pari skenaariota, joissa haluat ehkä käyttää tätä API: ta, jotta saat käsityksen siitä, mitä tarkoitan taustakohtaiset skriptit.

Käytä koteloita

Sanotaan, että on olemassa skripti noutaa ja käsittelee tiedoston. Jos tiedosto on huomattavasti suuri se kestää kauan aikaa! Joka saattaa pysäyttää muita skriptejä, joita myöhemmin kutsuttiin suorittamasta.

Jos kuitenkin tiedoston käsittely siirretään taustalangalle, tunnetaan nimellä työntekijäkierre, muita tapahtumia ei estetä ennen kuin entinen on päättynyt.

Käsikirjoitus suoritetaan taustalla työskentelevällä langalla tunnetaan nimellä työntekijän käsikirjoitus tai vain työntekijä.

Kuvittele vielä yksi esimerkki iso lomake, joka on järjestetty välilehtiin. Se on kirjoitettu siten, että ohjaimet päivitetään yhdellä välilehdellä vaikuttaa joihinkin muihin ohjaimiin.

Jos muiden välilehtien päivitys vie jonkin aikaa käyttäjän ei voi jatkuvasti käyttää nykyistä välilehteä ilman sen tapahtumia. Tämä saattaa jäätyä käyttöliittymän käyttäjän häpeään.

Koska käyttäjä ei näe muita välilehtiä täyttäessään nykyisen, voit päivitä taustalangan muiden välilehtien ohjaimet. Tällä tavoin käyttäjä voi jatkaa nykyisen välilehdensä täyttämistä ilman, että muiden välilehtien ohjauksen päivitysprosessi ei estä sen komentosarjoja.

Samoin, jos löydät skenaarion, jossa on komentosarja saattaa estää käyttäjän käyttämästä käyttöliittymää kunnes sen toteutus on suoritettu, saatat harkita sen siirtämistä työntekijän langalle, jotta se voitaisiin toteuttaa taustalla.

Työntekijöiden laajuudet ja tyypit

Web Workers API on luultavasti yksi yksinkertaisimmista sovellusliittymistä. Siinä on melko yksinkertaisia menetelmiä luoda työntekijäkierteitä ja kommunikoida heidän kanssaan pääskriptiin.

Työläiskierteen maailmanlaajuinen laajuus on eri asiayhteydessä pääkierteestä. Sinä ei pääse käyttämään ikkuna esine kuten alert () sisällä työntekijän säiettä. Sinä myös DOM ei voi vaihtaa suoraan työntekijän langasta.

Te kuitenkin voida käyttää monia API: a ikkuna, esimerkiksi Lupaus ja noutaa, työntekijän langassa (katso koko luettelo).

Voit myös olla sisäkkäisten työntekijöiden langat: Työntekijäkierteet, jotka on luotu toisesta työntekijän langasta. Toisen luomaa työntekijää kutsutaan nimellä a subworker.

Siellä on myös monet tyypit työntekijöitä. Kaksi tärkeintä ovat omistautuneet ja jaetut työntekijät.

Omistetut työntekijät kuuluvat samaan selailuympäristöön että niiden pääkierre kuuluu. Jaetut työntekijät ovat kuitenkin läsnä toisessa selausyhteydessä (esimerkiksi iframe) pääskriptistä. Molemmissa tapauksissa pääskripti ja työntekijät täytyy olla samassa verkkotunnuksessa.

Tässä opetusohjelmassa on esimerkki omistautuneesta työntekijästä, joka on yleisin tyyppi.

API-menetelmät

Katso alla oleva kaavio a nopea yleiskuva kaikista tärkeimmistä menetelmistä jotka muodostavat Web Workers API: n.

Työntekijä() rakentaja luo oman työntekijän langan ja palauttaa viiteobjektinsa. Sitten käytämme tätä objektia kommunikoida kyseisen työntekijän kanssa.

postMessage () menetelmää käytetään sekä pää- että työntekijäskripteissä lähettää tietoja toisilleen. Lähetetyt tiedot vastaanotetaan sitten toisella puolella onmessage tapahtumakäsittelijä.

lopettaa () menetelmä lopettaa työntekijän langan pääskriptistä. Tämä päättyminen on välitön: kaikki nykyiset komentosarjan suorituksen ja odottamattomat skriptit peruutetaan. kiinni() menetelmä tekee saman, mutta se on itse sulkeva työntekijäkierre.

Esimerkkikoodi

Katsotaanpa nyt esimerkkikoodia. index.html -sivulla on pääskripti sisällä

Aloitamme luodaan työntekijäkierre pääskriptistä.

  w = uusi työntekijä ('worker.js'); 
  Työntekijä() rakentaja ottaa työntekijätiedoston URL-osoitteen argumenttina.
 Sitten lisäämme tapahtuman käsittelijän onmessage jos uusi työntekijä on vastaanottaa tietoja.  data omaisuutta e tapahtuma pitää vastaanotetut tiedot.
  w = uusi työntekijä ('worker.js'); w.onmessage = (e) => console.log ('Vastaanotettu työntekijältä: $ e.data');  
 Nyt käytämme postMessage () että lähettää joitakin tietoja työntekijän langalle napin painalluksella. postMessage () menetelmä voi ottaa kaksi argumenttia. Ensimmäinen voi olla mitä tahansa tyyppiä (merkkijono, taulukko…). Se on tietoja lähetetään työntekijän langalle (tai pääskriptiin, kun menetelmä on läsnä työntekijäkierteessä).
 Toinen, valinnainen parametri on joukko esineitä voidaan käyttää työntekijän langoilla (mutta ei pääskriptiin tai päinvastoin). Tällaisia esineitä kutsutaan siirtokelpoinen esineet.
  document.querySelector ('painiketta'). onclick = () => w.postMessage ('john');  
 Lähetän vain merkkijonon arvon työntekijän langalle.
 Työntekijäkierteessä meidän on lisättävä onmessage tapahtuman käsittelijä saavat tiedot -painikkeella lähetetty pääskripti. Käsittelijän sisällä me yhdistä vastaanotettu merkkijono toiseen ja lähetä tulos takaisin pääskriptiin.
  console.info ('luotu työntekijä'); onmessage = (e) => postMessage ('Hi $ e.data');  
 Toisin kuin pääskriptissa, jossa meidän oli käytettävä w viiteobjekti viittaa tiettyyn työntekijän kierteeseen jossa skripti käyttää sitten onmessage ja postMessage menetelmiä ei tarvita referenssiobjektia työntekijän langassa osoittaa pääkierteeseen.
 Koodi toimii seuraavasti. Kun selain latautuu index.html, konsoli näyttää "työntekijä luotu" viestin heti työntekijä() rakentaja suoritetaan pääkierteessä, uuden työntekijän luominen.
 Kun napsautat sivun painiketta, saat "Vastaanotettu työntekijältä: Hi john" viesti konsolissa, joka on merkkijono, joka oli yhdistetty työntekijäkierteeseen ja sen jälkeen lähetetään takaisin pääskriptiin.