javascript设计模式 – 状态模式原理与用法实例分析

2023年6月10日下午7:14 • JavaScript

下面是“javascript设计模式 – 状态模式原理与用法实例分析”的完整攻略，包括原理、用法实例分析和示例说明。

前言

状态模式是一种行为型模式，它用一种更好的方式来处理对象状态之间的转换。在这篇文章中，我们将讨论状态模式的原理和用法实例分析。

状态模式原理

状态模式是一种通过使用状态和转换来实现状态转换的行为型模式。在这种模式中，状态表示为一个对象，而状态转换是由一个操作或方法对状态对象进行调用来完成的。

在状态模式中，一个对象可以在不同状态下执行不同的操作。这些状态通常是由状态对象来表示的。当状态发生变化时，对象的行为也会随之改变。

状态模式的核心是“封装变化”，它把状态转移的过程封装在状态类中。这样，在不同的状态下，对象可以拥有不同的行为。

状态模式用法实例分析

下面我们举两个状态模式的用法实例进行分析。

用法实例一

考虑一个订单的状态，订单可以处于“待支付”、“已支付”和“已退款”这三种状态之一。我们可以使用状态模式来管理订单状态的变化。

class Order {
  constructor() {
    this.state = new WaitingForPaymentState();
  }

  setState(state) {
    this.state = state;
  }

  pay() {
    this.state.pay(this);
  }

  refund() {
    this.state.refund(this);
  }
}

class WaitingForPaymentState {
  pay(order) {
    console.log("订单已支付");
    order.setState(new PaidState());
  }

  refund(order) {
    console.log("订单未支付，不能退款");
  }
}

class PaidState {
  pay(order) {
    console.log("订单已支付，无需重复支付");
  }

  refund(order) {
    console.log("订单已退款");
    order.setState(new RefundedState());
  }
}

class RefundedState {
  pay(order) {
    console.log("订单已退款，不能重复支付");
  }

  refund(order) {
    console.log("订单已退款，不能重复退款");
  }
}

const order = new Order();
order.pay(); //订单已支付
order.pay(); //订单已支付，无需重复支付
order.refund(); //订单已退款

在上面的代码中，我们使用订单对象来管理订单状态，并使用状态对象来实现状态之间的转换。当订单需要支付或退款时，调用订单对象的对应方法即可。

用法实例二

假设我们正在编写一个音乐播放器，它可以处于“播放”、“暂停”和“停止”这三种状态之一。我们可以使用状态模式来管理音乐播放器的状态。

class AudioPlayer {
  constructor() {
    this.state = new StoppedState();
  }

  setState(state) {
    this.state = state;
  }

  play() {
    this.state.play(this);
  }

  pause() {
    this.state.pause(this);
  }

  stop() {
    this.state.stop(this);
  }
}

class StoppedState {
  play(player) {
    console.log("音乐开始播放");
    player.setState(new PlayingState());
  }

  pause(player) {
    console.log("音乐已停止，不能暂停");
  }

  stop(player) {
    console.log("音乐已经停止");
  }
}

class PlayingState {
  play(player) {
    console.log("音乐已经在播放");
  }

  pause(player) {
    console.log("音乐暂停");
    player.setState(new PausedState());
  }

  stop(player) {
    console.log("音乐停止");
    player.setState(new StoppedState());
  }
}

class PausedState {
  play(player) {
    console.log("音乐继续播放");
    player.setState(new PlayingState());
  }

  pause(player) {
    console.log("音乐已经暂停了");
  }

  stop(player) {
    console.log("音乐停止");
    player.setState(new StoppedState());
  }
}

const player = new AudioPlayer();
player.play(); //音乐开始播放
player.pause(); //音乐暂停
player.play(); //音乐继续播放
player.stop(); //音乐停止

在上面的代码中，我们使用音乐播放器对象来管理播放器状态，并使用状态对象来实现状态之间的转换。当需要播放、暂停或停止音乐时，调用播放器对象的对应方法即可。