| State Pattern1 : C++ State pattern을 자바스크립트로 변환 State Pattern1에서 C++ State pattern을 자바스크립트로 변환하는 방법에 대해서 알아 보았다. 자바스크립트가 C++ 행세를 하는 코드 처럼 보였다. 코드가 어려워진 느낌이 들었다. 인터넷에서 자바스크립트 다운 State Pattern을 찾아 보았다. Krasimir님의 블로그에서 자바스크립트 다운 State Pattern을 찾았다. 상태를 바꿀때 실행되는 enter, execute, exit 함수는 없지만 상태관리는 깔끔해 보인다. 먼저 코드부터 보자. const loginFsm = {
currentState: 'login form', states: { 'login form': { submit: 'loading' }, 'loading': { success: 'profile', failure: 'error' }, 'profile': { viewProfile: 'profile', logout: 'login form' }, 'error': { tryAgain: 'loading' } } }; const changeState = function (name, stateObj) { const state = stateObj.currentState; if (stateObj.states[state][name]) { stateObj.currentState = stateObj.states[state][name]; console.log(`${state} + ${name} --> ${stateObj.currentState}`); return true; } else { console.error(`can't change currentState:${state} --> command:${name}`); return false; } } //changeState('aaa', loginFsm); changeState('tryAgain', loginFsm); // login form + tryAgain --> login form changeState('submit', loginFsm); // login form + submit --> loading changeState('submit', loginFsm); // loading + submit --> loading changeState('failure', loginFsm); // loading + failure --> error changeState('submit', loginFsm); // error + submit --> error changeState('tryAgain', loginFsm); // error + tryAgain --> loading changeState('success', loginFsm); // loading + success --> profile changeState('viewProfile', loginFsm); // profile + viewProfile --> profile changeState('logout', loginFsm); // profile + logout --> login form currentState는 현재 상태를 나타낸다. loginFsm.states 다음과 같이 나타 낼 수 있다.
changeState 함수는 loginFsm.states 오브젝트 프로퍼티 현재 상태에서 해당하는 상태 변환 명령이 있으면 console.log로 현재 상태, 상태 변환 명령, 현재 상태를 출력한다. 해당하는 상태 변환 명령이 있으면 console.error로 에러 메세지를 출력한다. 에러난 경우는 현재상태에서 상태 변환 명령을 찾을수 없기 때문에 발생한다. tryAgain 명령은 현재상태가 'error' 상태일때만 실행된다. submit 명령은 현재상태가 'login form' 상태일때만 실행된다. 실행 결과) can't change currentState:login form --> command:tryAgain login form + submit --> loading can't change currentState:loading --> command:submit loading + failure --> error can't change currentState:error --> command:submit changeState @ statePattern2.html:42 error + tryAgain --> loading loading + success --> profile profile + viewProfile --> profile profile + logout --> login form 다운로드 : statePattern2.html 참고) http://krasimirtsonev.com/blog/article/managing-state-in-javascript-with-state-machines-stent |