6. 당근게임 - 리팩토링(팝업 클래스)

 

 

코드의 모듈화!

constructor() : 클래스의 인스턴스 객체를 생성/초기화하는 특별한 함수

 

main.js에 팝업에 관련된것들을 가져와 바인딩함. 

모듈화 후에는 main.js에 팝업관련된것들을 생략하고 , PopUp class를 삽입하여 작동하게 해줌.

 

 

PopUp JS

'use strict';

export default class PopUp {  //export -> 외부에 노출하겠다~
  constructor() {   //constructor() : 클래스의 인스턴스 객체를 생성/초기화하는 특별한 함수
    //PopUp class에 멤버변수 3개를 만들어줌
    this.popUp = document.querySelector('.pop-up');
    this.popUpMessage = document.querySelector('.pop-up__message');
    this.popUpRefreshBtn = document.querySelector('.pop-up__refresh');

    this.popUpRefreshBtn.addEventListener('click', () => {
      this._hide();
      this.onClick && this.onClick();
    });
  }

  setClickListener(onClick) { //
    this.onClick = onClick;
  }

  showWithText(text) {
    this.popUpMessage.innerText = text;
    this.popUp.classList.remove('hide');
  }

  _hide() {
    this.popUp.classList.add('hide');
  }
}

코드의 모듈화!

constructor() : 클래스의 인스턴스 객체를 생성/초기화하는 특별한 함수