Statusmodus
Der Statusmodus ermöglicht es einem Objekt, sein Verhalten zu ändern, wenn sich sein interner Zustand ändert, und das Objekt scheint seine Klasse zu ändern.
Die Nutzungsszenarien des Statusmodus sind ebenfalls besonders klar mit den folgenden zwei Punkten:
1. Das Verhalten eines Objekts hängt von seinem Zustand ab, und es muss sein Verhalten nach seinem Zustand zur Laufzeit ändern. (Einige Objekte haben normalerweise mehrere Staaten, in jedem Zustand können Sie nur das tun, was der aktuelle Zustand kann, aber nicht, was andere Staaten tun können)
2. Eine Operation enthält eine große Anzahl von Zweigaussagen, und diese Zweigaussagen hängen vom Status des Objekts ab. Der Staat ist normalerweise eine Darstellung einer oder mehrerer Aufzählungskonstanten.
1. Finite State Machine
1. Die Gesamtzahl der Staaten (Staat) ist begrenzt.
2. Sie sind jederzeit nur in einem Zustand.
3. Unter bestimmten Bedingungen wechselt es von einem Zustand in einen anderen.
Häufige Praxis: In eine unabhängige Klasse (Zustandsmaschine) integrieren und die Anfrage an das aktuelle Statusobjekt delegieren. Wenn sich der interne Zustand des Objekts ändert, wird sich unterschiedliche Verhaltensänderungen verursachen.
2. Leistungsoptimierungspunkte
1. Wie man die Schöpfung und Zerstörung von Zustandsobjekten verwaltet? Die erste besteht darin, die Zustandsobjekte nur dann zu erstellen und dann zu zerstören, wenn sie benötigt werden (Staatsobjekte sind riesig, bevorzugt), und das andere besteht darin, alle Zustandsobjekte von Anfang an zu erstellen und sie niemals zu zerstören (Staat ändert sich häufig).
2. Verwenden Sie den Yuan -Modus von Genießen, um ein Statusobjekt zu teilen.
Um ein etwas kompliziertes Beispiel zu geben, glaube ich, dass jeder Rollenspiele gespielt hat und die Charaktere darin viele Staaten haben (Station, Gehen, Laufen, Springen, Hocken usw.). Das Umschalten zwischen verschiedenen Zuständen ist angegeben und kann jederzeit nur in einem Zustand sein. In jedem Zustand können die Charaktere nur zulässige Verhaltensweisen im aktuellen Zustand ausführen (wie: gewöhnliche Angriffe, verschiedene Qualifikationsangriffe, Verteidigung usw.)
Hier ist ein Beispiel für den bewegenden Ball, den ich schrieb:
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> </title> <script> window.onload = function () {var fsm = {show1: {clickBtn: function (taste) {ändere.call (this, this taste); }}, 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 (Ereignis) {var key = event.KeyCode; self.curentState.clickbtn.call (self, key); }}; Funktionsänderung (Schlüssel) {var styles = window.getComputedStyle (this.div), parentStyles = window.getComputedStyle (this.div.parentnode), top = parseInt (styles.top), links = parseInt (styles.left); if (key === 40) {top += (top +parseInt (styles.height)) <parseInt (parentStyles.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) {links -= (links> 0? 10: 0); this.div.style.left = links+'px'; this.curentState = fsm.show1; } if (key === 39) {this.curentState = fsm.show2; links += (links +parseInt (styles.width)) <parseInt (parentStyles.width)? 10: 0; this.div.style.left = links+'px'; }} var a = neuer Ball (); A.init (); } </script> <style> #div {Position: absolut; Breite: 80%; Höhe: 80%; Top: 0; unten: 0; links: 0; Rechts: 0; Rand: Auto; Grenze: 1PX Solid Darkcyan; } #go {Position: absolut; Breite: 50px; Höhe: 50px; links: 10px; Top: 20px; Grenze: 1px Festgrau; -Webkit-Border-Radius: 50px; -moz-border-radius: 50px; Border-Radius: 50px; Hintergrundbild: Radialgradient (Kreis, weiß 5%, schwarz 100%); } </style> </head> <body> <div id = "div"> Drücken Sie die Pfeiltast3.. JavaScript -Version von State Machine (einfache Schaltlichter als Beispiel nehmen)
1. Delegieren Sie die Anforderung direkt an ein wörtliches Objekt über die Funktion der Funktion.
// states machine var fsm = {off: {buttonWaSpression: function () {console.log ("Downlight"); this.button.innerhtml = "Als nächstes drücke ich das Licht an"; // Dies ist eine Eigenschaft im Licht! ! ! this.currstate = fsm.on; // Dies ist die Eigenschaft am Licht! ! ! }}, on: {buttonWaSpression: function () {console.log ("Licht an"); this.button.innerhtml = "Als nächstes drücke ich das Licht aus"; this.currstate = fsm.off; }},}; var light = function () {this.currstate = fsm.off; // Setzen Sie den aktuellen Zustand this.button = null;}; Light.Prototype.init = function () {var button = document.createelement ("button"); self = this; button.innerhtml = "light off"; this.button = document.body.Appendchild (button); this.button.onclick = function () {// Anfrage, an die FSM State Machine self.currstate.buttonWaSpression.call (self) zu delegieren; }} var light = new Light (); light.init ();2. Verwenden Sie die Delegiertefunktion
var delegate = function (client, delegation) {return {buttonWaSpression: function () {return delegation.buttonWaSpression.Apply (Client, Argumente); }};}; // states machine var fsm = {off: {buttonWaSpression: function () {console.log ("off"); this.button.innerhtml = "Als nächstes drücke ich das Licht an"; this.currstate = this.onstate; }}, on: {buttonWaSpression: function () {console.log ("on the Light"); this.button.innerhtml = "Als nächstes schalte ich die Lichter aus"; this.currstate = this.offstate; }},}; var light = function () {this.offstate = delegate (this, fsm.off); this.onstate = delegate (this, fsm.on); this.currstate = this.offstate; // den aktuellen Status this.button = null;}; Light.Prototype.init = function () {var button = document.createelement ("button"); self = this; button.innerhtml = "light off"; this.button = document.body.Appendchild (button); this.button.onclick = function () {// Anfrage, an die FSM State Machine self.currstate.buttonWaSpression () zu delegieren; }} var light = new Light (); light.init ();Staatliche Modi und politische Modi sind sehr ähnlich. Beide verkapulieren eine Reihe von Algorithmen oder Verhaltensweisen. Sie alle haben ein Kontextobjekt, um Anfragen an eingekapselte Klassen (Richtlinienklassen, staatliche Maschinen) zu delegieren, aber ihre Absichten sind unterschiedlich:
1. Die verschiedenen Attribute der Richtlinienklasse sind gleichermaßen parallel, und es besteht keine Verbindung zwischen ihnen.
2. Es gibt gegenseitige Umschaltungen zwischen den verschiedenen Zuständen in der Zustandsmaschine und es wird angegeben.
Referenzen: "JavaScript -Muster" "JavaScript -Designmuster und Entwicklungspraxis"
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.