State Pattern4

State Pattern1 : C++ State pattern을 자바스크립트로 변환
State Pattern2: 상태 변환 테이블
State Pattern3: 자바스크립트 다움의 상태패턴

상태 변환 테이블과 자바스크립트 상태패턴을 합쳐 보자.

앞장에서도 설명 했지만 다시 한번 설명 한다.

changeStateKey 함수 : stateObj 테이블에서 name 변환키를 가진 이름이 있는지 체크한다.
여기서 stateObj는 actTable로 상태의 이름 테이블이다.

getFsm 함수 : changeStateKey로 구한 키를 이용해 상태 오브젝트를 리턴한다.
여기서는 Run이나 Walk 상태를 리턴 할 것이다.

사용 방법)

_stateManager.setState( getFsm('walk2Run', actTable)());

getFsm( )함수로 상태를 구해서 함수를 실행하면 상태가 생성된다.
상태는 Run이나 Walk 둘중에 하나이다.

window.addEventListener('DOMContentLoaded', function(){
    appMain.init();
});

const changeStateKey = function (name, stateObj) {
    const state = stateObj.currentState;

    if (stateObj.transition[state][name]) {
        stateObj.currentState = stateObj.transition[state][name];
        console.log(`${state} + ${name} --> ${stateObj.currentState}`);
        return stateObj.currentState;
    }
    else {
        console.error(`can't change currentState:${state} --> command:${name}`);
        return false;
    }
}

const getFsm = function (name, stateObj) {
    let key = changeStateKey(name, stateObj);
    if(!key)
        return key;

    if(!stateObj.state.hasOwnProperty(key))
        return false;

    return stateObj.state[key];
}

var StateManager = function(){
    var proto = StateManager.prototype;

    function StateManager(){
        this.prevStae = null;
        this.state = null;
    }

    proto.setState = function(newState){
        if(this.state && this.state.exit)
            this.state.exit();
        this.state = newState;
        if(this.state.enter)
            this.state.enter();
    };

    proto.execute = function(){
        if(this.state === null)
            return;
        this.state.execute();
    };

    return new StateManager();
};

var appMain = (function () {
    var _stateManager = StateManager();

    var Walk = function(){
        var proto = Walk.prototype;
        function Walk(){}

        proto.execute = function(){
            console.log('walk execute');
        };

        return new Walk();
    };

    var Run = function(){
        var proto = Run.prototype;
        function Run(){}

        proto.enter = function(){
            console.log('Run enter');
        };

        proto.execute = function(){
            console.log('Run execute');
        };

        proto.exit = function(){
            console.log('Run exit');
        };
        return new Run();
    };

    function init(){
        console.log('appMain init');
        _stateManager.setState(actTable.state['walk']());
        _stateManager.execute();
        _stateManager.setState( getFsm('walk2Run', actTable)());
        _stateManager.execute();
        _stateManager.setState( getFsm('run2walk', actTable)());
        _stateManager.execute();
    }

    //마지막 부분에 두는것이 좋다. 첫 부분에 두면 Walk, Run 함수가 undefined 될수도 있다.
    const actTable = {
        currentState: 'walk',
        transition: {
            'walk': {
                walk2Run: 'run'
            },
            'run': {
                run2walk: 'walk',
            }
        },
        state: {
            'walk': Walk,
            'run': Run
        }
    };

    return {
        init: init,
    };
})();

실행 결과)
appMain init
walk execute
walk + walk2Run --> run
Run enter
Run execute
run + run2walk --> walk
walk execute

다운로드 : statePattern4.html