Share
En nettbehandler er et JS-skript som går i bakgrunnen, separat fra andre skript, slik at vi kan introdusere tråder i våre webapps. Selv om det ikke er en del av HTML5-spesifikasjonen, kan webarbeidere brukes med HTML5-apper. I denne Quick Tip tar vi en titt på hvordan du bruker dem.
I landet HTML5 har vi noen veldig interessante APIer tilgjengelig. Noen av dem - som webarbeidere - er nyttige for å øke ytelsen, noe som er svært viktig for både programmer og spill. Men hvordan jobber nettarbeidere ... vel, jobber?
Hver forekomst av en nettbehandler lager en annen tråd, der JavaScript kjører. Du instantierer en slik slik:
Accentsconagua
var arbeider = ny arbeider ('filnavn.js'); Her er 'filename.js' navnet på filen som inneholder skriptet ditt. Fordi Arbeidere er individuelle miljøer, kan du ikke bruke kode innebygd direkte i HTML; du må bruke en egen fil.
Arbeidere har ikke tilgang til siden DOM eller det globale objektet, så hvordan kommuniserer de med nettstedet? Det er enkelt. Når du vil sende noen data fra siden til en Arbeider, påberoper du deg postmessage ().
Dette tar en parameter: data som skal sendes, som kan være enten en streng eller et JSON-parserbart objekt (som betyr at du ikke kan passere funksjoner eller sirkulære referanser, eller du vil få en DOM_EXCEPTION). På noen nettlesere er det et problem med objekter, så det er alltid bedre å manuelt analysere objektet med JSON.parse () så du trenger ikke å bekymre deg for ufullstendige implementeringer.
Det samme gjelder hvis du sender data fra en Arbeider til siden: bare påkalle postmessage () på selv-, som refererer til Arbeiderens globale omfang. (Du gjør dette inne i Arbeiderens skript, selvfølgelig).
Så, for å motta dataene du må legge ved en onmessage hendelse handler. Det er to måter å gjøre det på, akkurat som med vanlige hendelser for DOM-elementer; Du kan enten direkte tildele noen funksjon til Arbeiderens onmessage eiendom, eller du kan bruke addEventListener ().
// Første måte: worker.onmessage = funksjon (e) console.log (e.data); // Log dataene passert // Second way: worker.addEventListener ('message', funksjon (e) console.log (e.data); // Logg dataene passert); Det er ditt valg hvilken metode du skal bruke. Uansett vil funksjonens parameter være en begivenhet objekt, og dataene du sendte med postmessage () vil bli sendt via data eiendom av denne hendelsen.
Ok, men hva om vi må bruke noe eksternt bibliotek? Vi har ikke tilgang til DOM eller globalt omfang, så vi kan ikke bare injisere skriptet.
Selvfølgelig trenger vi ikke - det er en funksjon for det. Det kalles importScripts () og det aksepterer en eller flere argumenter: Skriptnavn som skal lastes inn i Arbeiderens omfang. Du bør være oppmerksom på at skript som sendes inn i denne funksjonen er lastet i en tilfeldig rekkefølge, men de vil bli kjørt ut som angitt, og manuskriptet vil bli satt på pause til de er lastet inn.
importScripts ( 'one-lib.js'); // Laster ett skript importScripts ('first-lib.js', 'second-lib.js', 'third-lib.js'); // Laster tre skript Du kan bruke importScripts hvor som helst i koden din, noe som gjør det enkelt å lage JSONP-forespørsler inne i arbeidstakere, slik vi vil gjøre i følgende eksempel.
Høyre, så nå vil du sannsynligvis se en Arbeider i aksjon. I stedet for å vise noe ganske ubrukelig, som å skaffe primater eller Fibonacci-tall, har jeg bestemt meg for å lage noe som du kanskje vil bruke etter noen få endringer.
Eksempelskriptet (jeg har bare inkludert koden til arbeideren, resten er lett å gjøre) vil få de siste 100 tweets fra @envatoactive (vi må sette tellingen til 121 i stedet for 100, da Tweeter API sender færre tweets enn forespurt - ikke spør meg hvorfor jeg ikke vet).
Her er koden som ville gå inn i selve Web Worker-skriptfilen:
// Hjelperfunksjon for behandling av data var prosess = funksjon (data) // Iterate gjennom dataene; Vi vet at det er en matrise, så det er trygt for (var i = 0, v; v = data [i]; i ++) // Og pass Tweet-teksten til siden self.postMessage (text: v.text); // Etter at arbeidet er ferdig, la siden få vite self.postMessage ("ferdig"); // Fest hendelseslytteren til å håndtere meldinger self.addEventListener ('melding', funksjon (hendelse) // Sjekk om kommandoen som sendes var 'start' // Ikke nødvendig her, men kan være nyttig senere hvis (event.data == "start") // Svar på siden vi startet arbeidet self.postMessage ("startet"); // Kjernen til scriptet, få tweets // Tilbakekallingsparameteren angir funksjonen som skal utføres etter at forespørselen er ferdig // (Vi kaller prosessen () -funksjonen, definert ovenfor.) // Antallet må være 121 fordi Tweeter API sender lavere mengde data enn ønsket importScripts ("http://twitter.com/statuses/user_timeline/envatoactive. json? callback = prosess & count = 121 ");); Det skal være lett å forstå hvordan dette fungerer alt fra kommentarene. Dette lar appen laste alle tweets i bakgrunnen, ved hjelp av en egen tråd.
Prøv nå å sette inn følgende ekvivalente kode, hvilken ikke bruk webarbeidere, i hodet til en tom side i stedet, og merk forsinkelsen. (Det er fortsatt lite, men forestill deg om du ikke fikk 100, men 100 000 tweets):
Som du kan se, tilbyr nettarbeidere en enkel måte å fjerne lag fra GUI og flytte kompliserte beregninger eller nettverk for å skille trådene.
Jeg håper du har lært noe nytt fra denne artikkelen - kanskje vil du bruke arbeidere i ditt neste prosjekt? Hvis du har noen spørsmål eller problemer, vennligst kommenter nedenfor.
