js--状态模式

一.前言

在我们程序的编写过程中，经常会有各种条件的判断，有的时候，我们会写很多个If-else 去进行业务逻辑的处理，不仅仅造成代码的易读性差，而且当需求变更的时候，增加查询条件的时候，可能添加一个地方需要把很多的if-else 进行更改，就有可能造成“全面瘫痪”。为了避免过多的if-else ,可以用状态模式进行替换。什么是状态模式呢？详情看下面：

二.概念

状态模式定义一个对象，这个对象可以通过管理其状态从而使得应用程序作出相应的变化。状态模式是一个非常常用的设计模式，他主要有两个角色组成：

（1）环境类：拥有一个状态成员，可以修改其状态并作出相应的反应。

（2）状态类：表示一种状态，包含其相应的处理方法。

三.例子

//我们首先定义一个环境类，在这里也就是菜单对象，拥有一个状态成员，可以修改其状态并作出相应反应
function Menu() { }

Menu.prototype.toggle = function (state) {
  state();
}

//我们首先定义状态类,表示一种状态，包含其相应的处理方法
var menuStates = {
  "show": function () {
      console.log("the menu is showing");
  },
  "hide": function () {
      console.log("the menu is hiding");
  }
};

//这段代码实例化了一个Menu对象，然后分别切换了显示和隐藏两种状态，如果有第三种状态，我们只需要
//menuStates添加相应的状态和处理程序即可
var menu = new Menu();
menu.toggle(menuStates.show);
menu.toggle(menuStates.hide);

四.总结

状态模式在开发Web组件时非常有用，能让我们的代码结构更加清晰，能够很方便的增加组件的各种状态。使用状态模式的关键是要理清组件的各种状态，搞清楚组件的不同状态和相应的处理函数，对组件后期的维护和扩展有极大的好处。