javascript - eventos - js events html
Máquina de estado de eventos de JavaScript (8)
¿Alguien sabe de alguna implementación javascript de una máquina de estado? Mi objetivo es configurar una implementación de máquina de estado que vincule eventos a transiciones de estado. Entonces, si un usuario hace clic en un botón, el estado cambiará, y este estado podría definir ciertos valores en los objetos que se cambiarán, por ejemplo.
Quiero que esto sea una máquina de estado simplemente porque habrá un archivo json de reglas que permitirá dictar qué valores cambian de varios objetos cuando se llaman ciertos eventos. Debido a que esto se estructurará dentro del archivo, creo que sería fácil analizar esa información en un objeto de máquina de estado.
Encontrará una biblioteca diseñada con jQuery que parece hacer lo que busca y vincula automáticamente los eventos por usted:
Hay dos bibliotecas principales para una máquina de estados finitos en js:
1 / https://github.com/ifandelse/machina.js Muy bien documentado, ejemplos, soporta dos proveedores de bus de mensajes de JavaScript fuera de la caja: postal.js y amplify.js.
2 / github.com/jakesgordon/javascript-state-machine más simple y fácil de usar, perfecto para usos "básicos".
Intente echar un vistazo a https://github.com/steelbreeze/state.js . Es compatible con gran parte de la semántica de la máquina de estados como se describe en la especificación UML 2 mientras sigue siendo eficaz. Todavía no hay mucha documentación, pero los ejemplos y las pruebas deben proporcionar una buena referencia.
Mi elección sobre esto con la micro biblioteca js-fsm.
Caracteristicas
- Descripción del estado de FSM. Un estado compuesto por una y una matriz de transiciones de estado.
- Transición de los acontecimientos. Varios eventos definen eventos ORed.
- Transición de las condiciones. Una condición es un par clave: valor que debe coincidir con el objeto de condición. Múltiples claves, pares de valores definidos y condiciones de AND. Múltiples condiciones definen condiciones ORed
- Cada transición puede opcionalmente llamar acciones o acciones múltiples. Las acciones pueden opcionalmente tener argumentos o ser miembros de esto.
- La máquina de estado podría mezclarse (como una mezcla) a un objeto existente o al prototipo de un constructor. Se proporciona un método para esto.
- La máquina de estado puede registrar opcionalmente si existe un método de registro en este o se proporciona.
- Los módulos AMD y Node son compatibles.
- Pruebas unitarias con qunit.
Puede encontrar esta biblioteca de uso:
https://www.npmjs.com/package/mistic
Descargo de responsabilidad: lo mantengo.
Recientemente construí una implementación de máquina de estado en JS, que es ciertamente la más fácil de configurar, gracias a su DSL de transición:
transitions: [
''next : intro > form > finish'',
''back : intro < form < error'',
''error : form > error'',
''restart : intro < finish''
]
Es realmente flexible tanto en la configuración como en la asignación del controlador de eventos, puede agregar y eliminar estados en tiempo de ejecución, pausar y reanudar las transiciones, conectarse a una tonelada de eventos, con ayudantes para jQuery y marcos reactivos como Vue:
Docs y toda una serie de demostraciones aquí:
Un poco de promoción para mi máquina de estado: stateflow Acabo de crear mi propia máquina de estado porque no encontré ninguna que fuera lo suficientemente simple para mí.
un flujo se define con un objeto js donde la propiedad es el nombre del estado y el valor es otro objeto js con las siguientes propiedades.
- tipo: comenzar, finalizar o estado (predeterminado).
- acción: función con un objeto de instancia de Estado configurado para esto, también puede denominarse acción previamente registrada u otra definición de flujo en este caso es un subflujo.
- on: la propiedad debe coincidir con el evento y el valor es el siguiente estado para ir a
Ejemplo simple
var stateflow = require(''stateflow'');
var flow = new stateflow.StateFlow({
a: {
type:''begin'',
action: function(complete) {
// do something
complete(''done'');
},
on: {
done:''b'',
again:''a''
}
},
b: {
type:''end'',
action: function(complete) {
complete(''finished'');
}
}
});
flow.start(function(event) {
console.log(''flow result:'', event);
});
Compruébelo en git https://github.com/philipdev/stateflow o vía npm
AsyncMachine es otro enfoque menos ortodoxo de la máquina de estados en JS (soy el autor). Es relacional y soporta múltiples estados activos simultáneamente. Aquí hay algunos códigos para responder a su pregunta original: después de hacer clic en el botón, hay efectos secundarios en términos de un nuevo estado y un atributo en el objeto de contexto:
const {
machine
} = asyncmachine
// define states & relations
const state = {
Clicked: {
add: [''ShowFooter'']
},
ShowFooter: {}
}
const example = machine(state)
// define handlers
example.Clicked_state = function() {
this.timeout = setTimeout(
this.dropByListener(''Clicked''), 3000)
}
function render() {
console.log(''render'')
// get all the active state as class names
const classes = example.is().join('' '')
console.log(classes)
document.getElementById(''content'').innerHTML = `
<div class="${classes}">
<button>CLICK</button>
<footer>FOOTER</footer>
</div>
`
}
document.getElementById(''content'').addEventListener(
''click'', example.addByListener(''Clicked''))
// bind render to any state change
example.on(''tick'', render)
render()
.Clicked button {
background: red;
}
footer {
display: none;
}
.ShowFooter footer {
display: block
}
<script src="https://unpkg.com/[email protected]/dist/asyncmachine.umd.js"></script>
<div id=''content'' />
También hay un inspector que puede visualizar la forma en que funciona su máquina (con viajes en el tiempo), por ejemplo:
