6/4 / Instantiation Patterns 3

Toy 

01번 문제. 

 

가위바위보 게임에서 input 으로 들어온 숫자만큼 낼 수 있는 경우의 수를 모두 리턴하는 문제.

 

오늘 못 품~

 

풀면 적어주겠따 ㅠㅠ

 

---

 

subclass Dance party 스프린트 

 

functional 방식으로 구현된 상속 패턴을 수도클래식컬과 클래스의 방식으로 리팩토링 후 css 해보는 스프린트.

 

1. pseudoclassical

리팩토링 모습 확인 후 커멘드 달기.

pseudoclassical

function Dancer (top,left,timeBetweenSteps) {
    const createDancerElement = function(){
    let elDancer = document.createElement('span');
    elDancer.className = 'dancer';
    return elDancer;
  } 
  this.$node = createDancerElement(); // this.$node = this.createDancerElement();
  this.top = top;
  this.left = left;
  this.timeBetweenSteps = timeBetweenSteps;
  this.step()
  this.setPosition(this.top,this.left)
}

 // constructor 개념에 원본을 생성

Dancer.prototype.step = function(){
  setTimeout(this.step, this.timeBetweenSteps);
}

// Dancer 를 참조해서 프로퍼티를 사용하는 메소드 함수를 상속해서 만든다.

Dancer.prototype.setPosition = function(top,left){
  Object.assign(this.$node.style, {
    top: `${top}px`,
    left: `${left}px`
  });
}

어떻게 상속 메소드를 활용하는가

function BlinkyDancer () {
  Dancer.apply(this,arguments);  
}

// Dancer 를 apply 로 this 에 인자들로 묶어서 상속으로 생성.

BlinkyDancer.prototype = Object.create(Dancer.prototype)
BlinkyDancer.prototype.constructor = BlinkyDancer;

// 상속을 묶어주는 과정. BlinkyDancer 를 Dancer 의 prototype을 참조해서 생성

BlinkyDancer.prototype.step = function(){
  let style = this.$node.style;
  style.display = style.display === 'none' ? 'inline-block' : 'none';
}

// prototype 으로 이미 상속받은 메소드 기능에 추가로 기능을 더 할 수 있다.

---

2. class

 

리팩토링 모습 확인 후 커멘드 달기.

class

class DancerClass {
  constructor(top, left, timeBetweenSteps) {
    this.$node = this.createDancerElement()
    this.top = top
    this.left = left
    this.timeBetweenSteps = timeBetweenSteps
    this.step()
    this.setPosition(this.top, this.left)
    //console.log(arguments[3])
  }

// class 의 constructor 생성

  createDancerElement() {
    let elDancer = document.createElement("img")
    elDancer.setAttribute("src", "https://media.giphy.com/media/9GIgKRMpMFCrWjsOIn/giphy.gif")
    elDancer.setAttribute("onclick", "onClick()")
    elDancer.className = "dancer"
    return elDancer
  }
  step() {
    setTimeout(this.step.bind(this), this.timeBetweenSteps)
  }
  setPosition(top, left) {
    Object.assign(this.$node.style, {
      top: `${top}px`,
      left: `${left}px`
    })
  }
}

// 함수형 메소드를 class 의 constructor 밑에 생성

어떻게 상속 메소드를 활용하는가

class BlinkyDancerClass extends DancerClass {
  step() {
    super.step()
    let style = this.$node.style
    style.display = style.display === "none" ? "inline-block" : "none"
  }
}

// extends 클래스명 으로 상속 .constructor 는 그대로 상송
// 중복되는 기능은 super 로 축약해서 상속, 추가 기능은 메소드 호출 후 추가

 

* 

constructor 메서드는 class 내에서 객체를 생성하고 초기화하기 위한 특별한 메서드

---

css 삽입한 dom 과정 삽입

 

 

스프린트 중 쉽고 빠르게 마칠 수 있다는 얘기를 듣고 시작했지만 css 잼병에 class 패턴을 처음 써본지라 시간이 생각보다 오래 걸렸다.

상속받은 기능에 추가로 기능을 구현하고 그 기능에 대한 css 를 연결하는 것에서 가장 애를 먹었고 기능을 이용해서 다른 것에 영향을 
주는 것 까진 완료하진 못했다.