En pocas palabras, tiene tres características:
La copia del código es la siguiente:
* El número total de estados (estado) es limitado.
* En cualquier momento, solo estás en un estado.
* Bajo ciertas condiciones, pasará de un estado a otro.
Lo que significa para JavaScript es que muchos objetos pueden escribirse como máquinas de estado finitas.
Por ejemplo, hay un elemento de menú en la página web. Cuando el mouse está flotando, se muestra el menú; Cuando se mueve el mouse, el menú está oculto. Si usa la descripción de la máquina de estado finito, este menú tiene solo dos estados (mostrar y ocultar), y el mouse activará una transición de estado.
El código se puede escribir de la siguiente manera:
La copia del código es la siguiente:
menú var = {
// Estado actual
CurrentState: 'escondite',
// Eventos vinculantes
inicializar: function () {
var self = this;
self.on ("hover", self.transition);
},
// Transición de estado
Transición: función (evento) {
switch (this.CurrentState) {
Caso "Ocultar":
this.CurrentState = 'show';
Dosomething ();
romper;
Caso "Show":
this.currentState = 'escondite';
Dosomething ();
romper;
por defecto:
console.log ('¡Estado inválido!');
romper;
}
}
};
Se puede ver que el método de escritura de las máquinas de estado finito es claro en la lógica y en la expresión fuerte, lo cual es propicio para la encapsulación de eventos. Cuantos más estados tenga un objeto y cuantos más eventos ocurra, más adecuado será utilizar el método de escritura de máquina de estado finito.
Además, JavaScript es un idioma con muchas operaciones asincrónicas. La solución comúnmente utilizada es especificar las funciones de devolución de llamada, pero esto causará problemas como la estructura de código confuso, difícil de probar y depurar. La máquina de estado finito proporciona una mejor manera: operaciones asincrónicas de gancho con el cambio de estado del objeto. Cuando se completa la operación asincrónica, se produce un cambio de estado correspondiente, lo que provoca otras operaciones. Esto es más lógicamente razonable que la solución de las funciones de devolución de llamada, la escucha de eventos, la publicación/suscripción, etc., y es más fácil reducir la complejidad del código.
La siguiente es una biblioteca de máquinas de estado finito, JavaScript Finite State Machine. Esta biblioteca es muy fácil de entender y puede ayudarnos a profundizar nuestra comprensión, y sus funciones no son débiles en absoluto.
Esta biblioteca proporciona un objeto global StateMachine, que utiliza el método Crear el objeto para generar instancias de una máquina de estado finito.
La copia del código es la siguiente:
var fsm = stateMachine.create ();
Al generar, se debe proporcionar un objeto de parámetro para describir las propiedades de la instancia. Por ejemplo, los semáforos (semáforos) se pueden describir de la siguiente manera:
La copia del código es la siguiente:
var fsm = stateMachine.create ({
inicial: 'verde',
Eventos: [
{nombre: 'Warn', de: 'verde', a: 'amarillo'},
{nombre: 'parar', desde: 'amarillo', a: 'rojo'},
{nombre: 'listo', de: 'rojo', a: 'amarillo'},
{nombre: 'ir', de: 'amarillo', a: 'verde'}
]
});
El estado inicial del semáforo es verde. El atributo de eventos es varios eventos que desencadenan cambios en el estado, como el evento de advertencia que hace que el estado verde se convierta en un estado amarillo, el evento de parada hace que el estado amarillo se convierta en un estado rojo, etc.
Después de generar la instancia, puede consultar el estado actual en cualquier momento.
La copia del código es la siguiente:
* FSM.Current: Devuelve el estado actual.
* FSM.IS (S): Devuelve un valor booleano que indica si el estado es el estado actual.
* fsm.can (e): Devuelve un valor booleano que indica si el evento E puede activarse en el estado actual.
* fsm.cannot (e): Devuelve un valor booleano que indica si el evento E no puede activarse en el estado actual.
JavaScript Finite State Machine permite especificar dos funciones de devolución de llamada para cada evento, tomando el evento de advertencia como ejemplo:
La copia del código es la siguiente:
* Onborewarn: activado antes de que ocurra el evento de advertencia.
* ONAFTERWARN (se puede abreviar como Onwarn): activado después de que ocurra el evento advertido.
Al mismo tiempo, también permite especificar dos funciones de devolución de llamada para cada estado, tomando el estado verde como ejemplo:
La copia del código es la siguiente:
* Onleavegreen: activado al dejar el estado verde.
* OnEnTergreen (se puede abreviar como Ongreen): activado al ingresar al estado verde.
Suponiendo que el evento de advertencia cambia el estado de verde a amarillo, los cuatro tipos anteriores de funciones de devolución de llamada ocurren en el siguiente orden: Onbeforewarn → onleavegreen → Onenteryellow → Onafterwarn.
Además de especificar una función de devolución de llamada para cada evento y estado por separado, también puede especificar una función de devolución de llamada común para todos los eventos y estados.
La copia del código es la siguiente:
* OnBoreVent: activado antes de que ocurra cualquier evento.
* OnleAvieCle: activado al dejar cualquier estado.
* OnEntState: desencadenado al ingresar a cualquier estado.
* ONAFTEREVENT: activado después de que termine cualquier evento.
Si hay operaciones asincrónicas en la función de devolución de llamada del evento (como la comunicación AJAX con el servidor), es posible que deseemos esperar hasta que termine la operación asincrónica antes de que ocurran los cambios de estado. Esto requiere el método de transición.
La copia del código es la siguiente:
fsm.onwarn = function () {
light.fadeOut ('lento', function () {
fsm.Transition ();
});
return stateMachine.async;
};
En la función de devolución de llamada en el código anterior, hay una operación asincrónica (Light.fadeOut). Si no desea que el estado cambie de inmediato, debe dejar que la función de devolución de llamada devuelva un objeto stateMeMachine. Espere hasta que se complete la operación asincrónica, luego llame al método de transición para que el estado cambie.
JavaScript Finito State Machine también permite especificar funciones de manejo de errores que se activan automáticamente cuando los eventos que son imposibles de ocurrir en el estado actual.
La copia del código es la siguiente:
var fsm = stateMachine.create ({
// ...
Error: función (eventname, from, to, args, errorcode, errorMessage) {
return 'Event' + EventName + ':' + errorMessage;
},
// ...
});
Por ejemplo, el estado actual es verde y teóricamente, solo puede ocurrir un evento de advertencia en este momento. Si se produce un evento de parada en este momento, se activará la función de manejo de errores anterior.