js如何写状态机

在JavaScript中实现状态机的方法有很多种，常见的包括：使用对象、类、函数等。状态机的核心思想是：将系统的不同状态和状态之间的转换规则显式地表示出来、通过状态机可以使代码更加清晰、易于维护。在本文中，我们将详细探讨如何使用JavaScript来实现状态机，并讨论其在实际应用中的一些重要细节和最佳实践。

一、什么是状态机

状态机（State Machine）是一种数学模型，用于描述一个系统在不同状态之间的转换。状态机包含以下几个要素：

状态（State）：系统在某一时刻的具体状态。
事件（Event）：触发状态转换的外部或内部事件。
转换（Transition）：从一个状态到另一个状态的过程。
动作（Action）：在状态转换过程中执行的操作。

二、状态机的基本实现

1、使用对象实现状态机

JavaScript中最简单的状态机实现方式是使用对象来表示不同的状态和转换规则。例如，我们可以用一个对象来表示一个简单的状态机：

class StateMachine {
  constructor() {
    this.state = 'idle'; // 初始状态
    this.transitions = {
      idle: {
        start: 'running'
      },
      running: {
        stop: 'idle'
      }
    };
  }
  transition(event) {
    const nextState = this.transitions[this.state][event];
    if (nextState) {
      this.state = nextState;
      console.log(`Transitioned to ${this.state}`);
    } else {
      console.log(`Invalid transition from ${this.state} on ${event}`);
    }
  }
}
const sm = new StateMachine();
sm.transition('start'); // 输出：Transitioned to running
sm.transition('stop');  // 输出：Transitioned to idle

2、使用类实现状态机

通过使用JavaScript的类（Class）语法，我们可以创建一个更为结构化的状态机：

class StateMachine {
  constructor(initialState, transitions) {
    this.state = initialState;
    this.transitions = transitions;
  }
  transition(event) {
    const nextState = this.transitions[this.state][event];
    if (nextState) {
      this.state = nextState;
      console.log(`Transitioned to ${this.state}`);
    } else {
      console.log(`Invalid transition from ${this.state} on ${event}`);
    }
  }
}
const transitions = {
  idle: {
    start: 'running'
  },
  running: {
    stop: 'idle'
  }
};
const sm = new StateMachine('idle', transitions);
sm.transition('start'); // 输出：Transitioned to running
sm.transition('stop');  // 输出：Transitioned to idle

3、使用函数式编程实现状态机

函数式编程风格也可以用于实现状态机，这种方式更加简洁：

const stateMachine = (initialState, transitions) => {
  let state = initialState;
  return {
    transition(event) {
      const nextState = transitions[state][event];
      if (nextState) {
        state = nextState;
        console.log(`Transitioned to ${state}`);
      } else {
        console.log(`Invalid transition from ${state} on ${event}`);
      }
    },
    getState() {
      return state;
    }
  };
};
const transitions = {
  idle: {
    start: 'running'
  },
  running: {
    stop: 'idle'
  }
};
const sm = stateMachine('idle', transitions);
sm.transition('start'); // 输出：Transitioned to running
sm.transition('stop');  // 输出：Transitioned to idle

三、状态机的高级用法

1、状态机中的动作

有时，我们需要在状态转换过程中执行一些操作，这时可以引入动作（Action）：

class StateMachine {
  constructor(initialState, transitions, actions) {
    this.state = initialState;
    this.transitions = transitions;
    this.actions = actions;
  }
  transition(event) {
    const nextState = this.transitions[this.state][event];
    if (nextState) {
      if (this.actions[this.state] && this.actions[this.state][event]) {
        this.actions[this.state][event]();
      }
      this.state = nextState;
      console.log(`Transitioned to ${this.state}`);
    } else {
      console.log(`Invalid transition from ${this.state} on ${event}`);
    }
  }
}
const transitions = {
  idle: {
    start: 'running'
  },
  running: {
    stop: 'idle'
  }
};
const actions = {
  idle: {
    start: () => console.log('Starting...')
  },
  running: {
    stop: () => console.log('Stopping...')
  }
};
const sm = new StateMachine('idle', transitions, actions);
sm.transition('start'); // 输出：Starting... Transitioned to running
sm.transition('stop');  // 输出：Stopping... Transitioned to idle

2、引入异步操作

在实际应用中，状态机中的动作往往是异步的，例如网络请求、定时器等。我们可以使用async/await来处理这种情况：

class StateMachine {
  constructor(initialState, transitions, actions) {
    this.state = initialState;
    this.transitions = transitions;
    this.actions = actions;
  }
  async transition(event) {
    const nextState = this.transitions[this.state][event];
    if (nextState) {
      if (this.actions[this.state] && this.actions[this.state][event]) {
        await this.actions[this.state][event]();
      }
      this.state = nextState;
      console.log(`Transitioned to ${this.state}`);
    } else {
      console.log(`Invalid transition from ${this.state} on ${event}`);
    }
  }
}
const transitions = {
  idle: {
    start: 'running'
  },
  running: {
    stop: 'idle'
  }
};
const actions = {
  idle: {
    start: async () => {
      console.log('Starting...');
      await new Promise(resolve => setTimeout(resolve, 1000));
      console.log('Started');
    }
  },
  running: {
    stop: async () => {
      console.log('Stopping...');
      await new Promise(resolve => setTimeout(resolve, 1000));
      console.log('Stopped');
    }
  }
};
const sm = new StateMachine('idle', transitions, actions);
sm.transition('start'); // 输出：Starting... (1秒后) Started Transitioned to running
sm.transition('stop');  // 输出：Stopping... (1秒后) Stopped Transitioned to idle

四、状态机的实际应用

1、表单状态管理

在前端开发中，表单的状态管理是一个常见的应用场景。状态机可以帮助我们更好地管理表单的不同状态，例如：初始状态、加载状态、成功状态和失败状态。

class FormStateMachine {
  constructor() {
    this.state = 'initial';
    this.transitions = {
      initial: {
        submit: 'loading'
      },
      loading: {
        success: 'success',
        failure: 'failure'
      },
      success: {
        reset: 'initial'
      },
      failure: {
        reset: 'initial'
      }
    };
    this.actions = {
      loading: {
        success: async () => {
          await new Promise(resolve => setTimeout(resolve, 500));
          console.log('Form submitted successfully');
        },
        failure: async () => {
          await new Promise(resolve => setTimeout(resolve, 500));
          console.log('Form submission failed');
        }
      }
    };
  }
  async transition(event) {
    const nextState = this.transitions[this.state][event];
    if (nextState) {
      if (this.actions[this.state] && this.actions[this.state][event]) {
        await this.actions[this.state][event]();
      }
      this.state = nextState;
      console.log(`Transitioned to ${this.state}`);
    } else {
      console.log(`Invalid transition from ${this.state} on ${event}`);
    }
  }
}
const formSM = new FormStateMachine();
formSM.transition('submit'); // 输出：Transitioned to loading (0.5秒后) Form submitted successfully Transitioned to success
formSM.transition('success'); // 输出：Invalid transition from success on success
formSM.transition('reset'); // 输出：Transitioned to initial

2、复杂业务逻辑的管理

在一些复杂的业务逻辑中，状态机可以帮助我们理清状态和状态之间的转换关系。例如，在一个电商平台中，订单的状态管理可以使用状态机来实现：

class OrderStateMachine {
  constructor() {
    this.state = 'created';
    this.transitions = {
      created: {
        pay: 'paid',
        cancel: 'canceled'
      },
      paid: {
        ship: 'shipped',
        refund: 'refunded'
      },
      shipped: {
        deliver: 'delivered',
        return: 'returned'
      },
      delivered: {},
      canceled: {},
      refunded: {},
      returned: {}
    };
    this.actions = {
      created: {
        pay: async () => {
          await new Promise(resolve => setTimeout(resolve, 500));
          console.log('Order paid');
        },
        cancel: async () => {
          await new Promise(resolve => setTimeout(resolve, 500));
          console.log('Order canceled');
        }
      },
      paid: {
        ship: async () => {
          await new Promise(resolve => setTimeout(resolve, 500));
          console.log('Order shipped');
        },
        refund: async () => {
          await new Promise(resolve => setTimeout(resolve, 500));
          console.log('Order refunded');
        }
      },
      shipped: {
        deliver: async () => {
          await new Promise(resolve => setTimeout(resolve, 500));
          console.log('Order delivered');
        },
        return: async () => {
          await new Promise(resolve => setTimeout(resolve, 500));
          console.log('Order returned');
        }
      }
    };
  }
  async transition(event) {
    const nextState = this.transitions[this.state][event];
    if (nextState) {
      if (this.actions[this.state] && this.actions[this.state][event]) {
        await this.actions[this.state][event]();
      }
      this.state = nextState;
      console.log(`Transitioned to ${this.state}`);
    } else {
      console.log(`Invalid transition from ${this.state} on ${event}`);
    }
  }
}
const orderSM = new OrderStateMachine();
orderSM.transition('pay'); // 输出：Transitioned to paid (0.5秒后) Order paid Transitioned to paid
orderSM.transition('ship'); // 输出：Transitioned to shipped (0.5秒后) Order shipped Transitioned to shipped
orderSM.transition('deliver'); // 输出：Transitioned to delivered (0.5秒后) Order delivered Transitioned to delivered

3、游戏开发中的状态管理

在游戏开发中，状态机可以用于管理角色的状态，例如：待机、行走、攻击、死亡等状态：

class CharacterStateMachine {
  constructor() {
    this.state = 'idle';
    this.transitions = {
      idle: {
        walk: 'walking',
        attack: 'attacking',
        die: 'dead'
      },
      walking: {
        stop: 'idle',
        attack: 'attacking',
        die: 'dead'
      },
      attacking: {
        stop: 'idle',
        die: 'dead'
      },
      dead: {}
    };
    this.actions = {
      idle: {
        walk: () => console.log('Character starts walking'),
        attack: () => console.log('Character starts attacking')
      },
      walking: {
        stop: () => console.log('Character stops walking'),
        attack: () => console.log('Character starts attacking')
      },
      attacking: {
        stop: () => console.log('Character stops attacking')
      },
      dead: {
        die: () => console.log('Character is dead')
      }
    };
  }
  transition(event) {
    const nextState = this.transitions[this.state][event];
    if (nextState) {
      if (this.actions[this.state] && this.actions[this.state][event]) {
        this.actions[this.state][event]();
      }
      this.state = nextState;
      console.log(`Transitioned to ${this.state}`);
    } else {
      console.log(`Invalid transition from ${this.state} on ${event}`);
    }
  }
}
const charSM = new CharacterStateMachine();
charSM.transition('walk'); // 输出：Character starts walking Transitioned to walking
charSM.transition('attack'); // 输出：Character starts attacking Transitioned to attacking
charSM.transition('die'); // 输出：Character is dead Transitioned to dead

五、状态机的最佳实践

1、状态和事件的命名规范

为了使代码更加清晰易读，我们应该遵循一定的命名规范。状态通常使用名词，事件通常使用动词。例如：

const transitions = {
  idle: {
    start: 'running'
  },
  running: {
    stop: 'idle'
  }
};

2、状态机的可视化

在复杂的状态机中，状态和转换的关系可能会变得非常复杂。此时，可以使用一些工具将状态机的结构可视化，例如：Statecharts、XState等。

3、使用状态机库

在实际开发中，我们可以使用一些成熟的状态机库来简化开发过程。例如，XState是一个强大的状态机和状态图库，提供了丰富的功能和良好的可扩展性。

import { Machine, interpret } from 'xstate';
const toggleMachine = Machine({
  id: 'toggle',
  initial: 'inactive',
  states: {
    inactive: {
      on: { TOGGLE: 'active' }
    },
    active: {
      on: { TOGGLE: 'inactive' }
    }
  }
});
const toggleService = interpret(toggleMachine)
  .onTransition(state => console.log(state.value))
  .start();
toggleService.send('TOGGLE'); // 输出：active
toggleService.send('TOGGLE'); // 输出：inactive

4、状态机的测试

为了确保状态机的正确性，我们应该编写测试用例来验证状态和转换的正确性。可以使用Jest等测试框架来编写状态机的单元测试。

const stateMachine = (initialState, transitions) => {
  let state = initialState;
  return {
    transition(event) {
      const nextState = transitions[state][event];
      if (nextState) {
        state = nextState;
      }
      return state;
    },
    getState() {
      return state;
    }
  };
};
test('state machine transitions', () => {
  const transitions = {
    idle: {
      start: 'running'
    },
    running: {
      stop: 'idle'
    }
  };
  const sm = stateMachine('idle', transitions);
  expect(sm.transition('start')).toBe('running');
  expect(sm.transition('stop')).toBe('idle');
});

通过编写测试用例，我们可以确保状态机在不同情况下的行为是符合预期的，提高代码的可靠性。

六、结论

状态机是一个强大而灵活的工具，可以帮助我们更好地管理复杂系统中的状态和状态转换。在JavaScript中，我们可以使用对象、类、函数等多种方式来实现状态机，并结合异步操作、动作等高级特性来满足实际应用中的需求。通过合理使用状态机，我们可以使代码更加清晰、易于维护，并提高系统的可靠性。在实际开发中，遵循命名规范、使用状态机库、编写测试用例等最佳实践，可以进一步提高状态机的开发效率和质量。