JS 状态模式

xingqiba 发布于2019-08-22 11:22 / 2828人阅读

摘要：简介状态模式允许一个对象在其内部状态改变的时候改变它的行为，对象看起来似乎修改了它的类。状态通常为一个或多个枚举常量的表示。简而言之，当遇到很多同级或者的时候，可以使用状态模式来进行简化。

1. 简介

状态模式(State)允许一个对象在其内部状态改变的时候改变它的行为，对象看起来似乎修改了它的类。
其实就是用一个对象或者数组记录一组状态，每个状态对应一个实现，实现的时候根据状态挨个去运行实现。

2. 实现

比如超级玛丽，就可能同时有好几个状态比如跳跃，移动，射击，蹲下等，如果对这些动作一个个进行处理判断，需要多个if-else或者switch不仅丑陋不说，而且在遇到有组合动作的时候，实现就会变的更为复杂，这里可以使用状态模式来实现。

状态模式的思路是：首先创建一个状态对象或者数组，内部保存状态变量，然后内部封装好每种动作对应的状态，然后状态对象返回一个接口对象，它可以对内部的状态修改或者调用。

const SuperMarry = (function() {    
  let _currentState = [],        // 状态数组
      states = {
        jump() {console.log("跳跃!")},
        move() {console.log("移动!")},
        shoot() {console.log("射击!")},
        squat() {console.log("蹲下!")}
      }
  
  const Action = {
    changeState(arr) {  // 更改当前动作
      _currentState = arr
      return this
    },
    goes() {
      console.log("触发动作")
      _currentState.forEach(T => states[T] && states[T]())
      return this
    }
  }
  
  return {
    change: Action.changeState,
    go: Action.goes
  }
})()

SuperMarry
    .change(["jump", "shoot"])
    .go()                    // 触发动作  跳跃!  射击!
    .go()                    // 触发动作  跳跃!  射击!
    .change(["squat"])
    .go()                    // 触发动作  蹲下!

这里可以使用ES6的class优化一下：

class SuperMarry {
  constructor() {
    this._currentState = []
    this.states = {
      jump() {console.log("跳跃!")},
      move() {console.log("移动!")},
      shoot() {console.log("射击!")},
      squat() {console.log("蹲下!")}
    }
  }
  
  change(arr) {  // 更改当前动作
    this._currentState = arr
    return this
  }
  
  go() {
    console.log("触发动作")
    this._currentState.forEach(T => this.states[T] && this.states[T]())
    return this
  }
}

new SuperMarry()
    .change(["jump", "shoot"])
    .go()                    // 触发动作  跳跃!  射击!
    .go()                    // 触发动作  跳跃!  射击!
    .change(["squat"])
    .go()                    // 触发动作  蹲下!

3. 总结

状态模式的使用场景也特别明确，有如下两点：

一个对象的行为取决于它的状态，并且它必须在运行时刻根据状态改变它的行为。

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

简而言之，当遇到很多同级if-else或者switch的时候，可以使用状态模式来进行简化。

本文是系列文章，可以相互参考印证，共同进步~

JS 抽象工厂模式

JS 工厂模式

JS 建造者模式

JS 原型模式

JS 单例模式

JS 回调模式

JS 外观模式

JS 适配器模式

JS 利用高阶函数实现函数缓存(备忘模式)

JS 状态模式

JS 桥接模式

JS 观察者模式

网上的帖子大多深浅不一，甚至有些前后矛盾，在下的文章都是学习过程中的总结，如果发现错误，欢迎留言指出~

参考：
《Javascript 设计模式》 - 张荣铭
设计模式之状态模式

PS：欢迎大家关注我的公众号【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，长按识别下面二维码即可加我好友，备注加群，我拉你入群～

GPU云服务器云服务器状态模式 java状态模式代码 js 获取视频状态 js定时查询数据状态

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92265.html

听飞狐聊JavaScript设计模式系列13

摘要：介一回聊状态模式，官方描述允许一个对象在其内部状态改变时改变它的行为。有限状态机有限状态机是一个非常有用的模型，可以模拟世界上大部分事物。这个是官方说法，简单说，她有三个特征，状态总数是有限的。，任一时刻，只处在一种状态之中。本回内容介绍上一回聊了聊组合模式（Composite），用组合模式模拟了个图片库，聊了递归。介一回聊状态模式（State），官方描述允许一个对象在其内部状态改...

linkin 2019-08-19 17:17 评论0 收藏0
js策略模式vs状态模式

摘要：一策略模式定义把一些小的算法封装起来使他们之间可以相互替换把代码的实现和使用分离开来利用策略模式实现小方块缓动代码代码动画已消耗时间原始位置目标位置持续时间小球运动的时间要改变的属性例如缓动算法记录开始位置并设置定时器是否有要执行的一.策略模式 1.定义:把一些小的算法,封装起来,使他们之间可以相互替换(把代码的实现和使用分离开来)2.利用策略模式实现小方块缓动 html代码: ...

aaron 2019-08-26 11:54 评论0 收藏0
js策略模式vs状态模式

摘要：一策略模式定义把一些小的算法封装起来使他们之间可以相互替换把代码的实现和使用分离开来利用策略模式实现小方块缓动代码代码动画已消耗时间原始位置目标位置持续时间小球运动的时间要改变的属性例如缓动算法记录开始位置并设置定时器是否有要执行的一.策略模式 1.定义:把一些小的算法,封装起来,使他们之间可以相互替换(把代码的实现和使用分离开来)2.利用策略模式实现小方块缓动 html代码: ...

mingde 2019-08-02 10:33 评论0 收藏0
设计模式---状态模式在web前端中的应用

摘要：以上就是状态模式在实际开发中得应用，我们结合了综合应用状态模式。在vue.js之类的mvvm的框架大行其道的当下，开发中最常见的场景就是通过改变数据来展示页面或模块的不同状态，当我们把mvvm玩的不亦乐乎的时候，有时也会停下了想想：在某些项目中不能用vuejs之类的框架时，我们怎么通过改变数据来修改页面或者模块的状态呢。嗯。说到状态，就想到了状态模式状态模式: 在很多情况下，一个对...

刘东 2019-08-21 10:56 评论0 收藏0
设计模式---状态模式在web前端中的应用

摘要：以上就是状态模式在实际开发中得应用，我们结合了综合应用状态模式。在vue.js之类的mvvm的框架大行其道的当下，开发中最常见的场景就是通过改变数据来展示页面或模块的不同状态，当我们把mvvm玩的不亦乐乎的时候，有时也会停下了想想：在某些项目中不能用vuejs之类的框架时，我们怎么通过改变数据来修改页面或者模块的状态呢。嗯。说到状态，就想到了状态模式状态模式: 在很多情况下，一个对...

silvertheo 2019-08-01 15:29 评论0 收藏0