用 JavaScript 实现一个简单的状态机

作者：Nalla Senthilnathan

翻译：疯狂的技术宅

原文：https://dzone.com/articles/a-...

未经允许严禁转载

使用简单的状态机创建干净且健壮的 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 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-s...），其中可以测试四个状态转换。该演示的完整源代码可在 GitHub 上找到。

结论

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

---

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

• 深入理解Shadow DOM v1
• 一步步教你用 WebVR 实现虚拟现实游戏
• 13个帮你提高开发效率的现代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工作的？从调用栈到Promise你需要知道的一切
• WebSocket实战：在 Node 和 React 之间进行实时通信
• 关于 Git 的 20 个面试题
• 深入解析 Node.js 的 console.log
• Node.js 究竟是什么？
• 30分钟用Node.js构建一个API服务器
• Javascript的对象拷贝
• 程序员30岁前月薪达不到30K，该何去何从
• 14个最好的 JavaScript 数据可视化库
• 8 个给前端的顶级 VS Code 扩展插件
• Node.js 多线程完全指南
• 把HTML转成PDF的4个方案及实现

---

• 更多文章...