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

时间 2019-11-16

原文原文链接

做者：Nalla Senthilnathan
翻译：疯狂的技术宅javascript

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

未经容许严禁转载前端

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

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

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

经典十字旋转门问题

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

步骤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 结构中的函数能够存在一个模型参数。github

步骤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 上找到。segmentfault

结论

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

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

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

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

更多文章...