js状态模式

允许一个对象在其内部状态改变时改变它的行为。

状态模式将对象的状态封装成独立的类,并使它们可以互相转换

js 复制代码
 // 定义状态接口

class State {

  constructor() {

    if (this.constructor === State) {

      throw new Error('不能实例化抽象类');

    }

  }

  // 定义状态方法

  handle(context) {

    throw new Error('必须实现 handle 方法');

  }

}

  

// 具体状态类 A

class ConcreteStateA extends State {

  constructor() {

    super();

  }

  // 实现状态方法

  handle(context) {

    console.log('执行具体状态 A 的方法');

    context.setState(new ConcreteStateB());

  }

}

  

// 具体状态类 B

class ConcreteStateB extends State {

  constructor() {

    super();

  }

  // 实现状态方法

  handle(context) {

    console.log('执行具体状态 B 的方法');

    context.setState(new ConcreteStateA());

  }

}

  

// 上下文类

class Context {

  constructor() {

    this.state = new ConcreteStateA();

  }

  // 设置状态方法

  setState(state) {

    this.state = state;

  }

  // 执行状态方法

  request() {

    this.state.handle(this);

  }

}

  

// 使用状态模式

let context = new Context();

context.request();

context.request();

context.request();
js 复制代码
class CoffeeMaker {

    constructor() {

      /**

      这里略去咖啡机中与咖啡状态切换无关的一些初始化逻辑

    **/

      // 初始化状态,没有切换任何咖啡模式

      this.state = 'init';

      // 初始化牛奶的存储量

      this.leftMilk = '500ml';

    }

    //将状态作为属性放进去

    stateToProcessor = {

      that: this,

      american() {

        // 尝试在行为函数里拿到咖啡机实例的信息并输出

        console.log('咖啡机现在的牛奶存储量是:', this.that.leftMilk)

        console.log('我只吐黑咖啡');

      },

      latte() {

        this.american()

        console.log('加点奶');

      },

      vanillaLatte() {

        this.latte();

        console.log('再加香草糖浆');

      },

      mocha() {

        this.latte();

        console.log('再加巧克力');

      }

    }

    // 关注咖啡机状态切换函数

    changeState(state) {

      this.state = state;

      if (!this.stateToProcessor[state]) {

        return;

      }

      this.stateToProcessor[state]();

    }

  }

  const mk = new CoffeeMaker();

  mk.changeState('latte');
相关推荐
nbsaas-boot4 小时前
Java 正则表达式白皮书:语法详解、工程实践与常用表达式库
开发语言·python·mysql
chao_7894 小时前
二分查找篇——搜索旋转排序数组【LeetCode】两次二分查找
开发语言·数据结构·python·算法·leetcode
一斤代码5 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
风无雨5 小时前
GO 启动 简单服务
开发语言·后端·golang
斯普信专业组5 小时前
Go语言包管理完全指南:从基础到最佳实践
开发语言·后端·golang
3Katrina5 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_6 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
我是苏苏6 小时前
C#基础:Winform桌面开发中窗体之间的数据传递
开发语言·c#
伍哥的传说6 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
我在北京coding7 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js