JavaScript 设计模式之状态模式

状态模式

假使我们有如下状态

定义状态类

javascript 复制代码
// 比如有一种状态
const State = function () {
  let __currentStatus = {}
  const status = {
    'A': function () {
      console.log('状态A')
    },
    'B': function () {
      console.log('状态B')
    },
    'C': function () {
      console.log('状态C')
    }
  }
  const ActionStatus = {
    change: function () {
      let args = arguments
      __currentStatus = {}
      for (let key of args) {
        __currentStatus[key] = true
      }
      return this
    },
    goes: function () {
      console.log('执行了一次操作')
      for (let key in __currentStatus) {
        status[key] && status[key]()
      }
      return this
    }
  }
  return {
    change: ActionStatus.change,
    goes: ActionStatus.goes
  }
}

状态A、B、C 是不同的状态,可能会有多种状态同时出现的情况,我们可以这样使用

使用

javascript 复制代码
const test = new State()
test.change('A', 'B').goes().goes().change('A', 'C').goes()
/**
执行了一次操作
状态A
状态B
执行了一次操作
状态A
状态B
执行了一次操作
状态A
状态C
*/

或者这样使用

javascript 复制代码
State().change('A', 'B').goes().goes().change('A').goes()

/**
执行了一次操作
状态A
状态B
执行了一次操作
状态A
状态B
执行了一次操作
状态A
*/

我们在商城订单状态较多的情况就可以使用这种模式,比如在待收货前的几种状态下都可以发起某些操作,就可以直接使用 change(x,x,x,x) 的形式去判断逻辑了,而不用再一个个的用 if 叠加判断了

总结

++状态模式既是解决程序中臃肿的分支判断语句问题,将每个分支转化为一种状态独立出来,方便每种状态的管理又不至于每次执行时遍历所有分支。在程序中到底产出哪种行为结果,决定于选择哪种状态,而选择何种状态又是在程序运行时决定的。当然状态模式最终的目的即是简化分支判断流程。++

相关推荐
LCG元38 分钟前
STM32实战:基于STM32F103的Bootloader设计与IAP在线升级
javascript·stm32·嵌入式硬件
jump_jump2 小时前
GetX — Flutter 的瑞士军刀,还是过度封装的陷阱?
flutter·设计模式·前端框架
前端一小卒2 小时前
前端工程师的全栈焦虑,我用 60 天治好了
前端·javascript·后端
zhenxin01223 小时前
【wiki知识库】07.用户管理后端SpringBoot部分
spring boot·后端·状态模式
coderyi4 小时前
LLM Agent 浅析
前端·javascript·人工智能
我叫黑大帅4 小时前
TypeScript 6.0 弃用选项错误 TS5101 解决方法
javascript·后端·面试
科雷软件测试4 小时前
使用python+Midscene.js AI驱动打造企业级WEB自动化解决方案
前端·javascript·python
We་ct4 小时前
LeetCode 120. 三角形最小路径和:动态规划详解
前端·javascript·算法·leetcode·typescript·动态规划
changshuaihua0017 小时前
React 入门
前端·javascript·react.js
掘金安东尼7 小时前
本周前端与 AI 技术情报|前端下一步 #462
前端·javascript·面试