JS设计模式之状态模式的用法使用方法

abstract class State {
  constructor(public context: Context | null = null) {}
  // 这里体现出③：用于封装与环境类的特定状态相关的行为
  handle() {
    if (!this.context) {
      console.log("找不到老铁了！");
    } else {
      this.exec();
    }
  }
  next<T extends State>(NextState: new (context: Context) => T) {
    if (!this.context) {
      console.log("找不到老铁了！");
    } else {
      this.context.to(new NextState(this.context));
    }
  }
  abstract exec(): any;
}
// 具体状态类
class StateA extends State {
  // 这里体现出④：用于封装与环境类的特定状态相关的行为
  exec() {
    console.log("买票");
    this.next(StateB);
  }
}
class StateB extends State {
  exec() {
    console.log("坐车");
    this.next(StateC);
  }
}
class StateC extends State {
  exec() {
    console.log("看球");
    this.next(StateO);
  }
}
class StateO extends State {
  exec() {
    throw new Error('已经结束了');
  }
}
// 环境类
class Context {
  // 这里体现出①：环境类维护一个对抽象状态类的引用，即cts
  constructor(public cts: State | null = null) {}
  to(state: State) {
    console.log(`Transitioning to ${state.constructor.name}`);
    this.cts = state;
  }
  do() {
    // 这里体现出②：通过该引用来调用具体状态类的方法
    this.cts?.handle();
  }
}
// 使用示例
const context = new Context();
const stateA = new StateA(context);
context.to(stateA);
while(1){
  try {
    context.do();
  } catch {
    console.log('肯定输了！');
    break;
  }
}

class Context {
  state = 'A';
  to(state: string) {
    console.log(`Transitioning to state ${state}`);
    this.state = state;
  }
  do() {
    if(this.state === 'A'){
      console.log("买票");
      this.to('B');
    } else if (this.state === 'B') {
      console.log("坐车");
      this.to('C');
    } else if (this.state === 'C') {
      console.log("看球");
      this.to('D');
    } else if (this.state === 'D') {
      throw new Error('已经结束了');
    }
  }
}
const context = new Context();
while(1){
  try {
    context.do();
  } catch {
    console.log('肯定输了！');
    break;
  }
}