Share
Un lucrător web este un script JS care rulează în fundal, separat de alte scripturi, permițându-ne să introducem fire în aplicațiile noastre web. Deși nu fac parte din spec. HTML5, lucrătorii web pot fi utilizați cu aplicații HTML5. În acest sfat rapid, vom examina cum să le folosim.
În țara HTML5 avem câteva API foarte interesante disponibile. Unele dintre ele - cum ar fi Web Workers - sunt utile pentru creșterea performanței, ceea ce este foarte important atât pentru aplicații, cât și pentru jocuri. Dar cum funcționează lucrătorii web ... bine, lucrează?
Fiecare instanță a unui lucrător web creează un alt fir în care rulează JavaScript. Instanțiați unul ca acesta:
Accentsconagua
var muncitor = lucrător nou ("nume_firma.js"); Aici, 'filename.js' este numele fișierului care conține scriptul tău. Deoarece lucrătorii sunt medii individuale, nu puteți utiliza cod încorporat direct în HTML; trebuie să utilizați un fișier separat.
Lucrătorii nu au acces la pagina DOM sau la obiectul global, așa cum comunică cu site-ul? E simplu. Când doriți să trimiteți date de la pagina dvs. unui lucrător, invocați postMessage ().
Acest lucru necesită un parametru: datele de trimis, care pot fi fie un șir sau un obiect parsabil JSON (ceea ce înseamnă că nu puteți trece funcții sau referințe circulare, sau veți primi un DOM_EXCEPTION). Pe unele browsere există o problemă cu obiectele, deci este întotdeauna mai bine să parsezi manual obiectul JSON.parse () astfel încât nu trebuie să vă faceți griji cu privire la implementările incomplete.
Același lucru se întâmplă dacă trimiteți date de la un lucrător la pagină: invoca doar postMessage () pe de sine, care se referă la domeniul de aplicare global al lucrătorului. (Faceți acest lucru în interiorul scriptului Muncitorului, desigur).
Apoi, pentru a primi datele pe care trebuie să le atașați onmessage organizatorul evenimentului. Există două modalități de a face acest lucru, la fel ca în cazul evenimentelor obișnuite pentru elementele DOM; puteți fie să atribuiți direct o anumită funcție Muncitorului onmessage proprietate sau puteți folosi addEventListener ().
// Prima cale: worker.onmessage = funcția (e) console.log (e.data); // Înregistrați datele transmise // Al doilea mod: worker.addEventListener ('mesaj', funcția (e) console.log (e.data); // înregistrați datele transmise); Este alegerea ta ce metodă să folosești. Oricum, parametrul funcției va fi unul eveniment obiect și datele pe care le-ați trimis utilizând postMessage () va fi trecut prin date proprietatea acestui eveniment.
Bine, dar dacă ar trebui să folosim o bibliotecă externă? Nu avem acces la DOM sau la domeniul global, deci nu putem injecta scenariul.
Bineînțeles că nu avem nevoie de asta - există o funcție pentru asta. Se numeste importScripts () și acceptă unul sau mai multe argumente: numele de script care se încarcă în interiorul domeniului de lucru al lucrătorului. Trebuie să știți că script-urile transmise în această funcție sunt încărcate într-o ordine aleatorie, dar acestea vor fi executate în modul specificat, iar executarea script-ului va fi întreruptă până când acestea vor fi încărcate.
importScripts ( 'one-lib.js'); // Încarcă un script importScripts ('first-lib.js', 'second-lib.js', 'third-lib.js'); // Încarcă trei scripturi Poți să folosești importScripts oriunde în codul dvs., ceea ce face ușor să creați cereri JSONP în interiorul lucrătorilor, așa cum vom face în exemplul următor.
Corect, deci acum probabil doriți să vedeți un Muncitor în acțiune. În loc să arătați ceva destul de inutil, cum ar fi obținerea primelor sau a numerelor Fibonacci, am decis să fac ceva ce poți folosi după câteva schimbări.
Scriptul de exemplu (am inclus doar codul Worker, restul este ușor de făcut) va primi ultimele 100 de Tweets de la @envatoactive (trebuie să setăm contorul la 121 în loc de 100, deoarece Tweeter API trimite mai puține tweets decât solicitat - nu mă întreba de ce, nu știu).
Iată codul care ar intra în fișierul Web Tooler actual:
// Funcția Helper pentru prelucrarea datelor var process = function (data) // Iterați prin date; știm că este o matrice, deci este sigur pentru (var i = 0, v; v = date [i]; i ++) // Și treceți textul lui Tweet pe pagina self.postMessage (text: v.text); // După ce ați terminat lucrul, lăsați pagina să se cunoască auto.postMessage ("terminat"); // Atașați ascultătorul de evenimente să se ocupe de mesaje self.addEventListener ('message', function (event) // Verificați dacă comanda trimisă a fost 'start' // Nu este necesară aici, dar poate fi utilă mai târziu dacă (event.data == "start") // Raspunde la pagina in care am inceput lucrarea self.postMessage ("a inceput"); // Core script-ul, primeste Tweets // Parola inversa specifica functia care trebuie executata dupa ce se face cererea // (numim funcția proces (), definită mai sus.) // Contorul trebuie să fie 121 deoarece API-ul Tweeter trimite cantități mai mici de date decât cele solicitate de import ("http://twitter.com/statuses/user_timeline/envatoactive. json? callback = proces & număr = 121 ");); Ar trebui să fie ușor de înțeles cum funcționează toate acestea din comentariile. Aceasta permite aplicației dvs. să încarce toate mesajele tweets în fundal, utilizând un fir separat.
Acum încercați să introduceți următorul cod echivalent, care nu utilizați lucrătorii web, în loc de capul unei pagini goale și notați întârzierea. (Este încă mic, dar imaginați-vă dacă nu ați primit 100, dar 100.000 de Tweets):
După cum puteți vedea, lucrătorii web vă oferă o modalitate simplă de a elimina întârzierea de la interfața dvs. grafică și de a muta calcule complicate sau de a crea rețele pentru a separa firele.
Sper că ați învățat ceva nou din acest articol - poate că veți folosi lucrătorii în următorul proiect? Dacă aveți întrebări sau probleme, vă rugăm să comentați mai jos.
