Hoppa till innehåll

Utmaningar

Nedan finns tre frågor om komposition av webbkomponenter — hur oberoende komponenter bör kommunicera med varandra utan att bli hårt sammankopplade.

Varje fråga har ett antal alternativ att välja bland. Klicka på “Visa lösning” för att se svaret och förklaringen.

Om du är osäker kan du alltid testa i webbläsaren själv eller ta upp frågan på en handledning.

Fråga 13-01: What is “wrong” with the given code?

Section titled “Fråga 13-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.
...


customElements.define('my-component',
  class extends HTMLElement {
    constructor () {
      super()


      this.attachShadow({ mode: 'open' })
        .appendChild(template.content.cloneNode(true))


      let textElements = document.querySelectorAll('p')


      ...

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

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

Fråga 13-02: The Timer

Section titled “Fråga 13-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 my-timer-komponenten.
  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”.

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Svaret är alternativ 4.

Alternativ 1 skulle fungera men faller på att vi önskar att komponenterna ska vara oberoende av varandra. Alternativ 2 är olämpligt även om det skulle fungera — en komponent bör inte känna till sin omgivning, och denna lösning innebär att timern får ett yttre beroende mot knappen och därmed inte kan fungera om inte knappen finns där. Alternativ 3 är i princip samma lösning som 2.

Alternativ 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.

Fråga 13-03: The Game

Section titled “Fråga 13-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.

Tips

Section titled “Tips”

Lösningsförslag

Section titled “Lösningsförslag”

Svaret är alternativ 3.

Alternativ 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. Alternativ 2 är absolut en väg att gå, det fungerar, men att kommunicera detta via ett attribut (alternativ 3) är lämpligare då vi efterliknar det normala beteendet i HTML.

Alternativ 4 är inte säkert att det ens fungerar, eftersom det förutsätter att brickorna är åtkomliga via den normala DOM:en och inte är inbäddade i spelets egen shadow DOM.

CCBY