Day12 - 状态机与现实世界的落差 - 2: State Explosion(状态大爆炸)

回想一下至今认识过的状态机范例里,我们目前所见的,都是针对一个物体、物件的小小部分出发,比如 RPG 的移动模组,假设今天不只有移动,我们还需要攻击的模组、技能分配的模组 etc,这些模组才能组合成一个完整的角色。

这次先从一个稍微简单的需求作为范例

1. 早期需求

假设我有个 Web Application 里,有个 input 的 UI component,一开始需求很单纯,只有 valid invalid 两种状态。

https://ithelp.ithome.com.tw/upload/images/20210927/20130721CnutTiQ2uI.png

状态机可以画成
https://ithelp.ithome.com.tw/upload/images/20210927/201307211pDS9k4uW4.png

有个事件 v (valid)能让 invalid 变成 valid;
有个事件 i (invalid)能让 valid 变成 invalid;

2. 新增需求

接着随着设计、商务的新需求,我们的 UI 元件需要 Disable / Enable 的状态。

https://ithelp.ithome.com.tw/upload/images/20210927/20130721mbCy2bdDqR.png

所以现在我们的状态会有 2*2 共四种组合

https://ithelp.ithome.com.tw/upload/images/20210927/20130721eyHetRJoBr.png

假设我们先不去思考为什麽有 invalid disabled 这种奇怪的状态存在,目前上图乍看之下还算清晰,但是...,这是因为还没画上 transition 的关系。画了之後...

有个 e (enabled)事件能让 disabled 变成 enabled;
有个 d (disabled)事件能让 enabled 变成 disabled;

https://ithelp.ithome.com.tw/upload/images/20210927/20130721z79tiMm9Hk.png

不晓得看官,此时看下来有没有开始稍微有点眼花撩乱?
如果没有的话?!想必读者的天赋肯定是异於常人,是个练武奇才,或是非常用心观看呢!!!

3. 新增更多需求

假设今天我们再加上一组条件是检查 input 有没有被改变过了,我们称这个状态为 changed, unchanged

https://ithelp.ithome.com.tw/upload/images/20210927/20130721esiomcqiFn.png

所以现在我们的状态会有 2*2*2 共八种组合,一样我们先暂时不管可能有些状态根本不合理、不会出现在设计稿上。那此时...我们的状态机会长得什麽样子呢?

有个 u (unchanged)事件能让 changed 变成 unchanged;
有个 c (changed)事件能让 unchanged 变成 changed;

https://ithelp.ithome.com.tw/upload/images/20210927/20130721uWTVRmuIor.png

目前光是这三种状况下 2 * 2 * 2 的状态机已长得如此可怕,这就是我们所称之的「状态大爆炸」。

这张图,难以阅读;难以阅读也代表难以维护,是否也代表我们先前介绍的 state machine 太过理想?

於是就有了 State Chart 的诞生! State Chart 是什麽呢?

State Chart 是基於 David Harel (1987) 发表的 A visual formalism for complex systems 一文产生,用来解决状态机在现实世界中,复杂的场景应用。

State Chart 带来了 阶层式状态、平行式状态 等观念...

比如早先提及的 RPG 角色,我们可以将角色这个主体底下的状态,拆成 3 组不同的类别,透过「移动模组」、「攻击的模组」、「技能分配的模组」共同平行组合而成。

我们会在後续几天接着介绍

参考资料

https://statecharts.dev/state-machine-state-explosion.html


<<:  Day21 TensorFlow&OpenCV简介

>>:  Day-27 Excel的count家族

Flask 防止 injection

在写好flask 服务之後,可能会将服务给弱点分析软件进行扫描, 之後会显示出一些高风险的漏洞, 而...

#11 Pandas教学3

Pandas汇入CSV档 # 载入pandas import pandas as pd if __n...

【在厨房想30天的演算法】Day 30 资讯安全与演算法 : 数位凭证

Aloha!我是少女人妻 Uerica!终於来到最後一天了!如果生命只剩一天,我想我会拿来学资料结构...

[重构倒数第20天] - i18n什麽的交给前端来处理吧(一) 把GoogleSheet文件转成JSON文件

前言 该系列是为了让看过Vue官方文件或学过Vue但是却不知道怎麽下手去重构现在有的网站而去规画的系...

33岁转职者的前端笔记-DAY 14 排版技巧小笔记-标签属性元素及定位方法

区块元素(block) 预设为区块元素的标签有:h1~h6,p,div,section,header...