前面介绍了界面有限状态机https://github.com/jakesgordon/javascript-state-machine的基本使用方法，这个状态机的另一个有用的功能是流程的可视化显示，通过使用state-machine-visualize插件可以根据状态机的定义生成.dot语言描述的图形格式，然后可以将.dot描述的流程转换为流程图。插件的使用非常简单，如果在浏览器使用，只有引用插件就可以直接调用生成.dot语言的方法，示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Javascript Finite State Machine</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.green {background:green}
.red {background:red}
.yellow {background:yellow}
</style>
</head>
<body>
<div >
<div id="controls">
<button id="clear" onclick="Demo.clear();">解除</button>
<button id="calm" onclick="Demo.calm();">降级</button>
<button id="warn" onclick="Demo.warn();">警告</button>
<button id="panic" onclick="Demo.panic();">严重!</button>
<button id="vis" onclick="vis();">生成Dot</button>
</div>
<div id="diagram" style="width: 200px; height: 200px;">
</div>
<textarea id="output">
</textarea>
<textarea id="dot" style="width: 200px; height: 200px;">
</textarea>
</div>
<script src="dist/state-machine.js"></script>
<script src="dist/state-machine-visualize.js"></script>
<script src="js/index.js"></script>
<script>
function vis(){
var dot=StateMachineVisualize(Demo);
document.getElementById('dot').value=dot;
}
</script>
</body>
</html>
下面是运行的结果：
图片.png
可以使用其它插件将生成的.dot转换为流程图。
网友评论