JavaScript状态模式实战：有限状态机、性能优化与代码示例

状态模式概述

状态模式

状态模式（State）的核心机制在于，当对象内部状态发生变化时，其外部行为也随之改变，使得该对象在外观上仿佛改变了所属的类。

状态模式的适用场景非常明确，主要包含两种情况： 1. 对象的行为严格依赖于其当前状态，且必须在运行时刻根据状态动态调整行为。某些对象拥有多个状态，每个状态仅允许执行当前状态对应的操作，而无法执行其他状态允许的操作。

2. 某个操作中包含大量的分支语句，且这些分支逻辑依赖于对象的状态，状态通常由一个或多个枚举常量表示。

有限状态机原理

一、有限状态机

有限状态机具备以下三个基本特征： 1. 状态的总数是有限的。 2. 在任意时刻，对象只处于一种状态之中。 3. 在满足特定条件时，对象会从一种状态转换（transition）到另一种状态。

通用的实现做法是将各个状态封装为独立的类（即状态机），并将请求委托给当前的状态对象执行。当对象的内部状态发生改变时，后续的行为也会随之变化。

性能优化策略

二、性能优化点

1. 关于状态对象的创建和销毁管理，主要有两种策略：第一种是仅在需要state对象时才创建，使用完毕后立即销毁（适用于state对象体积较大的场景，优先推荐）；第二种是在初始化时创建所有状态对象，并始终保留不销毁（适用于状态切换频繁的场景）。 2. 可以利用享元模式来共享同一个state对象，以节省内存资源。

应用实例：游戏角色状态

以一个稍微复杂的例子来说，相信大家都玩过角色扮演类游戏，其中的角色拥有多种状态（如站立、行走、奔跑、跳跃、蹲下等）。这些状态之间的切换是预先规定好的，且任何时刻角色只能处于一种状态中。在每个状态下，角色只能执行当前状态允许的行为（例如普通攻击、技能攻击、防御等）。

这是我编写的移动小球的示例代码：


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></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);
    }
   };
   function change(key){
    var styles = window.getComputedStyle(this.div),
     parentStyles = window.getComputedStyle(this.div.parentNode),
     top = parseInt(styles.top),
     left = parseInt(styles.left);
    if(key === 40){
     top += (top+parseInt(styles.height))<parseInt(parentStyles.height) ? 10 : 0;
     this.div.style.top = top+'px';
     this.curentState = FSM.show3;
    }
    if(key === 38){
     top -= (top > 0 ? 10 : 0);
     this.div.style.top = top+'px';
     this.curentState = FSM.show4;
    }
    if(key === 37){
     left -= (left > 0 ? 10 : 0);
     this.div.style.left = left+'px';
     this.curentState = FSM.show1;
    }
    if(key === 39){
     this.curentState = FSM.show2;
     left += (left+parseInt(styles.width))<parseInt(parentStyles.width) ? 10 : 0;
     this.div.style.left = left+'px';
    }
   }
   var a = new Ball();
   a.init();
  }
 </script>
 <style>
  #div{
   position: absolute;
   width: 80%;
   height: 80%;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
   border: 1px solid darkcyan;
  }
  #go{
   position:absolute;
   width:50px;
   height:50px;
   left: 10px;
   top:20px;
   border:1px solid gray;
   -webkit-border-radius : 50px;
   -moz-border-radius: 50px;
   border-radius: 50px;
   background-image: radial-gradient(circle, white 5%, black 100%);
  }
 </style>
</head>
<body>
<div id="div">按下方向键移动方块
 <div id="go"></div>
</div>
</body>
</html>

JavaScript状态机实现

三、JavaScript版本的状态机（以简单的开关灯为例）

1. 通过Function.prototype.call方法，直接将请求委托给某个字面量对象来执行。


 // 状态机
var FSM = {
 off: {
 buttonWasPressed: function() {
  console.log("关灯");
  this.button.innerHTML = "下一次按我是开灯"; // 这是Light上的属性！！！
  this.currState = FSM.on;   // 这是Light上的属性！！！
 }
 },
 on: {
 buttonWasPressed: function() {
  console.log("开灯");
  this.button.innerHTML = "下一次按我是关灯";
  this.currState = FSM.off;
 }
 },
};
 
var Light = function() {
 this.currState = FSM.off; // 设置当前状态
 this.button = null;
};
 
Light.prototype.init = function() {
 var button = document.createElement("button");
 self = this;
 
 button.innerHTML = "已关灯";
 this.button = document.body.appendChild(button);
 this.button.onclick = function() {
 // 请求委托给FSM状态机
 self.currState.buttonWasPressed.call(self);
 }
 
}
 
var light = new Light();
light.init();

2. 利用delegate函数进行委托处理。


 var delegate = function(client, delegation) {
 return {
 buttonWasPressed: function() {
  return delegation.buttonWasPressed.apply(client, arguments);
 }
 };
};
 
// 状态机
var FSM = {
 off: {
 buttonWasPressed: function() {
  console.log("关灯");
  this.button.innerHTML = "下一次按我是开灯";
  this.currState = this.onState;
 }
 },
 on: {
 buttonWasPressed: function() {
  console.log("开灯");
  this.button.innerHTML = "下一次按我是关灯";
  this.currState = this.offState;
 }
 },
};
 
var Light = function() {
 this.offState = delegate(this, FSM.off);
 this.onState = delegate(this, FSM.on);
 this.currState = this.offState; // 设置当前状态
 this.button = null;
};
 
Light.prototype.init = function() {
 var button = document.createElement("button");
 self = this;
 
 button.innerHTML = "已关灯";
 this.button = document.body.appendChild(button);
 this.button.onclick = function() {
 // 请求委托给FSM状态机
 self.currState.buttonWasPressed();
 }
}
 
var light = new Light();
light.init();

状态模式与策略模式在外观上非常相似，它们都封装了一系列算法或行为，并都有一个上下文对象将请求委托给封装类（策略类或状态机）。但两者的意图存在本质区别： 1. 策略类的各个属性之间是平等且平行的，它们之间没有任何联系。 2. 状态机中的各个状态之间存在相互切换的关系，且这种切换是被预先规定好的。

参考文献：《JavaScript模式》《JavaScript设计模式与开发实践》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

JavaScript状态模式详解：从有限状态机到代码实现

状态模式概述

有限状态机原理

性能优化策略

应用实例：游戏角色状态

JavaScript状态机实现

实用工具推荐