首页 > 编程语言 >设计模式-javascript实现【状态模式】

设计模式-javascript实现【状态模式】

时间:2023-03-07 12:12:15浏览次数:43  
标签:状态 设计模式 console light javascript 模式 buttonWasPressed currState setState

定义:允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类。
其主要原理是将状态封装成独立的类,并将请求委托给当前的状态对象,当对象内部状态变化时,
会带来不同的行为变化。

1. 状态模式类实现方式

// 状态类
class OffLightState {
  constructor(light) {
    this.light = light;
  }
  buttonWasPressed (){
    console.log('weak light');
    this.light.setState(this.light.weakLightState);
  }
}

class WeakLightState {
  constructor(light) {
    this.light = light;
  }
  buttonWasPressed (){
    console.log('strong light');
    this.light.setState(this.light.strongLightState);
  }
}

class StrongLightState {
  constructor(light) {
    this.light = light;
  }
  buttonWasPressed (){
    console.log('off light');
    this.light.setState(this.light.offLightState);
  }
}

class Light {
  constructor() {
    this.offLightState = new OffLightState(this);
    this.weakLightState = new WeakLightState(this);
    this.strongLightState = new StrongLightState(this);
    this.currState = null;
  }
  // 初始化状态
  init() {
    this.currState = this.offLightState;
  }
  // 切换当前状态
  setState (newState) {
    this.currState = newState;
  }

  // 将行为委托给当前的状态对象
  buttonWasPressed() {
    this.currState.buttonWasPressed();
  }
}

const light = new Light();
light.init();
light.buttonWasPressed(); // weak light
light.buttonWasPressed(); // strong light
light.buttonWasPressed(); // off light

2. 状态模式对象实现方式

const light = {
  currState: null,
  init: () => {
    this.currState = lightState.off;
  },
  setState: (state) => {
    this.currState = state;
  },
  buttonWasPressed: () => {
    this.currState.buttonWasPressed();
  }
};

// 定义状态对象
const lightState = {
  off: {
    buttonWasPressed: () => {
      console.log('weak light');
      light.setState(lightState.weak);
    }
  },
  weak: {
    buttonWasPressed: () => {
      console.log('strong light');
      light.setState(lightState.strong);
    }
  },
  strong: {
    buttonWasPressed: () => {
      console.log('off light');
      light.setState(lightState.off);
    }
  }
};

light.init();
light.buttonWasPressed();
light.buttonWasPressed();
light.buttonWasPressed();

3. 状态模式的优点

  • 状态模式定义了状态与行为之间的关系,并将它们封装在一个类里。通过增加新的状态类,很容易
    增加新的状态和转换。
  • 避免了Context无限膨胀,状态切换的逻辑被分布在状态类中,也去掉了Context中过多的分支条件
  • 用对象代替字符串来记录当前状态,使得状态的切换更加一目了然。
  • Context中的请求动作和状态类中的封装的行为可以非常容易地独立变化而互不影响。

标签:状态,设计模式,console,light,javascript,模式,buttonWasPressed,currState,setState
From: https://www.cnblogs.com/xiaodi-js/p/17187591.html

相关文章

  • JavaScript 其他样式操作的属性
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> #box1{ width:100px; height:100px; back......
  • POM模式-Maven工程关系
    依赖【1】依赖关系:即A工程开发或运行过程中需要B工程提供支持,则代表A工程依赖B工程。在这种情况下,需要在A项目的pom.xml文件中增加下属配置定义依赖关系。 通俗理解:......
  • POM模式-Maven工程关系
    依赖【1】依赖关系:即A工程开发或运行过程中需要B工程提供支持,则代表A工程依赖B工程。在这种情况下,需要在A项目的pom.xml文件中增加下属配置定义依赖关系。 通俗理解:......
  • JavaScript 添加删除表格记录练习
    <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html> <head> <metahttp-equiv="Content-Type"content="text/html......
  • JavaScript 使用DOM操作CSS
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> #box1{ width:100px; height:100px; back......
  • JavaScript 读取元素的样式
    <!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <styletype="text/css"> #box1{ width:100px; height:100px; back......
  • JavaScript核心功能之模块的导入导出
    一、模块的概念模块是将JavaScript程序拆分为可按需导入的单独模块的机制。 二、如何创建模块模块是定义在单独的.js文件中的。 三、export导出模块的两种方式1、将expo......
  • JavaScript核心功能之模块命名冲突的解决方式
    避免模块命名冲突的三种解决方式方式一:使用as重命名导出与导入在你的import和export语句的大括号中,可以使用as关键字跟一个新的名字,来改变你在顶级模块中将要使用的功......
  • JavaScript核心功能之模块的应用
    应用模块到你的HTML脚本中的两种方式: 方式一:将type="module"放到<script>标签中,来声明这个脚本是一个模块<scripttype="module"src="main.js"></script>方式二:将模块......
  • 前端设计模式——单例模式
    单例模式是一种设计模式,它可以确保某个类只有一个实例,并提供一个全局的访问点来访问该实例,我们可以使用单例模式来管理全局状态和共享资源。在JavaScript中,单例模式可以通......