Bevezetés a webmunkások JavaScript API-ba

Webmunkások egy JavaScript API, amely lehetővé teszi futtassa a parancsfájlokat egy külön szálban a főből. Ez hasznos lehet, ha nem akar semmilyen akadályt a fő szkriptek végrehajtásában, a háttér-szkriptek miatt.

A webmunkások API-ja szinte minden böngészőben támogatott, részletesebb információkért nézd meg a CanIUse dokumentumokat. Mielőtt belépnénk a kódba, nézzünk meg néhány forgatókönyvet, ahol érdemes használni ezt az API-t, hogy megismerhessék, mit értem háttér-szkriptek.

Használati esetek

Tegyük fel, hogy van egy script letölti és feldolgozza a fájlt. Ha egy fájl van jelentősen nagy, hogy sokáig tart majd feldolgozni! Amelyek más szkripteket is leállíthatnak, amelyeket később végrehajtottak.

Azonban, ha a a fájlfeldolgozás egy háttérszálra kerül, néven ismert munkavállaló szál, más események nem lesznek blokkolva, amíg az előbbi véget nem ér.

A script háttérmunkás szálban hajtják végre az úgynevezett munkavállaló script vagy csak a munkás.

Egy másik példa, képzeljük el, hogy van egy nagy formában, füleken elrendezve. A parancsfájlokat úgy írja le, hogy az egyik lapon frissítse a vezérlőket mások kontrolljait befolyásolja.

Ha a többi lap frissítése némi időt vesz igénybe a felhasználó nem tudja folyamatosan használni az aktuális lapot anélkül, hogy a rendezvények megszakadnának. Ez megfagyhatja a felhasználói felületet, a felhasználó megrázkódását.

Mivel egy felhasználó nem látja a többi lapot, miközben kitölti az aktuálisat frissítse a háttérben lévő más fülek vezérlőit. Ily módon a felhasználó továbbra is használhatja a kitöltött aktuális lapot anélkül, hogy a parancsfájljait más lapok vezérlőinek frissítési folyamata akadályozná.

Hasonlóképpen, ha olyan forgatókönyvet talál, ahol egy szkript van blokkolhatja a felhasználót a felhasználói felület használatából addig, amíg végrehajtása megtörténik, megfontolhatja, hogy áthelyezné azt egy munkavállalói szálra, hogy végrehajtható legyen a háttérben.

A munkavállalók alkalmazási területei és típusai

A webmunkások API valószínűleg az egyik legegyszerűbb API-k, amellyel együtt dolgozhat. Elég egyszerű módszerei vannak hozzon létre munkavállaló szálakat és kommunikáljon velük a fő szkriptből.

A munkavállalói szál globális hatóköre eltér a fő száltól. Ön nem férhet hozzá a ablak tárgy mint például éber() belül egy munkavállaló szál. Te is nem tudja közvetlenül megváltoztatni a DOM-ot egy munkavállaló szálából.

Azonban te tud sok API-t használjon ablak, például Ígéret és lekérése, a munkásszálban (lásd a teljes listát).

Van is beágyazott munkásszálak: egy másik szálból létrehozott munkásszálak. A másik által létrehozott munkavállalót a-nak hívják subworker.

Vannak még sok típusok munkavállalók. A két fő elkötelezett és megosztott munkavállalók.

Dedikált munkások ugyanazon a böngészési környezetbe tartozik hogy a fő szálukhoz tartozik. A megosztott munkavállalók azonban más böngészési környezetben (például iframe-ben) a fő szkriptből. Mindkét esetben a fő szkript és a dolgozók ugyanabban a tartományban kell lennie.

A példa ebben a bemutatóban lesz a dedikált munkásról, amely a leggyakoribb típus.

API módszerek

Lásd az alábbi ábrát a az összes fő módszer gyors áttekintése a webmunkások API-ja.

A Munkás() konstruktőr létrehoz egy dedikált munkamenetet és visszaadja a referencia objektumot. Ezután ezt az objektumot használjuk az adott munkatárssal való kommunikációhoz.

A postMessage () módszert használják mind a fő, mind a munkavállalói szkriptekben küldjön adatokat egymásnak. Az elküldött adatokat ezután a másik oldalon fogadja a onmessage eseménykezelő.

A megszüntetheti () eljárás megszünteti a munkavállaló szálát a fő scriptből. Ez a felmondás azonnali: az aktuális parancsfájlok végrehajtása és a függőben lévő parancsfájlok törlésre kerülnek. A Bezárás() a módszer ugyanaz, de ez az a munkatársak bezárják.

Példa kód

Most nézzük meg néhány minta kódot. A index.html az oldal a fő parancsfájl belül a

Kezdjük a a munkavállaló szál létrehozása a fő szkriptből.

  w = új munkás ('worker.js'); 
 A Munkás() konstruktőr a munkavállalói fájl URL-jét érvként veszi fel.
 Ezután egy eseménykezelőt adunk hozzá a onmessage az újonnan létrehozott munkáspéldány esetére adatot kap. A adat a e az esemény megtartja a fogadott adatokat.
  w = új munkás ('worker.js'); w.onmessage = (e) => console.log („Fogadó munkavállalótól: $ e.data”);  
 Most használjuk postMessage () nak nek küldjön néhány adatot a munkavállaló szálára egy gombnyomásra. A postMessage () módszer két argumentumot vehet igénybe. Az első lehet bármilyen típusú (string, array…). Ez az adat küldeni kell a munkavállaló szálára (vagy a főszkriptre, ha a módszer a munkásszálban van).
 A második, opcionális paraméter az objektumok tömbje a munkásszálak használhatják (de nem a fő szkript, vagy fordítva). Ezeket az objektumokat hívják Átruházható tárgyak.
  document.querySelector ('gomb'). onclick = () => w.postMessage ('john');  
 Csak egy karakterlánc értéket küldök a munkásszálnak.
 A munkásszálban hozzá kell adnunk egy onmessage eseménykezelő megkapja az adatokat a gombnyomásra a fő szkript által küldött. A kezelőn belül mi összevonja a fogadott karakterláncot egy másikba és küldje vissza az eredményt a fő szkriptbe.
  console.info („létrehozott munkavállaló”); onmessage = (e) => postMessage ('Hi $ e.data');  
 Ellentétben a főszkripttel, ahol a felhasználót kellett használni w referencia objektum utaljon az adott munkásszálra amelyen a parancsfájl a onmessage és postMessage módszerek, van nincs szükség referencia objektumra a munkavállaló menetében a fő szálra mutat.
 A kód a következőképpen működik. Amikor a böngésző betöltődik index.html, a konzol megjeleníti a "létrehozott munkavállaló" üzenetet, amint a munkás() a kivitelezőt a fő szálban hajtják végre, új munkavállaló létrehozása.
 Ha rákattint a gombra az oldalon, megkapja a "Munkavállalótól érkezett: Hi john" üzenet a konzolban, ami az a karakterlánc volt összefűzve a munkavállaló szálába a hozzá küldött adatokkal együtt vissza a fő szkriptbe.