M

MLOG

Lietuvių

JavaScript įvykių ciklo demistifikavimas: išsamus vadovas visų lygių kūrėjams, apimantis asinchroninį programavimą, konkurentiškumą ir našumo optimizavimą.

Įvykių ciklas: Asinchroninio JavaScript supratimas

JavaScript, žiniatinklio kalba, yra žinoma dėl savo dinamiškumo ir gebėjimo kurti interaktyvią ir reaguojančią vartotojo patirtį. Tačiau iš esmės JavaScript yra vienagijis, o tai reiškia, kad jis gali vykdyti tik po vieną užduotį vienu metu. Tai kelia iššūkį: kaip JavaScript tvarko užduotis, kurios užima laiko, pavyzdžiui, gauna duomenis iš serverio ar laukia vartotojo įvesties, neužblokuodamas kitų užduočių vykdymo ir nesukeldamas programos nereagavimo? Atsakymas slypi Įvykių cikle – pagrindinėje koncepcijoje, padedančioje suprasti, kaip veikia asinchroninis JavaScript.

Kas yra įvykių ciklas?

Įvykių ciklas yra variklis, kuris maitina JavaScript asinchroninį elgesį. Tai mechanizmas, leidžiantis JavaScript vienu metu tvarkyti kelias operacijas, net jei jis yra vienagijis. Pagalvokite apie tai kaip apie eismo reguliuotoją, kuris valdo užduočių srautą, užtikrindamas, kad laiką reikalaujančios operacijos neužblokuotų pagrindinio srauto.

Pagrindiniai įvykių ciklo komponentai

Pavaizduokime tai paprastu pavyzdžiu, naudodami `setTimeout`:

console.log('Pradžia');

setTimeout(() => {
 console.log('Viduje setTimeout');
}, 2000);

console.log('Pabaiga');

Štai kaip vykdomas kodas:

  1. Vykdomas ir konsolėje atspausdinamas sakinys `console.log('Pradžia')`.
  2. Iškviečiama funkcija `setTimeout`. Tai yra Žiniatinklio API funkcija. Atgalinio skambučio funkcija `() => { console.log('Viduje setTimeout'); }` perduodama funkcijai `setTimeout` kartu su 2000 milisekundžių (2 sekundžių) delsa.
  3. `setTimeout` paleidžia laikmatį ir, kas svarbu, *neužblokuoja* pagrindinio srauto. Atgalinis skambutis nevykdomas iš karto.
  4. Vykdomas ir konsolėje atspausdinamas sakinys `console.log('Pabaiga')`.
  5. Po 2 sekundžių (ar daugiau) pasibaigia `setTimeout` laikmatis.
  6. Atgalinio skambučio funkcija patalpinama atgalinių skambučių eilėje.
  7. Įvykių ciklas patikrina skambučių krūvą. Jei ji tuščia (tai reiškia, kad šiuo metu nevykdomas joks kitas kodas), Įvykių ciklas paima atgalinį skambutį iš atgalinių skambučių eilės ir įstumia jį į skambučių krūvą.
  8. Atgalinio skambučio funkcija vykdoma ir konsolėje atspausdinamas `console.log('Viduje setTimeout')`.

Išvestis bus:

Pradžia
Pabaiga
Viduje setTimeout

Atkreipkite dėmesį, kad „Pabaiga“ spausdinama *prieš* „Viduje setTimeout“, nors „Viduje setTimeout“ apibrėžta prieš „Pabaiga“. Tai parodo asinchroninį elgesį: funkcija `setTimeout` neužblokuoja tolesnio kodo vykdymo. Įvykių ciklas užtikrina, kad atgalinio skambučio funkcija būtų vykdoma *po* nurodyto vėlavimo ir *kai skambučių krūva yra tuščia*.

Asinchroninės JavaScript technikos

JavaScript pateikia kelis būdus, kaip tvarkyti asinchronines operacijas:

Atgaliniai skambučiai

Atgaliniai skambučiai yra pagrindinis mechanizmas. Tai yra funkcijos, kurios perduodamos kaip argumentai kitoms funkcijoms ir vykdomos, kai baigiama asinchroninė operacija. Nors jie yra paprasti, atgaliniai skambučiai gali sukelti „atgalinių skambučių pragarą“ arba „pražūties piramidę“ tvarkant kelias įdėtas asinchronines operacijas.


function fetchData(url, callback) {
 fetch(url)
 .then(response => response.json())
 .then(data => callback(data))
 .catch(error => console.error('Klaida:', error));
}

fetchData('https://api.example.com/data', (data) => {
 console.log('Gauti duomenys:', data);
});

Pažadai

Pažadai buvo įvesti siekiant išspręsti atgalinių skambučių pragaro problemą. Pažadas atspindi galutinį asinchroninės operacijos užbaigimą (arba nesėkmę) ir jos gaunamąją reikšmę. Pažadai daro asinchroninį kodą labiau skaitomu ir lengviau valdomu, naudojant `.then()` asinchroninėms operacijoms grandinėti ir `.catch()` klaidoms tvarkyti.


function fetchData(url) {
 return fetch(url)
 .then(response => response.json());
}

fetchData('https://api.example.com/data')
 .then(data => {
 console.log('Gauti duomenys:', data);
 })
 .catch(error => {
 console.error('Klaida:', error);
 });

Async/Await

Async/Await yra sintaksė, sukurta remiantis Pažadais. Tai daro asinchroninį kodą panašesnį į sinchroninį kodą ir elgiasi panašiai, todėl jį dar lengviau skaityti ir suprasti. Norint deklaruoti asinchroninę funkciją, naudojamas raktinis žodis `async`, o raktinis žodis `await` naudojamas vykdymui pristabdyti, kol išsprendžiamas Pažadas. Tai leidžia asinchroniniam kodui atrodyti seklesniam, išvengiant gilaus įdėjimo ir gerinant skaitomumą.


async function fetchData(url) {
 try {
 const response = await fetch(url);
 const data = await response.json();
 console.log('Gauti duomenys:', data);
 } catch (error) {
 console.error('Klaida:', error);
 }
}

fetchData('https://api.example.com/data');

Konkurentiškumas ir paralelumas

Svarbu atskirti konkurentiškumą ir paralelizmą. JavaScript Įvykių ciklas leidžia pasiekti konkurentiškumą, o tai reiškia, kad vienu metu *atrodytų* kelių užduočių tvarkymas. Tačiau JavaScript, naršyklėje arba Node.js vienagijėje aplinkoje, paprastai vykdo užduotis po vieną (vienu metu) pagrindiniame sraute. Kita vertus, paralelumas reiškia kelių užduočių vykdymą *vienu metu*. JavaScript vienas nepateikia tikrojo paralelumo, bet tokios technikos kaip Web Workers (naršyklėse) ir `worker_threads` modulis (Node.js) leidžia vykdyti paraleliai, naudojant atskirus srautus. Naudojant Web Workers, galima perkelti skaičiavimo intensyvias užduotis, neleidžiant joms užblokuoti pagrindinio srauto ir pagerinti žiniatinklio programų reagavimą, o tai aktualu vartotojams visame pasaulyje.

Realaus pasaulio pavyzdžiai ir aspektai

Įvykių ciklas yra labai svarbus daugeliu žiniatinklio kūrimo ir Node.js kūrimo aspektų:

Našumo optimizavimas ir geriausia praktika

Norint parašyti našų JavaScript kodą, būtina suprasti Įvykių ciklą:

Pasauliniai aspektai

Kuriant programas pasaulinei auditorijai, atsižvelkite į šiuos dalykus:

Išvada

Įvykių ciklas yra pagrindinė koncepcija, skirta suprasti ir rašyti efektyvų asinchroninį JavaScript kodą. Suprasdami, kaip tai veikia, galite kurti reaguojančias ir našias programas, kurios vienu metu tvarko kelias operacijas neužblokuodamos pagrindinio srauto. Nesvarbu, ar kuriate paprastą žiniatinklio programą, ar sudėtingą Node.js serverį, stiprus Įvykių ciklo supratimas yra būtinas bet kuriam JavaScript kūrėjui, siekiančiam užtikrinti sklandų ir patrauklų vartotojo patirtį pasaulinei auditorijai.

Įvykių ciklas: Asinchroninio JavaScript supratimas | MLOG