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

疯狂的技术宅

发布于 2019-09-17 17:40:23

1.9K0

发布于 2019-09-17 17:40:23

文章被收录于专栏：京程一灯京程一灯

每日前端夜话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：编写状态转换表如：

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-state-machine/jqueryStateMachineDemo.html），其中可以测试四个状态转换。该演示的完整源代码可在 GitHub 上找到。

结论

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