2021년 1월 18일 복기 (TIL SUBCLASS DANCE PARTY)

https://developer.mozilla.org/ko/docs/Web/API/WindowTimers/setTimeout

class Parent {
       autoPlay() {
           this.play("automatically "); // call child method
       }
       play(x) {
           console.log(x+"playing default from "+this.constructor.name);
       }
}
class ChildA extends Parent {
       // does not override play
}
class ChildB extends Parent {
       constructor(song) {
           super();
           this.song = this;
       }
       play(x) {
           console.log(x+"playing "+this.song+" from ChildB");
       }
}
const child1 = new ChildA();
child1.autoPlay();
const child2 = new ChildB("'Yeah'");
child2.autoPlay();
automatically playing default from ChildA
automatically playing [object Object] from ChildB

overwrite를 하였다.

일단 다 했는데

코드를 한번 써보자한다.

복기 차원에서

/* global DancerClass */
if (typeof window === "undefined") {
  var jsdom = require("jsdom");
  var { JSDOM } = jsdom;
  var { document } = new JSDOM("").window;
}
if (typeof window === "undefined") {
  global.DancerClass = require("./DancerClass");
} // you don't have to worry about this code. this is for testing.

// blinkyDancer를 class 키워드를 써서 ES6 방식으로 리팩토링하세요
// 여기에는 Pseudoclassical에서 정의된 BlinkyDancer와 이름이 겹치므로, BlinkyDancerClass라는 이름을 사용합니다.
class BlinkyDancerClass extends DancerClass {
  step() {
    super.step();
    let style = this.$node.style;
    style.display = style.display === "none" ? "inline-block" : "none";

    // call the old version of step at the beginning of any call to this new version of step
  }
  createDancerElement() {
    let fruits = document.createElement("img");
    fruits.setAttribute("src", "banana.png");
    fruits.className = "fruits";
    return fruits;
  }
}
// you don't have to worry about this code. this is for testing.
if (typeof window === "undefined") {
  module.exports = BlinkyDancerClass;
}

if (typeof window === "undefined") {
  global.DancerClass = require("./DancerClass");
} // you don't have to worry about this code. this is for testing.

// blinkyDancer를 class 키워드를 써서 ES6 방식으로 리팩토링하세요
// 여기에는 Pseudoclassical에서 정의된 BlinkyDancer와 이름이 겹치므로, BlinkyDancerClass라는 이름을 사용합니다.
class BlinkyStrawClass extends DancerClass {
  step() {
    super.step();
    let style = this.$node.style;
    style.display = style.display === "none" ? "inline-block" : "none";

    // call the old version of step at the beginning of any call to this new version of step
  }
  createDancerElement() {
    let fruits = document.createElement("img");
    fruits.setAttribute("src", "strawberry.png");
    fruits.className = "fruits";
    return fruits;
  }
}
// you don't have to worry about this code. this is for testing.
if (typeof window === "undefined") {
  module.exports = BlinkyStrawClass;
}

if (typeof window === "undefined") {
  var jsdom = require("jsdom");
  var { JSDOM } = jsdom;
  var { document } = new JSDOM("").window;
}

class DancerClass {
  constructor(top, left, timeBetweenSteps) {
    this.top = top;
    this.left = left;
    this.timeBetweenSteps = timeBetweenSteps;
    this.$node = this.createDancerElement();
    this.step();
    this.setPosition(top, left);
  }

  step() {
    // the basic dancer doesn't do anything interesting at all on each step,
    // it just schedules the next step
    setTimeout(this.step.bind(this), this.timeBetweenSteps);
    console.log("step을 밟고 있어요", this);
  }

  setPosition(top, left) {
    // Use css top and left properties to position our <span> tag
    Object.assign(this.$node.style, {
      top: `${top * Math.random()}px`,
      left: `${left * Math.random()}px`,
    });
  }
  render(target) {
    target.appendChild(this.$node);
  }

  // now that we have defined the dancer object, we can start setting up important parts of it by calling the methods we wrote
  // this one sets the position to some random default point within the body
}
// you don't have to worry about this code. this is for testing.
if (typeof window === "undefined") {
  module.exports = DancerClass;
}
function handleClickStrawButton() {
  let dancer = new BlinkyStrawClass(
    document.body.clientHeight,
    document.body.clientWidth,
    Math.random() * 1000
  );
  dancer.render(document.body);
  // document.body.appendChild(dancer.$node);
  dancers.push(dancer);
}
window.addEventListener("DOMContentLoaded", () => {
  const elAddBananaButton = document.querySelector(".addBananaButton");
  elAddBananaButton.addEventListener("click", handleClickDancerButton);

  const elAddStrawButton = document.querySelector(".addStrawButton");
  elAddStrawButton.addEventListener("click", handleClickStrawButton);
});