자바스크립트(Javascript) 디자인 패턴 - 중재자(Mediator) 패턴

중재자 패턴은 객체들이 어떻게 통신하는지 추상적으로 만들어 놓은 객체를 정의한다. 객체간의 결합도를 낮추고 유지보수를 쉽게 할 수 있는 효과를 가져온다. 객체간 직접 통신하지 않고, 중재자 객체 를 거치기 때문이다. (e.g. 자신의 상태가 변경될 때 중재자에 알릴 때, 중재자는 변경분을 알아야 하는 객체에게 알린다)

흡사 옵저버랑 유사해보인다. 예시를 통해 알아보자.

예시

게임을 예시로 들어 어떻게 활용할 수 있는지, 자바스크립트로는 어떻게 구현하는지 알아보자. 두 명의 플레이어 중 30초 동안 더 많이 버튼을 누르는 플레이어가 이기는 게임 을 만든다고 해보자. 3가지를 정의할 수 있다.

• 플레이어 객체 정의
• Scoreboard 객체 정의
• 중재자(Mediator) 객체 정의

플레이어

function Player(name) {
    this.name = name;
    this.points = 0;
}

Player.prototype.play = function() {
    this.points += 1;

    // 버튼 눌렀을 때 점수 증가 후 중재자 호출
    mediator.played();
}

플레이 버튼을 눌렀을 경우 점수 증가 후 중재자를 호출하여 다음 작업을 수행한다. 중재자의 played() 함수가 있지만 아직 무엇을 할지는 모른다. 즉, 이 객체는 상세하게 유저가 어떤 동작하는지 알 필요는 없다. 객체와의 결합도가 낮아져 유지보수가 용이하다.

스코어보드

var scoreboard = {
    ...
    update: function(score) {
        for (i in score) {
            // 점수 표시
        }
    }
};

중재자(Mediator)

중재자에 포함되어야 하는 데이터를 정의한다.

• 플레이어들의 목록 관리
• 초기화 기능
• 버튼을 눌렀을 때 반영할 played 기능
• 키 입력 받았을 때 핸들링

var mediator = {
    players: {},

    // 초기 플레이어 설정
    setup: function() {
        var players = this.players;
        players.home = new Player('home');
        players.guest = new Player('guest');
    }

    // 버튼 클릭이 일어났을 경우 보드판 갱신
    played: function() {
        var players = this.players,
            score = {
            Home: players.home.points,
          Guest: players.guest.points
        };

      scoreboard.update(score);
  },

    // key event
    keypress = function(e) {
        if (e.which == "1번 키") {
            mediator.player.home.play();
            return;
        }
        if (e.which == "0번 키") {
            mediator.player.guest.play();
            return;
        }
    }
}

참고

• 자바스크립트 디자인패턴 책