Modo de estado
El modo de estado permite que un objeto cambie su comportamiento cuando cambia su estado interno, y el objeto parece modificar su clase.
Los escenarios de uso del modo de estado también son particularmente claros, con los siguientes dos puntos:
1. El comportamiento de un objeto depende de su estado, y debe cambiar su comportamiento de acuerdo con su estado en el tiempo de ejecución. (Algunos objetos generalmente tienen varios estados, en cada estado, solo puede hacer lo que puede hacer el estado actual, pero no lo que otros estados pueden hacer)
2. Una operación contiene una gran cantidad de declaraciones de rama, y estas declaraciones de rama dependen del estado del objeto. El estado suele ser una representación de una o más constantes de enumeración.
1. Máquina de estado finito
1. El número total de estados (estado) es limitado.
2. En cualquier momento, solo estás en un estado.
3. Bajo ciertas condiciones, pasará de un estado a otro.
Práctica común: Encapsular el estado en una clase independiente (máquina de estado) y delegar la solicitud al objeto de estado actual. Cuando cambia el estado interno del objeto, causará diferentes cambios de comportamiento.
2. Puntos de optimización de rendimiento
1. ¿Cómo gestionar la creación y destrucción de objetos estatales? El primero es crear y luego destruir los objetos de estado solo cuando se necesitan (los objetos de estado son enormes, preferidos), y el otro es crear todos los objetos de estado desde el principio y nunca destruirlos (el estado cambia con frecuencia).
2. Use el modo disfrutar yuan para compartir un objeto de estado.
Para dar un ejemplo ligeramente complejo, creo que todos han jugado juegos de rol, y los personajes en él tienen muchos estados (estación, caminar, correr, saltar, ponerse en cuclillas, etc.). Se especifica el cambio entre varios estados, y solo pueden estar en un estado en cualquier momento. En cada estado, los personajes solo pueden realizar comportamientos permitidos en el estado actual (como: ataques ordinarios, varios ataques de habilidades, defensas, etc.)
Aquí hay un ejemplo de la bola en movimiento que escribí:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <script> window.onload = function () {var fsm = {show1: {clickbtn: function (key) {cambie.call (esta, clave); }}, 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); }}; Cambio de funciones (clave) {var styles = window.getComputedStyle (this.div), parentStyles = window.getComputedStyle (this.div.parentnode), top = parseInt (styles.top), izquierda = 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 (clave === 37) {izquierda -= (izquierda> 0? 10: 0); this.div.style.left = Left+'Px'; this.curentState = fsm.show1; } if (key === 39) {this.curentState = fsm.show2; izquierda += (izquierda +parseint (styles.width)) <parseint (parentstyles.width)? 10: 0; this.div.style.left = Left+'Px'; }} var a = new Ball (); a.init (); } </script> <style> #Div {posición: absoluto; Ancho: 80%; Altura: 80%; arriba: 0; Abajo: 0; Izquierda: 0; Derecha: 0; margen: auto; Border: 1px Solid Darkan; } #go {posición: absoluto; Ancho: 50px; Altura: 50px; Izquierda: 10px; Arriba: 20px; borde: 1px gris sólido; -WebKit-Border-Radius: 50px; -Moz-Border-Radius: 50px; Border-Radius: 50px; IMAGEN DE ACTUALO: gradiente radial (círculo, blanco 5%, negro 100%); } </style> </head> <body> <div id = "div"> Presione la tecla de flecha para mover el cuadrado <div ID = "Go"> </div> </div> </body> </html>3. Versión de JavaScript de State Machine (tomando luces de conmutador simples como ejemplo)
1. Delegar directamente la solicitud a un objeto literal a través de la función.prototype.call método para ejecutar
// State Machine var fsm = {OFF: {ButtonWaSpressed: function () {console.log ("Downlight"); this.button.innerhtml = "Siguiente presionando estoy encendiendo la luz"; // Esta es una propiedad a la luz! ! ! this.currstate = fsm.on; // ¡esta es la propiedad de la luz! ! ! }}, ON: {ButtonWaSpressed: function () {console.log ("light on"); this.button.innerhtml = "Siguiente presionando estoy apagando la luz"; this.currstate = fsm.off; }},}; var light = function () {this.currState = fsm.off; // establece el estado actual este.Button = null;}; Light.prototype.init = function () {var button = document.createElement ("botón"); self = esto; Button.innerhtml = "Light Off"; this.button = document.body.appendChild (botón); this.Button.OnClick = function () {// Solicitar para delegar a la máquina de estado FSM self.currstate.buttonwasprissed.call (self); }} var light = new Light (); light.init ();2.Use la función delegada
var delegate = function (cliente, delegación) {return {ButtonwasPissed: function () {return delegation.buttonwasPissed.apply (cliente, argumentos); }};}; // State Machine var fsm = {OFF: {ButtonWaSpressed: function () {console.log ("Off"); this.button.innerhtml = "Siguiente presionando estoy encendiendo la luz"; this.currstate = this.onstate; }}, ON: {ButtonWaSpressed: function () {console.log ("en la luz"); this.button.innerhtml = "Siguiente presionando, estoy apagando las luces"; this.currState = this.OffState; }},}; var light = function () {this.offstate = delegate (this, fsm.off); this.onstate = delegate (this, fsm.on); this.currState = this.OffState; // establece el estado actual este.Button = null;}; Light.prototype.init = function () {var button = document.createElement ("botón"); self = esto; Button.innerhtml = "Light Off"; this.button = document.body.appendChild (botón); this.Button.OnClick = function () {// Solicitar para delegar a la máquina de estado FSM self.currState.ButtonWasPressed (); }} var light = new Light (); light.init ();Los modos de estado y los modos de política son muy similares. Ambos encapsulan una serie de algoritmos o comportamientos. Todos tienen un objeto de contexto para delegar solicitudes de clases encapsuladas (clases de políticas, máquinas de estado), pero sus intenciones son diferentes:
1. Los diversos atributos de la clase de política son igualmente paralelos, y no hay conexión entre ellos.
2. Hay un cambio mutuo entre los diversos estados en la máquina de estado y se especifica.
Referencias: "Patrón de JavaScript" "JavaScript Patrón de diseño y práctica de desarrollo"
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.