介绍
jssm-viz-demo 是一个基于 npm 的 JavaScript 状态机库，旨在帮助前端开发者更轻松地创建状态机。本文将介绍如何使用 jssm-viz-demo。
安装
使用 npm 安装
npm install jssm-viz-demo
直接引用
<script src="https://unpkg.com/jssm-viz-demo"></script>
使用
在 HTML 中创建状态机
-- -------------------- ---- -------
---- ------------------
--------
----- -- - ----------------------------------
----- --- - ----------------------
------ --------
------------ -
- ----- --------- ----- -------- --- -------- --
- ----- --------- ----- --------- --- ----- --
- ----- --------- ----- ------ --- ------- --
--
---
------------------------ -----
---------在页面中创建一个 id 为 my-fsm 的 div 元素，并使用 create 方法创建了一个状态机对象 fsm，并使用 render 方法将其渲染到了 div 元素上。
将状态机渲染至 SVG 上
-- -------------------- ---- -------
---- ------------------
--------
----- -- - ----------------------------------
----- --- - ----------------------
------ --------
------------ -
- ----- --------- ----- -------- --- -------- --
- ----- --------- ----- --------- --- ----- --
- ----- --------- ----- ------ --- ------- --
--
---
----- --- - --------------------- -----
--------------------
---------在页面中创建一个 id 为 my-fsm 的 div 元素，并使用 create 方法创建了一个状态机对象 fsm。使用 svg 方法将状态机渲染成 SVG 形式，然后将 SVG 元素作为子元素添加到 div 中。
改变状态机状态
-- -------------------- ---- -------
---- ------------------
--------
----- -- - ----------------------------------
----- --- - ----------------------
------ --------
------------ -
- ----- --------- ----- -------- --- -------- --
- ----- --------- ----- --------- --- ----- --
- ----- --------- ----- ------ --- ------- --
--
---
------------------------ -----
---------------------------------- -- -- -
-------------
---
---------在页面中创建一个 id 为 my-fsm 的 div 元素，并使用 create 方法创建了一个状态机对象 fsm。使用 render 方法将状态机渲染到 div 元素上。当页面接收到点击事件时，执行 fsm.change() 改变状态机的状态。
总结
jssm-viz-demo 是一个非常方便的 JavaScript 状态机库，可以帮助开发者更轻松地创建和操作状态机。本文介绍了一些基本用法，希望可以为使用者提供帮助和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005673481e8991b448e3b74