轻松掌握JavaScript状态模式

网络编程 2025/1/12 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

状态模式

状态模式（State）允许一个对象在其内部状态改变的时候改变它的行为，对象看起来似乎修改了它的类。

状态模式的使用场景也特别明确，有如下两点：
1.一个对象的行为取决于它的状态，并且它必须在运行时刻根据状态改变它的行为。（有些对象通常会有好几个状态，在每个状态都只可以做当前状态才可以做的事情，而不能做其它状态能做的事儿）

2.一个操作中含有大量的分支语句，而且这些分支语句依赖于该对象的状态。状态通常为一个或多个枚举常量的表示。

一、有限状态机

1.状态总数（state）是有限的。
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) "div">按下方向键移动方块
 <div id="go"></div>
</div>
</body>
</html>

三、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设计模式与开发实践》

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

js,状态模式

标签：

js,状态模式

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“轻松掌握JavaScript状态模式”

暂无轻松掌握JavaScript状态模式的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年01月12日

轻松掌握JavaScript状态模式

js,状态模式

利用Angularjs实现幻灯片效果

JS简单实现tab切换效果的多窗口显示功能

评论“轻松掌握JavaScript状态模式”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接