Explication détaillée de JavaScript et des machines à états finis_Connaissances de base

En termes simples, il a trois caractéristiques :

Copier le code Le code est le suivant :

* Le nombre total d'états (state) est limité.
* A tout moment, vous n'êtes que dans un seul état.
* Sous certaines conditions, il y aura une transition d'un état à un autre.

Ce que cela signifie pour JavaScript, c'est que de nombreux objets peuvent être écrits comme des machines à états finis.

Par exemple, il y a un élément de menu sur la page Web. Lorsque la souris survole, le menu est affiché ; lorsque la souris est éloignée, le menu est masqué. Si une machine à états finis est utilisée pour le décrire, ce menu n'a que deux états (afficher et masquer), et la souris provoquera une transition d'état.

Le code peut s'écrire ainsi :

Copier le code Le code est le suivant :

var menu = {

　　// État actuel
currentState : 'hide',

// Événement de liaison
initialize : function() {
var self = this;
self.on("hover ", self.transition);
　},

　 // Transition d'état
transition : function(event){
switch(this.currentState) {
case "hide":
This.currentState = 'show';
doSomething();
case "show":
doSome thing();
break;
　　default:
　 console.log (« État invalide ! ») ;
Comme vous pouvez le voir, la méthode d'écriture de la machine à états finis a une logique claire et une forte expressivité, ce qui est propice à l'encapsulation des événements. Plus un objet a d’états et plus d’événements se produisent, plus il est approprié d’utiliser l’écriture automatique à états finis.

De plus, le langage JavaScript est un langage avec de nombreuses opérations asynchrones. Une solution courante consiste à spécifier une fonction de rappel, mais cela entraînera des problèmes tels qu'une structure de code confuse et des difficultés de test et de débogage. Les machines à états finis offrent une meilleure solution : lier l'opération asynchrone au changement d'état de l'objet. Lorsque l'opération asynchrone se termine, le changement d'état correspondant se produit, ce qui déclenche d'autres opérations. Ceci est plus logiquement raisonnable et plus facile à réduire la complexité du code que des solutions telles que les fonctions de rappel, l'écoute d'événements et la publication/abonnement.

Ce qui suit présente une bibliothèque de fonctions de machine à états finis Javascript Finite State Machine. Cette bibliothèque est très simple à comprendre et peut nous aider à approfondir notre compréhension, et ses fonctions ne sont pas du tout faibles.

Cette bibliothèque fournit un objet global StateMachine. En utilisant la méthode create de cet objet, vous pouvez générer une instance d'une machine à états finis.

Copier le code

Le code est le suivant :

var fsm = StateMachine.create();

Lors de la génération, vous devez fournir un objet paramètre pour décrire la nature de l'instance. Par exemple, un feu tricolore (feu tricolore) peut être décrit ainsi :

Copier le code

Le code est le suivant :

var fsm = StateMachine.create({

initiale : 'vert',événements : [{ nom : 'avertir', de : 'vert', à : 'jaune' },{ nom : ' stop', de : 'jaune', à : 'rouge' },{ nom : 'prêt', de : 'rouge', à : 'jaune' },

{ nom : 'partez', de : 'jaune', à : 'vert' }

]
});



L'état initial du feu de circulation est vert et l'attribut events correspond aux différents événements qui déclenchent le changement d'état. Par exemple, l'événement d'avertissement change l'état vert en état jaune, l'événement d'arrêt change l'état jaune en. l'état rouge, et ainsi de suite.

Après avoir généré une instance, vous pouvez consulter l'état actuel à tout moment.

Copier le code

Le code est le suivant :

* fsm.current : Renvoie l'état actuel .

* fsm.is(s) : renvoie une valeur booléenne indiquant si state s est l'état actuel. * fsm.can(e) : renvoie une valeur booléenne indiquant si l'événement e peut être déclenché dans l'état actuel. * fsm.cannot(e) : renvoie une valeur booléenne indiquant si l'événement e ne peut pas être déclenché dans l'état actuel.
Javascript Finite State Machine vous permet de spécifier deux fonctions de rappel pour chaque événement, en prenant l'événement warn comme exemple :

Copier le code Le code est le suivant :

* onbeforewarn : Déclenché avant que l'événement d'avertissement ne se produise .
* onafterwarn (peut être abrégé en onwarn) : déclenché après l'événement d'avertissement.

En même temps, il permet également de spécifier deux fonctions de rappel pour chaque état, en prenant l'état vert comme exemple :

Copier le code Le code est le suivant :

* onleavegreen : Déclenché en quittant l'état vert .
* onentergreen (peut être abrégé en ongreen) : déclenché lors de l'entrée dans l'état vert.

En supposant que l'événement warn change l'état du vert au jaune, l'ordre d'apparition des quatre types de fonctions de rappel ci-dessus est le suivant : onbeforewarn → onleavegreen → onenterjaune → onafterwarn.

En plus de spécifier des fonctions de rappel distinctes pour chaque événement et statut, vous pouvez également spécifier une fonction de rappel commune pour tous les événements et statuts.

Copier le code Le code est le suivant :

* onbeforeevent : Déclenché avant qu'un événement ne se produise.
* onleavestate : Déclenché en quittant n'importe quel état.
* onenterstate : déclenché lors de l'entrée dans un état.
* onafterevent : déclenché après la fin d'un événement.

S'il y a une opération asynchrone dans la fonction de rappel d'événement (telle que la communication Ajax avec le serveur), nous souhaiterons peut-être attendre la fin de l'opération asynchrone avant de changer d'état. Cela nécessite l'utilisation de la méthode de transition.

Copier le code Le code est le suivant :

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

Dans la fonction de rappel du code ci-dessus, il existe une opération asynchrone (light.fadeOut). Si vous ne souhaitez pas que l'état change immédiatement, vous devez laisser la fonction de rappel renvoyer un objet StateMachine.ASYNC, indiquant que l'état ne changera pas temporairement ; attendez que l'opération asynchrone soit terminée, puis appelez la méthode de transition pour provoquer le changement d'état ; état à changer.

Javascript Finite State Machine vous permet également de spécifier une fonction de gestion des erreurs, qui est automatiquement déclenchée lorsqu'un événement impossible à produire dans l'état actuel se produit.

Copier le code Le code est le suivant :

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

Par exemple, si l'état actuel est vert, théoriquement, seul un événement d'avertissement peut se produire à ce moment-là. Si un événement d'arrêt se produit à ce moment, la fonction de gestion des erreurs ci-dessus sera déclenchée.