javascript - 如何管理状态？

Question

  class Book {
    constructor () {
      this.state = { 'isInitializing': true, 'isFlipping': false, 'isZooming': false, 'isPeeled': false, 'isZoomed': false, 'isFlippable': false }
      this.mode = _viewer.getMatch('(orientation: landscape)') ? 'landscape' : 'portrait'
      this.plotter = { 'origin': JSON.parse(`{ "x": "${parseInt(d.getElementsByTagName('body')[0].getBoundingClientRect().width) / 2}", "y": "${parseInt(d.getElementsByTagName('body')[0].getBoundingClientRect().height) / 2}" }`) }
    }
  ...

我有一个包含许多状态的 Book 类。书中使用 CSS3 动画进行翻页、捏合缩放等操作，期间状态从 isFlipping: false 变为 isFlipping: true、isZoomed: false 更改为 isZoomed: true。

存在相互排斥的情况，例如，当 isZoomed: true 时，isFlippable 必须为 false。

然后使用事件监听器:

  const delegateElement = d.getElementById('plotter')

  const handler = (event) => {
    event.stopPropagation()
    event.preventDefault()

    switch (event.type) {
      case 'mouseover':
        _handleMouseOver(event)
        break
      case 'mouseout':
        _handleMouseOut(event)
        break
      case 'mousemove':
        _handleMouseMove(event)
        break
      case 'mousedown':
        _handleMouseDown(event)
        break
      case 'mouseup':
        _handleMouseUp(event)
        break
      case 'click':
        _handleMouseClicks(event)
        break
      case 'dblclick':
        _handleMouseDoubleClick(event)
        break

然后根据状态:做一些事情。

  const _handleMouseOver = (event) => {
    if (!event.target) return
    // do stuff depending on state, meaning lot of `if else` or `switch` `case ` statements.

  }    
  const _handleMouseOut = (event) => {
    if (!event.target) return
    // do more stuff.
  }

  const _handleMouseMove = (event) => {
    if (!event.target) return
    // do stuff depending on state.
  }
  …
  // more events as per list above… and so on.

现在这将使我的代码变得非常笨拙且难以阅读。 :-(

我想知道我应该采取什么路径来组织逻辑(模式)并在触发事件和动画完成时处理每个事件的书籍状态(transitionend 等)。

Answer 1

据我所知，管理 js 状态的最佳方法是使用状态管理库，如 Mobx或Redux 。

总体了解 Flux 模式及其实现。