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模式及其实现。

如何管理国家？

1 个答案: