Utmaningar

F13-01: What is "wrong" with the given code?​

  1. Shadow-DOMs should always be in mode "close"​.
  2. We have external dependencies​.
  3. Anonymous classes can not be used when creating components​.
  4. Components should extend HTMLComponent​.
‌‌‌‌‌
Svar

Nummer 2. Vi har yttre beroenden mot DOM:en genom att vi använder document.querySelector. Vi ska aldrig referera domen utanför vår egen komponent. (Däremot är det ok att använda document.createElement)

F13-02: The Timer

Givet två, av varandra oberoende element, my-timer och button. När användaren klickar på knappen så ska timern stoppas. ​

Index.js innehållandes två av varandra oberoende komponenter. En klockkomponent och en knapp döpt button ​ Vilken konstruktion är lämpligast att använda?​ ​

  1. Knappen bäddas in i timerkomponenten.​
  2. Knappen anropar timerns publika metod "stop".​
  3. Timern lyssnar på knappens "click"-händelse vars hanterarfunktion anropar timerns publika metod "stop".​
  4. I index.js finns kod som lyssnar på knappens "click"-händelse vars hanterarfunktion anropar timerns publika metod "stop".​
Svar

Nummer 1 skulle fungera men faller på att vi önskar att komponenterna ska vara oberoende av varandra.
Nummer 2 är olämpligt även om det skulle fungera. En komponent bör inte känna till sin omgivning. Denna lösning innebär att timern får ett yttre beronende mot knappen och därmed inte kan fungera om inte knappen finns där.
Nummer 3 är i princip samma lösning som 2.
Nummer 4 är lämpligt. Nu behöver inte knappen känna till timern och timern behöver inte känna till knappen. Istället "limmar" index.js (eller en omslutande komponent) ihop lösningen.

F13-03: The Game

Ett spel innehåller brickor. ​

Vid spelets slut ska samtliga brickors framsida visas.​

Index.js innehållande komponenten "the-game". Denna komponent innehåller i sin tur sex spelbrickor, döpta "game-tile"

Vilket är det lämpligaste sättet att åstadkomma detta?​ ​

  1. Brickorna lyssnar på spelets händelse "gameover" ​och vänder sig själva.​
  2. Spelet anropar respektive brickas metod "flip" ​för att vända på brickan.​
  3. Spelet vänder brickorna genom att sätta attributet "flipped".​
  4. Spelkomponenten utlöser händelsen "gameover", varpå index.js fångar händelsen, söker ut samtliga brickor och ser till att de vänds.​

​

Svar

.1. Går givetvis att få att fungera, men nu har vi återigen ett beroende på fel håll. Barnen ska inte behöva känna till sin förälder. Det är bättre att föräldern talar om för barnet vad det ska göra.
.2. Absolut en väg att gå. Detta fungerar men....
.3. ... att kommunicera detta via ett attribut är lämpligare då vi efterliknar det normala beteendet i HTML.
.4. Det är inte säkert att detta ens fungerar för det förutsätter att brickorna är åtkomliga via den normala DOMen och inte är inbäddade i spelets shadowDOM.