13. 상태 모드

1. 특징
대상 이 내부 상태 가 바 뀔 때 행동 을 바 꿀 수 있 도록 허용 합 니 다. 대상 이 종 류 를 수정 한 것 처럼 보 입 니 다.
2、demo
전등 의 켜 기, 밝기, 끄 기
// OffLightState:
var OffLightState = function(light) {
    this.light = light;
};

OffLightState.prototype.buttonWasPressed = function() {
    console.log('  '); // offLightState      
    this.light.setState(this.light.weakLightState); //      weakLightState
};
// WeakLightState:
var WeakLightState = function(light) {
    this.light = light;
};

WeakLightState.prototype.buttonWasPressed = function() {
    console.log('  '); // weakLightState      
    this.light.setState(this.light.strongLightState); //      strongLightState
};
// StrongLightState:
var StrongLightState = function(light) {
    this.light = light;
};

StrongLightState.prototype.buttonWasPressed = function() {
    console.log('  '); // strongLightState      
    this.light.setState(this.light.offLightState); //      offLightState
};

var Light = function() {
    this.offLightState = new OffLightState(this);
    this.weakLightState = new WeakLightState(this);
    this.strongLightState = new StrongLightState(this);
    this.button = null;
};

Light.prototype.init = function() {
    var button = document.createElement('button'),
        self = this;
    this.button = document.body.appendChild(button);
    this.button.innerHTML = '  ';
    this.currState = this.offLightState; //       
    this.button.onclick = function() {
        self.currState.buttonWasPressed();
    }
};

Light.prototype.setState = function(newState) {
    this.currState = newState;
};

var light = new Light();
light.init();

참고 문헌:

좋은 웹페이지 즐겨찾기