有限状态机是什么? 如何使用有限状态机实现任务四

大家好,我是IT修真院深圳分院第06期学员,一枚正直善良的web程序员。

今天给大家分享一下,修真院官网 JS-04任务中可能会使用到的知识点:

1.背景介绍

有限状态机是什么?

有限状态机,(英语:Finite-state machine, FSM),又称有限状态自动机,简称状态机, 是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。

其作用主要是描述对象在它的生命周期内所经历的状态序列,以及如何响应来自外界的各种事件。在计算机科学中, 有限状态机被广泛用于建模应用行为、硬件电路系统设计、软件工程,编译器、网络协议、和计算与语言的研究。

TCP协议状态机


2.知识剖析

我们来看一下阮一峰对有限状态机的描述
它有三个特征:
状态总数(state)是有限的。
任一时刻,只处在一种状态之中。
某种条件下,会从一种状态转变(transition)到另一种状态。
它对JavaScript的意义在于,很多对象可以写成有限状态机。 举例来说,网页上有一个菜单元素。鼠标悬停的时候,菜单显示;鼠标移开的时候,菜单隐藏。 如果使用有限状态机描述,就是这个菜单只有两种状态(显示和隐藏),鼠标会引发状态转变。

 var menu = {
    // 当前状态
    currentState: 'hide',
    // 绑定事件
    initialize: function() {
      var self = this;
      self.on("hover", self.transition);
    },
    // 状态转换
    transition: function(event){
      switch(this.currentState) {
        case "hide":
          this.currentState = 'show';
          doSomething();
          break;
        case "show":
          this.currentState = 'hide';
          doSomething();
          break;
        default:
          console.log('Invalid State!');
          break;
      }
    }
  };
                               
但实际上我们只是需要转换一个状态而已,鼠标移上去显示菜单,否则隐藏, 上面的代码就比较低效和笨拙,把简单问题复杂化了。

所以,问题规模小的时候,if-else 就可以工作的很好了,但当问题规模一大, 无论是大量的 if-else还是问题解决方案的本身将会复杂庞大难以维护,这时候引入状态机的概念就非常行之有效了。

并且当我们把状态机的实现交给javascript-state-machine这种库上时,我们其实只用关心解决方案的本身,而不用自己去实现状态机。 当我们只用关心解决方案本身的时候,解决问题的难度毫无疑问是变简单了的。


3.常见问题

如何使用javascript-state-machine库

4.解决方案

引入JS文件state-machine


5.代码实战

代码可以通过视频或者我的任务4中查看

任务4状态机相关代码


6.拓展思考

怎样决定有限状态机的使用时机或方式


7.参考文献

参考一:javascript-state-machine
参考二:阮一峰的网络日志

8.更多讨论

①一个js文件可以同时使用两个有限状态机吗?

不同的变量名即可

② js只有state-machine这个库吗

不止,我了解的还有ruby这个

③有限状态机有哪些优点,与普通的if判断语句相比呢?

便于阅读、理解、维护,更重要的是利于综合器优化代码,利于用户添加合适的时序约束条件,利于布局布线器实现设计。


PPT   视频

今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

有兴趣学习编程的同学可以参考我的每天总结,互相学习,共同进步

http://www.jnshu.com/login/1/21055279


阅读更多
文章标签: 前端
下一篇如何开发小程序?
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭