자바스크립트와 유한상태머신에 대한 자세한 설명_기본지식

간단히 말하면 3가지 특징이 있습니다.

코드 복사 코드는 다음과 같습니다.

* 총 상태(state)의 개수는 제한되어 있습니다.
* 어느 순간에도 당신은 오직 하나의 상태에만 있습니다.
* 특정 조건에서는 한 상태에서 다른 상태로 전환됩니다.

JavaScript의 의미는 많은 객체를 유한 상태 기계로 작성할 수 있다는 것입니다.

예를 들어 웹페이지에 메뉴 요소가 있습니다. 마우스를 가리키면 메뉴가 표시되고 마우스를 멀리 이동하면 메뉴가 숨겨집니다. 유한 상태 기계를 사용하여 설명하는 경우 이 메뉴에는 두 가지 상태(표시 및 숨기기)만 있으며 마우스는 상태 전환을 유발합니다.

코드는 다음과 같이 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var menu = {

　　// 현재 상태
currentState: 'hide',

// 이벤트 바인딩
초기화: function() {
var self = this;
self.on("hover ", self.transition);
　},

　 // 상태 전환
전환: function(event){
switch(this.currentState) {
case "hide":
This.currentState = 'show';
doSomething();
case "show":
doSome thing();
break;
　　default:
　 console.log ('잘못된 상태!');
　　　　 break;
　　　}
　　}

　};
보시다시피 유한 상태 기계의 작성 방법은 명확한 논리와 강력한 표현력을 갖추고 있어 이벤트를 캡슐화하는 데 도움이 됩니다. 객체가 더 많은 상태를 갖고 더 많은 이벤트가 발생할수록 유한 상태 기계 작성을 사용하는 것이 더 적합합니다.

또한 JavaScript 언어는 비동기 작업이 많은 언어입니다. 일반적인 해결 방법은 콜백 함수를 지정하는 것이지만 이로 인해 코드 구조가 혼란스럽고 테스트 및 디버깅이 어려워지는 등의 문제가 발생합니다. 유한 상태 머신은 더 나은 방법을 제공합니다. 비동기 작업을 객체의 상태 변경에 연결하면 해당 상태 변경이 발생하여 다른 작업이 트리거됩니다. 이는 콜백 함수, 이벤트 수신 및 게시/구독과 같은 솔루션보다 코드의 복잡성을 줄이는 것이 더 논리적으로 합리적이고 쉽습니다.

다음은 유한 상태 기계 함수 라이브러리 Javascript Finite State Machine을 소개합니다. 이 라이브러리는 이해하기 매우 쉽고 이해를 깊게 하는데 도움을 줄 수 있으며 그 기능도 전혀 약하지 않습니다.

이 라이브러리는 전역 개체 StateMachine을 제공합니다. 이 개체의 생성 메서드를 사용하면 유한 상태 기계의 인스턴스를 생성할 수 있습니다.

코드 복사

코드는 다음과 같습니다.var fsm = StateMachine.create();

생성할 때 인스턴스의 성격을 설명하는 매개변수 개체를 제공해야 합니다. 예를 들어 신호등(신호등)은 다음과 같이 설명할 수 있습니다.

코드 복사

코드는 다음과 같습니다.var fsm = StateMachine.create({초기: '녹색',

이벤트: [
{ 이름: 'warn', from: 'green', to: 'yellow' },
{ 이름: ' stop', from: 'yellow', to: 'red' },
{ 이름: 'ready', from: 'red', to: 'yellow' },
{ 이름: 'go', from : '노란색', 대상: '녹색' }
]
});



신호등의 초기 상태는 녹색이고, 이벤트 속성은 상태 변경을 유발하는 다양한 이벤트입니다. 예를 들어 경고 이벤트는 녹색 상태를 노란색 상태로 변경하고, 중지 이벤트는 노란색 상태를 변경합니다. 빨간색 상태 등.

인스턴스를 생성한 후 언제든지 현재 상태를 쿼리할 수 있습니다.

코드 복사

코드는 다음과 같습니다. * fsm.current: 현재 상태를 반환합니다. . * fsm.is(s): 상태 s가 현재 상태인지 여부를 나타내는 부울 값을 반환합니다. * fsm.can(e): 현재 상태에서 이벤트 e가 트리거될 수 있는지 여부를 나타내는 부울 값을 반환합니다.

* fsm.cannot(e): 현재 상태에서 이벤트 e를 트리거할 수 없는지 여부를 나타내는 부울 값을 반환합니다.

Javascript Finite State Machine을 사용하면 경고 이벤트를 예로 들어 각 이벤트에 대해 두 개의 콜백 함수를 지정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

* onbeforewarn: 경고 이벤트가 발생하기 전에 트리거됩니다. .
* onafterwarn(onwarn으로 축약 가능): 경고 이벤트가 발생한 후 트리거됩니다.

동시에 녹색 상태를 예로 들어 각 상태에 대해 두 개의 콜백 함수를 지정할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

* onleavegreen: 녹색 상태를 벗어날 때 트리거됩니다. .
* onentergreen(ongreen으로 축약 가능): 녹색 상태로 진입할 때 트리거됩니다.

warn 이벤트가 녹색에서 노란색으로 상태를 변경한다고 가정하면 위의 4가지 콜백 함수의 발생 순서는 onbeforewarn → onleavegreen → onenteryellow → onafterwarn입니다.

각 이벤트 및 상태에 대해 별도의 콜백 함수를 지정하는 것 외에도 모든 이벤트 및 상태에 대해 공통 콜백 함수를 지정할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

* onbeforeevent: 이벤트가 발생하기 전에 트리거됩니다.
* onleavestate: 어떤 상태에서든 떠날 때 트리거됩니다.
* onenterstate: 어떤 상태에든 들어갈 때 트리거됩니다.
* onafterevent: 이벤트가 종료된 후 트리거됩니다.

이벤트 콜백 함수에 비동기 작업(예: 서버와의 Ajax 통신)이 있는 경우 상태가 변경되기 전에 비동기 작업이 끝날 때까지 기다리는 것이 좋습니다. 이를 위해서는 전환 방법을 사용해야 합니다.

코드 복사 코드는 다음과 같습니다.

fsm.onwarn = function(){
light .fadeOut('slow', function() {
fsm.transition();
});
return StateMachine.ASYNC;
};

위 코드의 콜백 함수에는 비동기 작업(light.fadeOut)이 있습니다. 상태를 즉시 변경하지 않으려면 콜백 함수가 상태가 일시적으로 변경되지 않음을 나타내는 StateMachine.ASYNC 개체를 반환하도록 해야 합니다. 그런 다음 전환 메서드를 호출하여 상태를 변경합니다.

Javascript Finite State Machine을 사용하면 현재 상태에서 발생할 수 없는 이벤트가 발생할 때 자동으로 트리거되는 오류 처리 기능을 지정할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

var fsm = StateMachine.create({
/ / ...
error: function(eventName, from, to, args, errorCode, errorMessage) {
return 'event 'eventName': ' errorMessage;
},
// ...
});

예를 들어 현재 상태가 녹색이라면 이 시점에서는 이론적으로 경고 이벤트만 발생할 수 있습니다. 이때 중지 이벤트가 발생하면 위의 오류 처리 기능이 실행됩니다.