程序设计的状态模式及其使用场景

Posted 2021-06-29 Qianliwind

状态模式的使用场景：
一个由一个或多个动态变化的属性导致发生不同行为的对象，在与外部事件产生互动时，其内部状态就会改变，从而使得系统的行为也随之发生变化，那么这个对象，就是有状态的对象
代码中包含大量与对象状态有关的条件语句，像是if else或switch case语句，且这些条件执行与否依赖于该对象的状态。
如果场景符合上面两个条件，那我们就可以想象状态模式是不是可以帮忙了

状态模式的优缺点：
优点:

一个状态状态对应行为，封装在一个类里，更直观清晰，增改方便
状态与状态间，行为与行为间彼此独立互不干扰
避免事物对象本身不断膨胀，条件判断语句过多
每次执行动作不用走很多不必要的判断语句，用哪个拿哪个
缺点:

需要将事物的不同状态以及对应的行为拆分出来，有时候会无法避免的拆分的很细，有的时候涉及业务逻辑，一个动作拆分出对应的两个状态，动作就拆不明白了，过度设计
必然会增加事物类和动作类的个数，有时候动作类再根据单一原则，按照功能拆成几个类，会反而使得代码混乱，可读性降低
状态模式场景实例
组件开发中的状态模式——导航

我们平时开发组件时很多时候要切换组件的状态，每种状态有不同的处理方式，这个时候就可以使用状态模式进行开发。

用和上面一样的思路，我们来举一个React组件的小例子，比如一个Banner导航，最基本的两种状态，显示和隐藏，如下：

const States = {
  "show": function () {
    console.log("banner展现状态，点击关闭");
    this.setState({
      currentState: "hide"
    })
  },
  "hide": function () {
    console.log("banner关闭状态，点击展现");
    this.setState({
      currentState: "show"
    })
  }
};

同样通过一个对象States来定义banner的状态，这里有两种状态show和hide，分别拥有相应的处理方法，调用后再分别把当前banner改写为另外一种状态。接下来来看导航类Banner：

class Banner extends Component{
  constructor(props) {
    super(props);
    this.state = {
      currentState: "hide"
    }
    this.toggle = this.toggle.bind(this);
  }
  toggle () {
    const s = this.state.currentState;
    States[s] && States[s].apply(this);
  }

  render() {
    const { currentState } = this.state;
    return (
      <div className="banner" onClick={this.toggle}>
      </div>
    );
  }
};

export default Banner;

这个导航类有一个toggle方法用来切换状态，然后调用相应的处理方法。

如果有第三种状态，我们只需要States添加相应的状态和处理程序即可。