美文网首页
界面上的有限状态机(二)

界面上的有限状态机(二)

作者: 寻找无名的特质 | 来源:发表于2020-12-23 06:13 被阅读0次

前面介绍了Js开发的有限状态机,这里介绍一下这个有限状态机涉及的基本概念——状态(State)和转移(Transition)。下面是说明状态和转移简单的例子,说明了固体液体和气体之间的状态转换:

  var fsm = new StateMachine({
    init: 'solid',
    transitions: [
      { name: 'melt',     from: 'solid',  to: 'liquid' },
      { name: 'freeze',   from: 'liquid', to: 'solid'  },
      { name: 'vaporize', from: 'liquid', to: 'gas'    },
      { name: 'condense', from: 'gas',    to: 'liquid' }
    ]
  });

状态之间的转换动作可以是相同的,比如我们用按钮控制灯的开关,如果灯是打开状态,那么按一下就变为关闭,再按一下就变为打开,那么用状态机可以写为:

  var fsm = new StateMachine({
    init: 'opened',
    transitions: [
      { name: 'push',     from: 'opened',  to: 'closed' },
      { name: 'push',   from: 'closed', to: 'opened'  }
    ]
  });

也有可能一个动作可以使不同的状态转变到同一个状态,比如重置动作,这种情况下,可以在from中使用多个状态:

{ name: 'reset', from: [ 'B', 'C', 'D' ], to: 'A' }

相关文章

  • 界面上的有限状态机(二)

    前面介绍了Js开发的有限状态机,这里介绍一下这个有限状态机涉及的基本概念——状态(State)和转移(Transi...

  • 界面上的有限状态机(三)

    前面介绍了状态和转移的基本用法,还有一些针对复杂场景的高级功能,这里介绍一下。 状态通配符“*” 前面我们提到了,...

  • 界面上的有限状态机(四)

    前面介绍了有限状态机的状态和转换,具体界面响应是在状态转换时进行的,比如如果用户按了按钮,某些控件会不可见,这些动...

  • 界面上的有限状态机(六)

    界面状态机本身不记录历史状态,如果需要查看状态的转换历史,或者需要回滚等功能,可以使用插件。如果在浏览器中使用,可...

  • 界面上的有限状态机(五)

    前面介绍了有限状态机状态转换时激发的事件,这些事件可以在状态机methods种定义捕获函数,这些函数会传入一个li...

  • 界面上的有限状态机(一)

    如果Web界面中涉及若干状态以及状态之间的转换,采用有限状态机管理界面可以使代码结果更清晰、更容易管理,也更容易描...

  • 界面上的有限状态机(八)

    前面我们创建一个有限状态机都是直接使用构造函数,比如: 如果我们希望创建多个定义相同的有限状态机实例,我们可以使用...

  • 界面上的有限状态机(七)

    前面介绍了界面有限状态机https://github.com/jakesgordon/javascript-sta...

  • 有限状态机与JavaScript

    有限状态机与JavaScript 有限状态机是一种很有用的编程模型,简单来说,我理解的有限状态机一个显著的作用是降...

  • cocos creator主程入门教程—— 有限状态机和行为树

    本篇介绍有限状态机和行为树。有限状态机用于有限的状态下的AI,由于同时只能处于一个状态,多个状态需要多个有限状态机...

网友评论

      本文标题:界面上的有限状态机(二)

      本文链接:https://www.haomeiwen.com/subject/jsalnktx.html