Simplificando, ele tem três características:
A cópia do código é a seguinte:
* O número total de estados (estado) é limitado.
* A qualquer momento, você está apenas em um estado.
* Sob certas condições, ele passará de um estado para outro.
O que isso significa para JavaScript é que muitos objetos podem ser escritos como máquinas de estado finitas.
Por exemplo, existe um elemento de menu na página da web. Quando o mouse está pairando, o menu é exibido; Quando o mouse é afastado, o menu está oculto. Se você usar a descrição da máquina de estado finito, este menu possui apenas dois estados (mostrar e ocultar) e o mouse acionará uma transição de estado.
O código pode ser escrito da seguinte forma:
A cópia do código é a seguinte:
Var menu = {
// status atual
CurrentState: 'Hide',
// Eventos de ligação
inicializar: function () {
var self = this;
Self.on ("Hover", Self.Transition);
},
// transição de status
Transição: function (evento) {
Switch (this.currentState) {
case "hide":
this.currentState = 'show';
doSomething ();
quebrar;
caso "show":
this.currentState = 'hide';
doSomething ();
quebrar;
padrão:
console.log ('estado inválido!');
quebrar;
}
}
};
Pode -se observar que o método de escrita das máquinas de estado finito é claro na lógica e forte na expressão, o que é propício para encapsular eventos. Quanto mais estados um objeto tem e mais eventos ocorre, mais adequado é usar o método de redação de máquinas de estado finito.
Além disso, o JavaScript é um idioma com muitas operações assíncronas. A solução comumente usada é especificar funções de retorno de chamada, mas isso causará problemas como a estrutura de código confusa, difícil de testar e depurar. A máquina de estado finita fornece uma maneira melhor: operações assíncronas de gancho com a mudança de estado do objeto. Quando a operação assíncrona é concluída, ocorre uma mudança de estado correspondente, desencadeando outras operações. Isso é mais logicamente razoável do que a solução de funções de retorno de chamada, escuta de eventos, publicar/assinar etc., e é mais fácil reduzir a complexidade do código.
A seguir, é apresentada uma biblioteca de máquinas de estado finita, JavaScript Finite State Machine. Esta biblioteca é muito fácil de entender e pode nos ajudar a aprofundar nosso entendimento, e suas funções não são fracas.
Esta biblioteca fornece uma Statemachine de objeto global, que usa o método Create do objeto para gerar instâncias de uma máquina de estado finita.
A cópia do código é a seguinte:
var fsm = statemachine.create ();
Ao gerar, um objeto de parâmetro precisa ser fornecido para descrever as propriedades da instância. Por exemplo, semáforos (semáforos) podem ser descritos da seguinte forma:
A cópia do código é a seguinte:
var fsm = statemachine.create ({
Inicial: 'verde',
Eventos: [
{nome: 'warn', de: 'verde', para: 'amarelo'},
{Nome: 'Stop', de: 'Yellow', para: 'Red'},
{Nome: 'Ready', de: 'vermelho', para: 'amarelo'},
{Nome: 'Go', de: 'Yellow', para: 'Green'}
]
});
O estado inicial do semáforo é verde. O atributo de eventos são vários eventos que desencadeiam mudanças no estado, como o evento de alerta que faz com que o estado verde se torne um estado amarelo, o evento de parada faz com que o estado amarelo se torne o estado vermelho, etc.
Depois de gerar a instância, você pode consultar o status atual a qualquer momento.
A cópia do código é a seguinte:
* FSM.Current: Retorna o status atual.
* FSM.Is (s): retorna um valor booleano indicando se o estado s é o estado atual.
* FSM.CAN (E): Retorna um valor booleano indicando se o evento E pode ser acionado no estado atual.
* fsm.Cannot (e): retorna um valor booleano indicando se o evento E não pode ser acionado no estado atual.
Javascript Finite State Machine permite especificar duas funções de retorno de chamada para cada evento, tomando o evento de aviso como exemplo:
A cópia do código é a seguinte:
* ONBERFOREWARN: acionado antes do evento de aviso.
* ONAFTERWARN (pode ser abreviado como Onwarn): acionado após a ocorrência do evento de aviso.
Ao mesmo tempo, também permite especificar duas funções de retorno de chamada para cada estado, tomando o estado verde como exemplo:
A cópia do código é a seguinte:
* OnLeaveGreen: acionado ao sair do estado verde.
* Onentergreen (pode ser abreviado como OnGreen): acionado ao entrar no estado verde.
Supondo que o evento de aviso altere o estado de verde para amarelo, os quatro tipos de funções de retorno de chamada ocorrem na seguinte ordem: OnBeforewarn → OnLeaveGreen → Onenteryellow → OnAfterwarn.
Além de especificar uma função de retorno de chamada para cada evento e estado separadamente, você também pode especificar uma função de retorno de chamada comum para todos os eventos e estados.
A cópia do código é a seguinte:
* ONBERFOREEVENT: acionado antes que qualquer evento ocorra.
* OnLevestate: acionado ao sair de qualquer estado.
* Onentestate: acionado ao entrar em qualquer estado.
* ONAFTEREVENT: acionado após o término de um dos eventos.
Se houver operações assíncronas na função de retorno de chamada do evento (como a comunicação do AJAX com o servidor), podemos querer esperar até que a operação assíncrona termine antes que as alterações do estado ocorram. Isso requer o método de transição.
A cópia do código é a seguinte:
fsm.onwarn = function () {
Light.fadeout ('Slow', function () {
fsm.Transition ();
});
retornar statemachine.async;
};
Na função de retorno de chamada no código acima, há uma operação assíncrona (Light.fadeout). Se você não deseja que o estado mude imediatamente, deve deixar a função de retorno de chamada retornar um objeto Statemachine.async, indicando que o estado não muda por enquanto; Aguarde até que a operação assíncrona seja concluída e ligue para o método de transição para fazer com que o estado mude.
A máquina de estado finita JavaScript também permite especificar funções de manuseio de erros que são acionadas automaticamente quando os eventos impossíveis de ocorrer no estado atual.
A cópia do código é a seguinte:
var fsm = statemachine.create ({
// ...
Erro: function (EventName, de, para, args, errorcode, errorMessage) {
return 'Event' + EventName + ':' + errorMessage;
},
// ...
});
Por exemplo, o estado atual é verde e, teoricamente, apenas um evento de aviso pode ocorrer neste momento. Se ocorrer um evento de parada no momento, a função de manuseio de erros acima será acionada.