实现一个简单的 JavaScript 状态机

做者：Nalla Senthilnathan

翻译：疯狂的技术宅

原文：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();
});
复制代码

你能够查看本例的在线演示（mapteb.github.io/js-state-ma… GitHub 上找到。

结论

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

欢迎关注前端公众号：前端先锋，领取前端工程化实用工具包。