Ievads tīmekļa darbinieku JavaScript API

Tīmekļa darbinieki ir JavaScript API, kas ļauj jums palaist skriptus atsevišķā pavedienā no galvenās. Tas var būt noderīgs, ja nevēlaties, lai pamatskriptu izpildē tiktu radīti šķēršļi, jo skripti ir fakti..

Tīmekļa darbinieku API ir gandrīz visās pārlūkprogrammās, sīkāku informāciju skatiet CanIUse dokumentos. Pirms nokļūsiet šajā kodā, aplūkosim pāris scenārijus, kuros jūs varētu vēlēties izmantot šo API, lai jūs varētu iegūt priekšstatu par to, ko es domāju fona-esque skripti.

Lietošanas gadījumi

Teiksim, ka ir skripts ielādē un apstrādā failu. Ja fails ir ievērojami liels, lai to apstrādātu ilgs laiks! Kas var apturēt citus skriptus, kas vēlāk tika izmantoti, lai izpildītu izpildi.

Tomēr, ja failu apstrāde tiek pārvietota uz fona pavedienu, pazīstams kā darba vītne, citi notikumi netiks bloķēti, kamēr iepriekšējais nebūs beidzies.

Scenārijs izpildīts fona strādnieku pavedienā ir pazīstams kā darba skripts vai vienkārši darba ņēmējs.

Vēl viens piemērs, iedomājieties, ka ir liela forma, sakārtota cilnēs. Tas ir skripts tādā veidā, ka vienā cilnē tiek atjauninātas vadīklas ietekmē dažus kontroles elementus citās.

Ja citu cilņu atjaunināšana aizņem kādu laiku, lietotājs nevar pastāvīgi izmantot pašreizējo cilni bez tā notikumiem. Tas var iesaldēt lietotāja saskarni, lietotāja satraukumu.

Tā kā lietotājs nevarēs redzēt citas cilnes, aizpildot pašreizējo atjauniniet fona pavediena pārējo cilņu vadīklas. Tādā veidā lietotājs var turpināt izmantot pašreizējo aizpildāmo cilni, nevienam no tās skriptiem bloķējot citu cilņu vadības atjaunināšanas procesu.

Tāpat, ja atrodat scenāriju, kurā ir skripts var bloķēt lietotāju lietot lietotāja interfeisu līdz tā izpilde ir iespējama tā pārvietošana uz darbinieku pavedienu, lai to varētu izpildīt fonā.

Darbinieku darbības jomas un veidi

Web Workers API, iespējams, ir viens no vienkāršākajiem API, lai strādātu. Tam ir diezgan vienkāršas metodes radīt darba pavedienus un sazināties ar viņiem no galvenā skripta.

Darbinieku pavedienu globālā darbības joma ir atšķirīga no galvenās pavediena. Jūs nevar piekļūt metodēm un īpašībām logu objektu piemēram, brīdinājums () darba vītnes iekšpusē. Tu arī nevar mainīt DOM tieši no darba pavediena.

Tomēr jūs var izmantot daudzas API logu, piemēram Solījums un Ielādēt, jūsu darbinieku pavedienā (skatiet pilnu sarakstu).

Varat arī būt ligzdotu strādnieku pavedieni: strādnieku pavedieni, kas izveidoti no cita strādnieka pavediena. Darbinieks, ko izveidojis cits, tiek saukts par a apakšuzņēmējs.

Tur ir arī daudzi veidi darbiniekiem. Abas galvenās ir īpašiem un kopīgiem darbiniekiem.

Specializētie darbinieki pieder pie tā paša pārlūkošanas konteksta ka to galvenais pavediens pieder. Tomēr kopīgie darbinieki ir atrodas citā pārlūkošanas kontekstā (piemēram, iframe) no galvenā skripta. Abos gadījumos galvenais skripts un darbinieki jābūt vienā domēnā.

Piemērs šajā apmācībā būs par īpašu darba ņēmēju, kas ir visizplatītākais veids.

API metodes

Skatiet zemāk esošo diagrammu a ātru pārskatu par visām galvenajām metodēm kas veido tīmekļa darbinieku API.

The Darbinieks () konstruktors izveido īpašu darbinieku pavedienu un atgriež atskaites objektu. Tad mēs izmantojam šo objektu, lai sazinātos ar šo konkrēto darbinieku.

The postMessage () metode tiek izmantota gan galvenajos, gan darba skriptos nosūtīt datus viens otram. Pēc tam nosūtītos datus saņem otrā puse onmessage notikumu apstrādātājs.

The izbeigt () metodi pārtrauc strādnieka pavedienu no galvenā skripta. Šis pārtraukums ir nekavējoties: jebkurš pašreizējais skriptu izpildījums un gaidītie skripti tiks atcelti. The aizvērt () metode dara to pašu, bet tā ir to sauc pats darba devējs.

Piemēra kods

Tagad aplūkosim kādu parauga kodu. The index.html lapā ir galvenais skripts iekšpusē a

Mēs sākam ar strādnieka pavediena izveide no galvenā skripta.

 w = jauns darbinieks ('worker.js'); 

 w = jauns darbinieks ('worker.js'); w.onmessage = (e) => console.log ('Saņemts no darba ņēmēja: $ e.data');  

 document.querySelector ('poga'). onclick = () => w.postMessage ('john');  

 console.info (“radīts darbinieks”); onmessage = (e) => postMessage ('Hi $ e.data');