java 状态机_实现一个简单的 JavaScript 状态机

最新推荐文章于 2024-08-19 18:13:17 发布

weixin_39749243

最新推荐文章于 2024-08-19 18:13:17 发布

阅读量159

点赞数

文章标签： java 状态机实现一个简单的dhcp平衡器c++

作者：Nalla Senthilnathan
翻译：疯狂的技术宅
原文： https:// dzone.com/articles/a-si mple-javascript-state-machine 未经允许严禁转载

使用简单的状态机创建干净且健壮的 UI

使用状态机可以构建健壮的 UI，其好处已有详细的描述—— 例如你可以参见Edward J. Pring 的文章和 David Khourshid 的视频。另外Krasimir Tsonev 描述了 JavaScript 中状态机的一些常用方法。一些比较流行的 JavaScript 库是 jakesgordon/javascript-state-machine 和 davidkpiano/xstate 。

在本文中，我将实现一个用于 JavaScript UI 的简单的状态机。为了保持内容简洁，我使用了 jQuery。

经典十字旋转门问题

状态机的经典 “Hello，World” 示例是 Turnstile。以下步骤描述了怎样把状态机应用于十字旋转门问题：

步骤1：编写状态转换表如：

| defaultState | coinEvent | handleCoin() | coinSuccessEvent | coinSuccessState | | ---------------- | --------- | ------------- | ---------------- | -------------------- | | defaultState | coinEvent | handleCoin() | coinErrorEvent | coinErrorState | | coinErrorState | coinEvent | handleCoin() | coinSuccessEvent | coinSuccessState | | coinSuccessState | pushEvent | pushHandler() | pushSuccessEvent | pushEventState |

步骤2：捕获数据结构中的状态：

const

注意，可以通过重构上面的函数体，来使用适当的数据参数调用类似 renderComponent() 的方法。我在这里用了详细模式，因此读者可以在一个地方快速看到 turnstileStates 配置背后的概念。

在这个 “Hello，World” 示例中，我没有使用来自于服务器的任何数据（模型）。当我们从服务器获得这样的模型时，turnstileStates 结构中的函数可以存在一个模型参数。

步骤3：捕获事件和事件处理

const

注意： nextnate 属性用于 turnstileEvents 配置而不是 turnstileStates 配置，因为我们在状态转换表中看到事后指示的下一个状态应该是什么。

步骤4：编排控制器中的状态和事件（在我们的例子中是 jQuery body）：

//handle the page load event
turnstileStates.defaultState();
//handle the coin event
$("#coin").on("click",{ coinval : function(){return $("#cointxt").val();} },function(event) {
  return turnstileEvents.coinEvent.handleCoin(event).nextState();
});
//handle the push event
$("#push").click(function() {
  return turnstileEvents.pushEvent.handlePush().nextState();
});

你可以查看本例的在线演示（https://mapteb.github.io/js-state-machine/jqueryStateMachineDemo.html），其中可以测试四个状态转换。该演示的完整源代码可在 GitHub 上找到。