๐Ÿ‰ Dance Party

functional์„ ๋จผ์ € ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

  • dancer.js

var makeDancer = (top, left, timeBetweenSteps) => {
  // ๊ฐ๊ฐ์˜ ๋งค์„œ๋“œ๋ฅผ ์ €์žฅ.
  const dancer = {};

  // DOM์œผ๋กœ span ํƒœ๊ทธ๋ฅผ ๋งŒ๋“ฌ.
  const createDancerElement = () => {
    let elDancer = document.createElement('span');
    elDancer.className = 'dancer';
    return elDancer;
  };

  // ๋งŒ๋“ ๊ฒƒ์„ ๋…ธ๋“œ์— ๋‹ด๊ธฐ.
  dancer.$node = createDancerElement();

  // dancer.step์„ ๋ฐ˜๋ณตํ•ด์„œ ์‹คํ–‰ ์‹œํ‚ค๋Š” ๊ณณ
  dancer.step = () => {
    setTimeout(dancer.step, timeBetweenSteps);
  };

  // dancer์˜ ์œ„์น˜ ๊ฐ’์„ ์ •ํ•˜๋Š” ๊ณณ.
  dancer.setPosition = (top, left) => {
    // Use css top and left properties to position our <span> tag
    Object.assign(dancer.$node.style, {
      top: `${top}px`,
      left: `${left}px`
    });
  };

  // dancer๊ฐ€ ๋งŒ๋“ค์–ด ์ง€์ž ๋ง์ž ๋ฐ”๋กœ ์‹คํ–‰์„ ์‹œ์ผœ ์ค๋‹ˆ๋‹ค.
  dancer.step();
  dancer.setPosition(top, left);

  return dancer;
};
  • blinkyDancer.js
var makeBlinkyDancer = (top, left, timeBetweenSteps) => {

  // blinkyDancer ์—๋‹ค๊ฐ€ makeDancer๋ฅผ ๋‹ค์‹œ ์ •์˜ํ•œ๋‹ค.
  const blinkyDancer = makeDancer(top, left, timeBetweenSteps);

  // ์›๋ž˜ makeDancer์˜ ๊ฐ’๋“ค์„ ์บ์‹ฑ ํ•˜๋Š”๊ณณ.
  let oldStep = blinkyDancer.step;
/*
   ์‹คํ–‰์‹œํ‚ค๋ฉด ์ƒˆ๋กœ์šด step์„ ๋งŒ๋“ค๊ณ ,
      oldStep์„ ๋‹ค์‹œ ๋“ค๊ณ ์™€์„œ ์‹คํ–‰์‹œํ‚ค๊ณ , 
          style์„ ๋ณ€๊ฒฝ์‹œ์ผœ ์ถ”๊ฐ€ํ•˜๊ณ ,
            setTimeout์œผ๋กœ ์ธํ•ด ๊นœ๋นก๊ฑฐ๋ฆฝ๋‹ˆ๋‹ค.
                  ๋ฎ์–ด์“ฐ๋Š” ๊ฒƒ์ด ์•„๋‹Œ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ( ๊ฐ’์„ ์ถ”๊ฐ€ ์‹œํ‚ด => ๊นœ๋นก๊ฑฐ๋ฆฌ๊ฒŒ)
*/
  blinkyDancer.step = () => {
    oldStep();

    let style = blinkyDancer.$node.style;
    style.display = style.display === 'none' ? 'inline-block' : 'none';
  };

  return blinkyDancer;
};

๐Ÿ‡ Class

  • DancerClass.js
// ์ธ์ž๋“ค์„ constructor์— ๋‹ค ๋„ฃ์–ด์ฃผ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.
class DancerClass {
  constructor(top, left, timeBetweenSteps){
    this.timeBetweenSteps = timeBetweenSteps;
    this.$node = this.createDancerElement();
    this.step();
    this.setPosition(top, left);
  }

  // ๋งค๊ฐœ๋ณ€์ˆ˜๋“ค์€ ํด๋ž˜์Šค ์•ˆ์— ์„ค์ •ํ•ด ์ฃผ๋ฉด๋ฉ๋‹ˆ๋‹ค.
  createDancerElement() {
    let elWilly = document.createElement('img');
    elWilly.className = 'willy';
    elWilly.src = 'img/22.jpg';
    elWilly.addEventListener('click',function() {
      elWilly.src = 'img/Fireworks - Imgur.gif';
      elWilly.name = 'findWilly';
    });
    return elWilly;
  }

  // setTimeout ์€ ๋น„๋™๊ธฐ๋กœ bind(this)๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
  step() {
    setTimeout(this.step.bind(this), this.timeBetweenSteps)
  }
  setPosition(top, left) {
    Object.assign(this.$node.style, {
      top: `${top}px`,
      left: `${left}px`
    });
  }
}
  • BlinkyDancerClass.js
    // extends๋ฅผ ํ†ตํ•ด์„œ ๋ถ€๋ชจ์˜ ์ธ์Šคํ„ด์Šค๋“ค์„ ๋‹ค ๊ฐ€์ง€๊ณ  ์˜ต๋‹ˆ๋‹ค. ๋ถ€๋ชจ์˜ ๊ฒƒ์„ ๋‹ค ๊ฐ€์ ธ๋‹ค
    // ์“ฐ๋ ค๋ฉด constructor์™€ super์„ ์ง€์›Œ๋„ ๋ฉ๋‹ˆ๋‹ค. ๋ถ€๋ชจ์˜
    class BlinkyDancerClass extends DancerClass {
    //constructor(top, left, timeBetweenSteps) {
    //  super(top, left, timeBetweenSteps);
    // }
     step() {
       super.step();
       let style = this.$node.style;
       //style.display = style.display === 'none' ? 'inline-block' : 'none';
     }
    }