Modo de status
O modo de estado permite que um objeto altere seu comportamento quando seu estado interno mudar, e o objeto parece modificar sua classe.
Os cenários de uso do modo de status também são particularmente claros, com os dois pontos a seguir:
1. O comportamento de um objeto depende de seu estado e deve mudar seu comportamento de acordo com seu estado no tempo de execução. (Alguns objetos geralmente têm vários estados, em cada estado, você só pode fazer o que o estado atual pode fazer, mas não o que outros estados podem fazer)
2. Uma operação contém um grande número de declarações de ramificação, e essas declarações de ramificação dependem do estado do objeto. O estado geralmente é uma representação de uma ou mais constantes de enumeração.
1 Máquina de Estado Finito
1. O número total de estados (estado) é limitado.
2. A qualquer momento, você está apenas em um estado.
3. Sob certas condições, ele passará de um estado para outro.
Prática comum: encapsula o estado em uma classe independente (máquina do estado) e delegue a solicitação ao objeto atual do estado. Quando o estado interno do objeto mudar, causará mudanças de comportamento diferentes.
2. Pontos de otimização de desempenho
1. Como gerenciar a criação e destruição de objetos do estado? O primeiro é criar e depois destruir os objetos do estado somente quando são necessários (os objetos do estado são enormes, preferidos), e o outro é criar todos os objetos do estado desde o início e nunca os destruírem (as mudanças de estado com frequência).
2. Use o modo Aproveitar Yuan para compartilhar um objeto de estado.
Para dar um exemplo um pouco complexo, acredito que todo mundo jogou jogos de interpretação de papéis, e os personagens têm muitos estados (estação, caminhada, corrida, pular, agachamento etc.). A troca entre vários estados é especificada e eles só podem estar em um estado a qualquer momento. Em cada estado, os personagens só podem executar comportamentos permitidos no estado atual (como: ataques comuns, vários ataques de habilidade, defesas etc.)
Aqui está um exemplo da bola em movimento que escrevi:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <cript> window.onload = function () {var fsm = {show1: {clickbtn: function) {alteração.call (this, key); }}, show2: {clickbtn: function (key) {alteração.call (this, chave); }}, show3: {clickbtn: function (key) {alteração.call (this, chave); }}, show4: {clickbtn: function (key) {alteração.call (this, chave); }}}}; 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, chave); }}; função alteração (key) {var styles = window.getComputedStyle (this.div), parentStyles = window.getComputedStyle (this.div.parentnode), top = parseint (styles.top), esquerda = 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 -= (topo> 0? 10: 0); this.div.style.top = top+'px'; this.curentState = fsm.show4; } if (key === 37) {esquerda -= (esquerda> 0? 10: 0); this.div.style.left = esquerda+'px'; this.curentState = fsm.show1; } if (key === 39) {this.curentState = fsm.show2; Esquerda += (esquerda +parseint (styles.width)) <parseint (parentstyles.width)? 10: 0; this.div.style.left = esquerda+'px'; }} var a = new Ball (); a.init (); } </script> <yoy> #div {position: absoluto; largura: 80%; Altura: 80%; topo: 0; Inferior: 0; Esquerda: 0; Direita: 0; margem: automático; fronteira: 1px Solid Darkcyan; } #go {posição: absoluto; Largura: 50px; Altura: 50px; Esquerda: 10px; topo: 20px; borda: 1px cinza sólido; -Webkit-Border-Radius: 50px; -Moz-Border-Radius: 50px; Radio de fronteira: 50px; Imagem de fundo: gradiente radial (círculo, 5%branco, preto 100%); } </style> </head> <body> <div id = "div"> Pressione a tecla de seta para mover o quadrado <div id = "go"> </div> </div> </body> </html>3. Versão JavaScript da Máquina de Estado (tomando luzes simples de interruptor como exemplo)
1. Delegar diretamente a solicitação a um objeto literal por meio da função.prototype.CALL Método para executar
// Máquina de estado var fsm = {OFF: {ButtonwasPressed: function () {console.log ("Downlight"); this.button.innerhtml = "Pressionando a seguir, estou ligando a luz"; // Esta é uma propriedade na luz! ! ! this.currstate = fsm.on; // Esta é a propriedade na luz! ! ! }}, on: {ButtonwasPressed: function () {console.log ("Light on"); this.button.innerhtml = "Em seguida, pressionando estou desligando a luz"; this.currstate = fsm.off; }},}; var luz = function () {this.currstate = fsm.off; // defina o estado atual this.Button = null;}; Light.Prototype.init = function () {var Button = document.createElement ("Button"); auto = this; Button.innerhtml = "Light Off"; this.button = document.body.appendChild (botão); this.Button.OnClick = function () {// Solicitação para delegar ao FSM State Machine self.currstate.buttonwaspressed.call (self); }} var luz = new Light (); luz.init ();2.Use a função delegada
var delegate = function (cliente, delegação) {return {buttonwaspressed: function () {return delegation.buttonwaspressed.apply (cliente, argumentos); }};}; // Máquina de estado var fsm = {OFF: {ButtonwasPressed: function () {console.log ("OFF"); this.button.innerhtml = "Pressionando a seguir, estou ligando a luz"; this.currstate = this.onsTate; }}, on: {ButtonwasPressed: function () {console.log ("na luz"); this.button.innerhtml = "Próximo pressionando, estou desligando as luzes"; this.currstate = this.offstate; }},}; var luz = function () {this.offstate = delegado (this, fsm.off); this.Onstate = delegado (isto, fsm.on); this.currstate = this.offstate; // defina o estado atual this.Button = null;}; Light.Prototype.init = function () {var Button = document.createElement ("Button"); auto = this; Button.innerhtml = "Light Off"; this.button = document.body.appendChild (botão); this.Button.OnClick = function () {// Solicitação para delegar ao FSM State Machine Self.CurrState.ButtonwasPressed (); }} var luz = new Light (); luz.init ();Os modos estaduais e os modos de política são muito semelhantes. Ambos encapsulam uma série de algoritmos ou comportamentos. Todos eles têm um objeto de contexto para delegar pedidos de classes encapsuladas (classes de políticas, máquinas de estado), mas suas intenções são diferentes:
1. Os vários atributos da classe de política são igualmente paralelos e não há conexão entre eles.
2. Há uma comutação mútua entre os vários estados da máquina de estado e é especificada.
REFERÊNCIAS: "Javascript Pattern" "JavaScript Design Pattern and Development Practice"
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.