轻松掌握JavaScript状态模式

状态模式

状态模式(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) ? 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版本的状态机(以简单的开关灯为例)

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

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

(0)

相关推荐

  • php设计模式 State (状态模式)

    状态state模式是GOF23种模式中的一种,和命令模式一样,也是一种行为模式.状态模式和命令模式相当像,一样是"接口-实现类"这种模式的应用,是面向接口编程原则的体现. 状态模式属于对象创建型模式,其意图是允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了他的类.比较常见的例子是在一个表示网络连接的类TCPConnection,一个TCPConnection对象的状态处于若干不同的状态之一:连接已经建立(Established),正在监听,连接已经关闭(closed).

  • iOS App的设计模式开发中对State状态模式的运用

    1.概述 在软件开发过程中,应用程序可能会根据不同的情况作出不同的处理.最直接的解决方案是将这些所有可能发生的情况全都考虑到.然后使用if... ellse语句来做状态判断来进行不同情况的处理.但是对复杂状态的判断就显得"力不从心了".随着增加新的状态或者修改一个状体(if else(或switch case)语句的增多或者修改)可能会引起很大的修改,而程序的可读性,扩展性也会变得很弱.维护也会很麻烦.那么我就考虑只修改自身状态的模式. 例子1:按钮来控制一个电梯的状态,一个电梯开们,

  • 详解PHP中的状态模式编程

    定义 状态模式,又称状态对象模式(Pattern of Objects for State),状态模式就是对象的行为模式.状态模式允许一个对象在其内部状态改变的时候改变其行为.这个对象看上去就像是改变了它的类一样 UML图 状态模式中主要角色 抽象状态角色(State):定义一个接口或抽象类State,用以封装环境对象的一个特定的状态所对应的行为 具体状态(ConcreteState)角色:每一个状态类都实现了环境(Context)的一个状态所对应的行为 环境(Context)角色:定义客户端所

  • 深入理解JavaScript系列(43):设计模式之状态模式详解

    介绍 状态模式(State)允许一个对象在其内部状态改变的时候改变它的行为,对象看起来似乎修改了它的类. 正文 举个例子,就比如我们平时在下载东西,通常就会有好几个状态,比如准备状态(ReadyState).下载状态(DownloadingState).暂停状态(DownloadPausedState).下载完毕状态(DownloadedState).失败状态(DownloadFailedState),也就是说在每个状态都只可以做当前状态才可以做的事情,而不能做其它状态能做的事儿. 由于Stat

  • 学习JavaScript设计模式之状态模式

    状态模式的关键是区分事物内部的状态,事物内部状态的改变往往会带来事物的行为改变. 当电灯开着,此时按下开关,电灯会切换到关闭状态:再按一次开关,电灯又将被打开.同一个开关在不同的状态下,表现出来的行为是不一样的. 一.有限状态机 状态总数(state)是有限的. 任一时刻,只处在一种状态之中. 某种条件下,会从一种状态转变(transition)到另一种状态. 允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类. 解释: (1)将状态封装成独立的类,并将请求委托给当前的状态对

  • 学习php设计模式 php实现状态模式

    一.意图 允许一个对象在其内部状态改变时改变它的行为.对象看起来似乎修改了它的类 状态模式变化的位置在于对象的状态 二.状态模式结构图   三.状态模式中主要角色 抽象状态(State)角色:定义一个接口,用以封装环境对象的一个特定的状态所对应的行为 具体状态(ConcreteState)角色:每一个具体状态类都实现了环境(Context)的一个状态所对应的行为 环境(Context)角色:定义客户端所感兴趣的接口,并且保留一个具体状态类的实例.这个具体状态类的实例给出此环境对象的现有状态 四.

  • 对比Java设计模式编程中的状态模式和策略模式

    为了能在Java应用程序中正确的使用状态模式和策略模式,开发人员需要清楚地知道这两种模式之间的区别.尽管状态模式和策略模式的结构非常相似,它们又同样遵循开闭原则,都代表着SOLID设计原则的'O',但它们的意图是完全不同的.Java中的策略模式是对一组相关的算法进行封装,给调用方提供了运行时的灵活性.调用方可以在运行时选择不同的算法,而不用修改使用策略的那个Context类.使用策略模式的经典例子包括实现加密算法,压缩算法,以及排序算法.另一方面,状态模式使用一个对象可以在不同的状态下表现出不同

  • C++设计模式之状态模式

    前言 在实际开发中,我们经常会遇到这种情况:一个对象有多种状态,在每一个状态下,都会有不同的行为.那么在代码中我们经常是这样实现的. 复制代码 代码如下: typedef enum tagState {      state,      state1,      state2 }State;   void Action(State actionState) {      if (actionState == state)      {           // DoSomething     

  • Java设计模式之状态模式(State模式)介绍

    State的定义:不同的状态,不同的行为:或者说,每个状态有着相应的行为. 何时使用状态模式 State模式在实际使用中比较多,适合"状态的切换".因为我们经常会使用If elseif else 进行状态切换, 如果针对状态的这样判断切换反复出现,我们就要联想到是否可以采取State模式了. 不只是根据状态,也有根据属性.如果某个对象的属性不同,对象的行为就不一样,这点在数据库系统中出现频率比较高,我们经常会在一个数据表的尾部,加上property属性含义的字段,用以标识记录中一些特殊

  • 详解state状态模式及在C++设计模式编程中的使用实例

    每个人.事物在不同的状态下会有不同表现(动作),而一个状态又会在不同的表现下转移到下一个不同的状态(State).最简单的一个生活中的例子就是:地铁入口处,如果你放入正确的地铁票,门就会打开让你通过.在出口处也是验票,如果正确你就可以 ok,否则就不让你通过(如果你动作野蛮,或许会有报警(Alarm),:)). 有限状态自动机(FSM)也是一个典型的状态不同,对输入有不同的响应(状态转移). 通常我们在实现这类系统会使用到很多的 Switch/Case 语句,Case 某种状态,发生什么动作,C

随机推荐