Végrehajtás és hibakeresés

Becsült olvasási idő: 10–12 perc

Kulcsfogalmak: execution · event-driven · MainLoop · DevTools · debugging A kód megértéséhez nem elég azt nézni, mi van leírva. Azt is követni kell, mikor mi fut le.

Mi történik betöltéskor?

A script nagyjából ebben a sorrendben fut le:

script.js elindul
      ↓
DOM-elemek megkeresése
      ↓
konstansok és state létrejön
      ↓
függvénydefiníciók létrejönnek
      ↓
event listenerek regisztrálódnak
      ↓
reset()
      ↓
render()
      ↓
WAIT

A függvénydefiníció létrejötte nem ugyanaz, mint a függvény lefutása.

function reset() {
  // definíció
}

reset(); // hívás

Event-driven működés

A Signal Lab a betöltés után többnyire vár:

WAIT
 ↓
event
 ↓
update
 ↓
render
 ↓
WAIT

Nincs saját, folyamatosan futó frame loopunk.

Cables MainLoop vs event-driven JavaScript

CABLES
MainLoop → frame → frame → frame → ...

SIGNAL LAB
WAIT → event → update → render → WAIT

Ez nem azt jelenti, hogy az egyik jobb. Más problémára más végrehajtási modell alkalmas.

Animációnál később megjelenik a böngésző requestAnimationFrame() API-ja is.

A böngésző ettől még renderel

Az, hogy a saját JavaScriptünk eseményre vár, nem jelenti azt, hogy a böngésző teljes rendszere „megáll”. A böngésző továbbra is kezeli a layoutot, paintet, compositingot és a megjelenítést.

DevTools Console

A Console nem csak hibák helye. Megfigyelési output is lehet.

console.table({
  inputX: Math.round(pointerX),
  inputY: Math.round(pointerY),
  size: Math.round(mappedSize),
});

A Snapshot gomb vagy a Space ezért hasznos: egy adott pillanatban láthatóvá teszi a state-et.

A hiba is output

Tegyük fel, hogy ezt írjuk:

const signal = document.querySelector("#singal");

A selector el van írva. A signal értéke null lesz, majd később:

signal.style.left = "100px";

hibát ad.

A hibaüzenet adat arról, hogy a rendszer hol és milyen feltételezéssel omlott meg.

A hiba is output.

Break → Repair

Használható hibakeresési ciklus:

IDENTIFY
   ↓
LOCATE
   ↓
INSPECT
   ↓
FIX
   ↓
VERIFY

Ne az legyen az első reflex, hogy mindent átírunk. Először szűkítsük le, melyik kapcsolat szakadt meg.

Read → Predict → Run

Tanulásnál is ez a fontos ciklus:

1. Read — olvasd el a kis kódrészletet.
2. Predict — mondd meg előre, mi fog történni.
3. Run — futtasd le.
4. Hasonlítsd össze az eredményt a jóslatoddal.

Példa: mi történik, ha MAX_SIZE = 220 helyett MAX_SIZE = 500? A jó válasz nem csak az, hogy „nagyobb lesz”, hanem hogy melyik inputtartomány milyen outputtartományra képeződik át.

Ellenőrző kérdések

1. Mi fut le egyszer az oldal betöltésekor?
2. Mit jelent az, hogy a Signal Lab event-driven?
3. Miért hasznos a Console akkor is, ha nincs hiba?
4. Miért érdemes módosítás előtt jóslatot tenni?