간단히 말해서 세 가지 특성이 있습니다.
코드 사본은 다음과 같습니다.
* 총 주 수 (주)는 제한되어 있습니다.
* 언제든지, 당신은 한 주에만 있습니다.
* 특정 조건에서는 한 상태에서 다른 상태로 전환됩니다.
JavaScript의 의미는 많은 객체를 유한 상태 기계로 작성할 수 있다는 것입니다.
예를 들어 웹 페이지에 메뉴 요소가 있습니다. 마우스가 호버링되면 메뉴가 표시됩니다. 마우스가 멀어지면 메뉴가 숨겨져 있습니다. 유한 상태 머신 설명을 사용하는 경우이 메뉴에는 두 개의 상태 (표시 및 숨기기)가 있으며 마우스는 상태 전환이 트리거됩니다.
코드는 다음과 같이 작성할 수 있습니다.
코드 사본은 다음과 같습니다.
var 메뉴 = {
// 현재 상태
현재 상태 : '숨기기',
// 바인딩 이벤트
초기화 : function () {
var self = 이것;
self.on ( "호버", self.ransition);
},
// 상태 전환
전환 : 함수 (이벤트) {
스위치 (this.currentState) {
"숨기기":
this.currentState = 'show';
dosomething ();
부서지다;
케이스 "쇼":
this.currentState = '숨기기';
dosomething ();
부서지다;
기본:
Console.log ( '유효하지 않은 상태!');
부서지다;
}
}
};
유한 상태 기계의 쓰기 방법은 논리가 명확하고 표현이 강력하며, 이는 이벤트를 캡슐화하는 데 도움이된다는 것을 알 수 있습니다. 객체의 상태가 많을수록 이벤트가 많을수록 유한 상태 머신 쓰기 방법을 사용하는 것이 더 적합합니다.
또한 JavaScript는 많은 비동기 작업이있는 언어입니다. 일반적으로 사용되는 솔루션은 콜백 기능을 지정하는 것이지만, 이는 혼란스러운 코드 구조, 테스트 및 디버깅이 어려운 문제를 일으 킵니다. 유한 상태 머신은 더 나은 방법을 제공합니다. 비동기 작업이 완료되면 해당 상태 변경이 발생하여 다른 작업이 발생합니다. 이는 콜백 기능, 이벤트 청취, 게시/구독 등의 솔루션보다 논리적으로 합리적이며 코드의 복잡성을 줄이기가 더 쉽습니다.
다음은 유한 상태 머신 라이브러리, JavaScript 유한 상태 기계입니다. 이 라이브러리는 이해하기 쉽고 우리의 이해를 심화시키는 데 도움이 될 수 있으며 그 기능은 전혀 약하지 않습니다.
이 라이브러리는 객체의 생성 메소드를 사용하여 유한 상태 머신의 인스턴스를 생성하는 글로벌 오브젝트 스테이커 카인을 제공합니다.
코드 사본은 다음과 같습니다.
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 : 'Yellow', to : 'green'}}
]]
});
신호등의 초기 상태는 녹색입니다. 이벤트 속성은 녹색 상태가 황색 상태가되는 경고 이벤트와 같이 상태 변경을 유발하는 다양한 이벤트입니다. 정지 이벤트는 노란색 상태가 빨간색 상태가됩니다.
인스턴스를 생성 한 후 언제든지 현재 상태를 쿼리 할 수 있습니다.
코드 사본은 다음과 같습니다.
* fsm.current : 현재 상태를 반환합니다.
* FSM.IS : 상태 S가 현재 상태인지를 나타내는 부울 값을 반환합니다.
* fsm.can (e) : 현재 상태에서 이벤트 e를 트리거 할 수 있는지 여부를 나타내는 부울 값을 반환합니다.
* fsm.cannot (e) : 현재 상태에서 이벤트 e를 트리거 할 수 없는지 여부를 나타내는 부울 값을 반환합니다.
JavaScript 유한 상태 머신 각 이벤트에 대해 두 개의 콜백 기능을 지정하여 경고 이벤트를 예로 들어 볼 수 있습니다.
코드 사본은 다음과 같습니다.
* onbeforewarn : 경고 이벤트가 발생하기 전에 트리거되었습니다.
* OnaFterwarn (Onwarn으로 약칭 할 수 있음) : 경고 사건이 발생한 후 트리거됩니다.
동시에, 각 상태에 대해 두 개의 콜백 함수를 지정할 수 있으며, 그린 상태를 예로들 수 있습니다.
코드 사본은 다음과 같습니다.
* OnleaveGreen : 녹색 상태를 떠날 때 트리거되었습니다.
* OnEnterGreen (Ongreen으로 약칭 할 수 있음) : 녹색 상태에 들어갈 때 트리거됩니다.
경고 이벤트가 상태를 녹색에서 노란색으로 변경한다고 가정하면 위의 네 가지 유형의 콜백 함수는 다음 순서로 발생합니다.
각 이벤트 및 상태에 대한 콜백 기능을 별도로 지정하는 것 외에도 모든 이벤트 및 상태에 대한 공통 콜백 기능을 지정할 수도 있습니다.
코드 사본은 다음과 같습니다.
* onbeforeevent : 이벤트가 발생하기 전에 트리거됩니다.
* oneevestate : 어떤 주를 떠날 때 트리거되었습니다.
* OnEnterstate : 상태에 들어갈 때 트리거되었습니다.
* OnaFterevent : 이벤트 중 하나가 끝난 후 트리거되었습니다.
이벤트의 콜백 기능 (예 : 서버와의 AJAX 통신)에 비동기 작업이있는 경우 상태 변경이 발생하기 전에 비동기 조작이 끝날 때까지 기다릴 수 있습니다. 이를 위해서는 전환 방법이 필요합니다.
코드 사본은 다음과 같습니다.
fsm.onwarn = function () {
light.fadeout ( 'slow', function () {
fsm.transition ();
});
return statemachine.async;
};
위 코드의 콜백 함수에는 비동기 조작 (light.fadeout)이 있습니다. 상태가 즉시 변경되기를 원하지 않으면 콜백 함수가 Statemachine.async 객체를 반환하도록해야합니다. 비동기 작업이 완료 될 때까지 기다린 다음 전환 방법을 호출하여 상태가 변경됩니다.
JavaScript 유한 상태 머신을 사용하면 현재 상태에서 발생할 수없는 이벤트가 자동으로 트리거되는 오류 처리 기능을 지정할 수 있습니다.
코드 사본은 다음과 같습니다.
var fsm = statemachine.create ({
// ...
오류 : 함수 (eventName, from, to, args, errorcode, errormessage) {
return 'event' + eventName + ':' + errormessage;
},
// ...
});
예를 들어, 현재 상태는 녹색이며 이론적으로 현재 경고 사건 만 발생할 수 있습니다. 현재 중지 이벤트가 발생하면 위의 오류 처리 기능이 트리거됩니다.