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组件时很是有用，能让咱们的代码结构更加清晰，可以很方便的增长组件的各类状态。使用状态模式的关键是要理清组件的各类状态，搞清楚组件的不一样状态和相应的处理函数，对组件后期的维护和扩展有极大的好处。