实现一个简单的 JavaScript 状态机[每日前端夜话0xBF]

• 2019 年 10 月 4 日
• 筆記

每日前端夜话0xBE

每日前端夜话，陪你聊前端。

每天晚上18:00准时推送。

正文共：850 字

预计阅读时间：7 分钟

作者：Nalla Senthilnathan

翻译：疯狂的技术宅

来源：dzone

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

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

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

经典十字旋转门问题

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

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

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

const turnstileStates = {    defaultState : function() {      $("#thankyou").hide();      $("#cointxt").val("");      $("#push").prop("disabled", true);      $("#cointxt").prop("disabled", false);      $("#turnstile_locked").show();      $("#turnstile_unlocked").hide();      $("#coinerrmsg").hide();    },    coinSuccessState : function() {      $("#turnstile_locked").hide();      $("#cointxt").prop("disabled", true);      $("#push").prop("disabled", false);      $("#coin").prop("disabled", true);      $("#turnstile_unlocked").show();      $("#coinerrmsg").hide();    },    coinErrorState : function() {      $("#thankyou").hide();      $("#cointxt").prop("disabled", false);      $("#push").prop("disabled", true);      $("#turnstile_locked").show();      $("#coinerrmsg").show();      $("#turnstile_unlocked").hide();    },    pushSuccessState : function() {      $("#thankyou").show();      $("#welcome").hide();      $("#cointxt").prop("disabled", true);      $("#turnstile_locked").hide();      $("#coin").prop("disabled", true);      $("#push").prop("disabled", true);      $("#turnstile_unlocked").hide();      $("#coinerrmsg").hide();    }  };  

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

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

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

const turnstileEvents = {    coinEvent : {      handleCoin : function(e) {        if (e.data.coinval() > 0) {          return turnstileEvents.coinSuccessEvent;        } else {          return turnstileEvents.coinErrorEvent;        }      }      //nextState not needed for this event    },    coinSuccessEvent : {      nextState : function() {        return turnstileStates.coinSuccessState();      }      //no handlers are needed for this event    },    coinErrorEvent : {      nextState : function() {        return turnstileStates.coinErrorState();      }      //no handlers are needed for this event    },    pushEvent : {      handlePush : function() {        return turnstileEvents.pushSuccessEvent;      }      //nextState not needed for this event    },    pushSuccessEvent : {      nextState : function() {        return turnstileStates.pushSuccessState();      }      //no handlers are needed for this event    }  };  

注意：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 上找到。

结论

值得注意的是，用于 Java 程序的方法同样适用于JavaScript 程序。这个方法的一个特别之处在于三个组件中的关注点的清晰分离 —— 状态、事件/事件处理handler和控制器。总之，把状态机用于前端应用能够有助于构建干净且健壮的 UI。 原文：https://dzone.com/articles/a-simple-javascript-state-machine

下面夹杂一些私货：也许你和高薪之间只差这一张图

2019年京程一灯课程体系上新，这是我们第一次将全部课程列表对外开放。

愿你有个好前程，愿你月薪30K。我们是认真的 ！

往期精选

• BootstrapVue 入门
• JavaScript的工作原理：引擎、运行时和调用堆栈
• 用 TypeScript 开发 Node.js 程序
• 快速上手最新的 Vue CLI 3
• JavaScript 程序员可以从C ++中学到些什么
• 在同一基准下对前端框架进行比较
• Edge 拥抱 Chromium 对前端工程师意味着什么？
• 使你的 JavaScript 代码简单易读
• Node.js多线程完全指南
• deno如何偿还Node.js的十大技术债
• 实战！半小时写一个脑力小游戏
• CSS Flexbox 可视化手册
• 世界顶级公司的前端面试都问些什么
• V8引擎内部机制及优化代码的5个技巧