Mode d'état
Le mode d'état permet à un objet de modifier son comportement lorsque son état interne change, et l'objet semble modifier sa classe.
Les scénarios d'utilisation du mode d'état sont également particulièrement clairs, avec les deux points suivants:
1. Le comportement d'un objet dépend de son état, et il doit changer son comportement en fonction de son état au moment de l'exécution. (Certains objets ont généralement plusieurs états, dans chaque État, vous ne pouvez faire que ce que l'état actuel peut faire, mais pas ce que les autres états peuvent faire)
2. Une opération contient un grand nombre d'instructions de branche, et ces instructions de branche dépendent de l'état de l'objet. L'état est généralement une représentation d'une ou plusieurs constantes d'énumération.
1. Machine d'État finie
1. Le nombre total d'États (État) est limité.
2. À tout moment, vous n'êtes dans un seul État.
3. Dans certaines conditions, il passera d'un État à l'autre.
Pratique commune: encapsuler l'état dans une classe indépendante (machine d'état) et déléguer la demande à l'objet d'état actuel. Lorsque l'état interne de l'objet change, il entraînera différents changements de comportement.
2. Points d'optimisation des performances
1. Comment gérer la création et la destruction des objets d'état? La première consiste à créer puis à détruire les objets d'état uniquement lorsqu'ils sont nécessaires (les objets d'état sont énormes, préférés), et l'autre consiste à créer tous les objets d'état depuis le début et à ne jamais les détruire (l'état change fréquemment).
2. Utilisez le mode PROY Yuan pour partager un objet d'état.
Pour donner un exemple légèrement compliqué, je crois que tout le monde a joué à des jeux de rôle, et les personnages dedans ont de nombreux États (station, marche, course, saut, saccagé, etc.). La commutation entre divers états est spécifiée et ne peut être que dans un seul état à tout moment. Dans chaque état, les personnages ne peuvent effectuer des comportements autorisés que dans l'état actuel (tels que: attaques ordinaires, diverses attaques de compétences, défenses, etc.)
Voici un exemple de la balle en mouvement que j'ai écrite:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <ititle> </ title> <script> window.onLoad = function () {var fsm = {show1: {clickbtn: function (key) {change.call (this, key); }}, show2: {clickbtn: function (key) {Change.Call (this, key); }}, show3: {clickbtn: function (key) {Change.Call (this, key); }}, show4: {clickbtn: function (key) {Change.Call (this, key); }}}}; var ball = function () {this.curentState = fsm.show1; this.div = null; }; Ball.prototype.init = function () {var self = this; this.div = document.getElementById ('go'); document.body.onkeydown = function (event) {var key = event.KeyCode; self.curentstate.clickbtn.call (self, key); }}; Fonction Change (Key) {var styles = window.getCompupedStyle (this.div), parenstyles = window.getCompuledStyle (this.div.parentNode), top = parseInt (styles.top), left = parseInt (styles.left); if (key === 40) {top + = (top + parseInt (styles.height)) <parseInt (parenstyles.height)? 10: 0; this.div.style.top = top + 'px'; this.currentState = fsm.show3; } if (key === 38) {top - = (top> 0? 10: 0); this.div.style.top = top + 'px'; this.CurentState = fsm.show4; } if (key === 37) {Left - = (gauche> 0? 10: 0); this.div.style.left = gauche + 'px'; this.CurentState = fsm.show1; } if (key === 39) {this.curentState = fsm.show2; gauche + = (gauche + parseInt (styles.width)) <paSeInt (parenstyles.width)? 10: 0; this.div.style.left = gauche + 'px'; }} var a = new Ball (); a.init (); } </cript> <style> #div {position: absolue; Largeur: 80%; hauteur: 80%; en haut: 0; en bas: 0; à gauche: 0; à droite: 0; marge: auto; Border: 1px Solid Darkcyan; } #go {position: absolue; Largeur: 50px; hauteur: 50px; Gauche: 10px; En haut: 20px; Border: 1px gris massif; -Webkit-Border-Radius: 50px; -Moz-Border-Radius: 50px; Border-Radius: 50px; Image d'arrière-plan: gradient radial (cercle, blanc 5%, noir 100%); } </ style> </ head> <body> <div id = "div"> Appuyez sur la touche de flèche pour déplacer le carré <div id = "go"> </ div> </div> </ody> </html>3. Version JavaScript de State Machine (en prenant des feux de commutation simples comme exemple)
1. Déléguer directement la demande à un objet littéral via la fonction.prototype.Call de la méthode à exécuter
// State Machine var fsm = {off: {ButtonWaspreblied: function () {console.log ("downlight"); this.button.innerhtml = "Suivant en appuyant sur Impalant la lumière"; // Ceci est une propriété à la lumière! ! ! this.curstate = fsm.on; // C'est la propriété à la lumière! ! ! }}, on: {ButtonwaSpRed: function () {console.log ("Light on"); this.button.innerhtml = "Suivant en appuyant sur Je désactive la lumière"; this.curstate = fsm.off; }},}; var light = function () {this.currState = fsm.off; // définit l'état actuel this.button = null;}; Light.prototype.init = function () {var bouton = document.CreateElement ("Button"); self = this; bouton.innerhtml = "Light Off"; this.button = document.body.appendChild (bouton); this.button.onclick = function () {// demande de déléguer à la machine d'état FSM self.currState.buttonwaspressed.call (self); }} var light = new Light (); light.init ();2. Utilisez la fonction du délégué
var delegate = function (client, délégation) {return {ButtonSpreblied: function () {return degation.buttonwaspressed.Apply (client, arguments); }};}; // State Machine var fsm = {off: {ButtonwaSpRed: function () {console.log ("off"); this.button.innerhtml = "Suivant en appuyant sur Impalant la lumière"; this.curstate = this.onstate; }}, on: {ButtonwaSpreblied: function () {console.log ("sur la lumière"); this.button.innerhtml = "Suivant en appuyant, j'éteins les lumières"; this.curState = this.offState; }},}; var light = function () {this.offstate = delegate (this, fsm.off); this.onstate = délégué (ceci, fsm.on); this.curState = this.offState; // définit l'état actuel this.button = null;}; Light.prototype.init = function () {var bouton = document.CreateElement ("Button"); self = this; bouton.innerhtml = "Light Off"; this.button = document.body.appendChild (bouton); this.button.onclick = function () {// demande de déléguer à la machine d'état FSM self.currState.ButtonWaSpRemp (); }} var light = new Light (); Light.Init ();Les modes d'état et les modes de politique sont très similaires. Ils résument tous les deux une série d'algorithmes ou de comportements. Ils ont tous un objet de contexte pour déléguer les demandes aux classes encapsulées (classes de politique, machines d'État), mais leurs intentions sont différentes:
1. Les différents attributs de la classe politique sont également parallèles et il n'y a aucun lien entre eux.
2. Il y a une commutation mutuelle entre les différents états de la machine d'état et il est spécifié.
Références: "modèle javascript" "modèle de conception JavaScript et pratique de développement"
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.