本回内容介绍
上一回聊了聊组合模式（Composite），用组合模式模拟了个图片库，聊了递归。
介一回聊状态模式（State），官方描述允许一个对象在其内部状态改变时改变它的行为。略抽象，不过看了代码会觉得比较简单，直接看代码先。
1. 状态模式
状态模式中引入了抽象状态类和具体状态类，这里会用到之前讲过的接口模式，不清楚的盆友可以看系列05，这个例子是我根据一段PHP的状态模式代码改的JS版本，如下：
var c = console,d = document;
window.onload = function(){
// 定义了一个state接口,俩方法handle，display
var State = new Interface("State",["handle","display"]);
// 这里的Context是环境类，或者称为上下文类，是拥有多种状态的对象。
var Context = function(state){
// 状态变化的属性
var _state = null;
var _self = this;
// 这里是设置状态对象
this.setState = function(state){
_self._state = state;
}
// 调用状态对象的方法
this.request = function(){
_self._state.display();
_self._state.handle(_self);
}
this.setState(state);
}
// 具体状态类，抽象状态类的子类
var StateA = function(){
// 检测接口，不明白的童鞋看系列05
Interface.ensureImplements(this,State);
}
// 状态类的实现
StateA.prototype = {
constructor:StateA,
// 这里的context指向的是Context
handle:function(context){
// 设置为其他状态
context.setState(new StateB());
},
// 具体实现的方法
display:function(){
c.log('StateA');
}
}
// StateB跟StateA一样，只是状态设置不同
var StateB = function(){
Interface.ensureImplements(this,State);
}
StateB.prototype = {
constructor:StateB,
handle:function(context){
context.setState(new StateC());
},
display:function(){
c.log('StateB');
}
}
// StateC跟StateB一样，只是状态设置不同
var StateC = function(){
Interface.ensureImplements(this,State);
}
StateC.prototype = {
constructor:StateC,
handle:function(context){
context.setState(new StateA());
},
display:function(){
c.log('StateC');
}
}
// 测试代码
var o = new Context(new StateB());
o.request(); // StateB
o.request(); // StateC
o.request(); // StateA
o.request(); // StateB
o.request(); // StateC
o.request(); // StateA
} 之所以把这个例子改成JS版本，是因为这个例子比较简单，直观。在实际使用时，在一个状态类中可能包含多个业务方法，如果在具体状态类中某些业务方法的实现完全相同，可以将这些方法移至抽象状态类，实现代码的复用。
2. 状态模式之工作流
状态模式在工作流或游戏等各种系统中应用比较广泛，下面的例子是一个简单的订单审批流程，根据一段Java的状态模式代码改的JS版本，如下:
var c = console,w = window;
w.onload = function(){
// 业务申请方
function Obj() {
// 申请方
this.obj = '';
// 日期
this.sDate = '';
// 金额
this.aMount = '';
// 结果
this.res = '';
}
// 跟上一个例子一样，Context状态管理类
var Context = function (s) {
this.state = null;
this.run = function (s) {
this.state = s;
};
this.run(s);
}
// 第一层级审核
var StateA = function (o) {
// 这一堆就是一个简单交互
var reply = w.prompt('同意请按1，不同意请按任意键');
var res = reply == 1 ? '同意' : '不同意';
var state;
o.res = res;
// 一堆打印信息
c.log(
'平台审核中...' +
'申请方：' + o.obj + ' ' +
'日期：' + o.sDate + ' ' +
'金额：' + o.aMount + ' ' +
'平台审核结果：' + o.res
);
// 判断是否同意，如果不同意直接走Notice提示不同意
if (reply == 1) {
// 这里就是走第二层级
state = new StateB(o);
} else {
state = new Notice(o);
}
return state;
}
// 第二层级审核，跟第一层级差不多
var StateB = function (o) {
var reply = w.prompt('同意请按1，不同意请按任意键');
var res = reply == 1 ? '同意' : '不同意';
var state;
o.res = res;
c.log(
'商家审核中...' +
'申请方：' + o.obj + ' ' +
'日期：' + o.sDate + ' ' +
'金额：' + o.aMount + ' ' +
'商家审核结果：' + o.res
);
// 因为是最终审核，所以直接走Notice提示
state = new Notice(o);
return state;
}
// Notice通知类，打印信息
var Notice = function (o) {
c.log('申请方：' + o.obj + '的流程结束，审核结果为：' + o.res);
}
// 测试
var o = new Obj();
o.obj = '大卫';
o.sDate = '圣诞节';
o.aMount = 250;
var req = new Context(new StateA(o));
req.run();
}; 这个例子跟上一个例子都是状态模式的一个很好体现，这个例子更贴近实际开发，
申请方提交订单，平台订单审核，审核通过更改状态为审核通过，然后继续商家中心审核，通过与不通过都流程结束，直接调用提示类提示结果。
3. 有限状态机
有限状态机（Finite-state machine）是一个非常有用的模型，可以模拟世界上大部分事物。这个是官方说法，简单说，她有三个特征：
1，状态总数（state）是有限的。
2，任一时刻，只处在一种状态之中。
3，某种条件下，会从一种状态转变（transition）到另一种状态。
直接代码吧，很直观的，根据网上的交通灯例子改的，如下：:
var c = console,d = document;
window.onload = function(){
var Light = function() {
// 设置默认状态，关灯
this.currentState = State.off;
this.lightSwitch = null;
};
Light.prototype.run = function() {
var _self = this;
// 这里是开关
var lightSwitch = d.createElement('button');
// 这个canvas就当是一盏灯了
var cvs = d.createElement('canvas');
cvs.width = '200';
cvs.height = '200';
cvs.style.backgroundColor = 'lightblue';
cvs.style.borderRadius = '50%';
cvs.style.display = 'block';
// 初始值是开灯
lightSwitch.innerHTML = '开灯';
// Dom方法appendChild没什么好说的
this.lightSwitch = d.body.appendChild(lightSwitch);
this.cvs = d.body.appendChild(cvs);
// 开关的点击事件
this.lightSwitch.onclick = function() {
// 委托请求给State状态机，这里分两步走，第一步是_self.currentState，第二步是btnPress，call用来指向将作用域指向本身
_self.currentState.btnPress.call(_self);
};
};
// 这里就是多种状态间的切换，这里只写了两种，开关灯
var State = {
off: {
btnPress: function() {
this.lightSwitch.innerHTML = '关灯';
this.cvs.style.display = 'none';
this.currentState = State.on;
}
},
on: {
btnPress: function() {
this.lightSwitch.innerHTML = '开灯';
this.cvs.style.display = 'block';
this.currentState = State.off;
}
}
};
// 测试代码
var light = new Light();
light.run();
};这里就是多种状态间的切换，这里只写了两种，开关灯，好玩儿一点可以换canvas的颜色，做变亮变暗的状态。
装个逼，虽然最近热映的《寻龙诀》好看，还是要推荐一个阿汤哥的老电影《遗忘战境》~~
这一回聊的状态模式，有限状态机，状态模式可以允许客户端改变状态的转换行为，而状态机则是能够自动改变状态~。
下面的内容，聊一下状态管理，这里拿一个极具审美（因为作者经常提审美^_^）的JS库Vue.js的官方例子来说。
JS状态管理
Vue官方解释是集中管理状态更易于理解状态将怎样变化。组件仍然可以拥有和管理它的私有状态。看过上面的例子，看这个应该很好理解，继续写：
// 这里的store里面放了所有的action
var store = {
state: {
message: 'Hello!'
},
// 这里的action则用来修改store的状态state
actionA: function () {
this.state.message = 'action A triggered'
},
// 这里跟上面的例子很像
actionB: function () {
this.state.message = 'action B triggered'
}
}
// 这个new Vue暂时不用管，简单的解释下吧，通过构造函数Vue创建一个Vue的根实例
var vmA = new Vue({
data: {
privateState: {},
sharedState: store.state
}
})
var vmB = new Vue({
data: {
privateState: {},
sharedState: store.state
}
})这是vue.js官网上的一个例子，最近很火的框架react，vue.js在说flux单向数据流，其实就是在维护状态。
话外音
这里啰嗦一下，有盆友建议说聊一下AngularJS，在系列04里有聊过一点点ng1.x的源码，也模拟了一下，并且说过可以的话，分享读过的Angularjs源码段子。介于前端框架风起云涌，其实，对Angular有兴趣的盆友，可以直接从Angular2开始，如果是学习源码的话，Vue.js的源码读起来会更有美感（因为作者反复提审美^_^）~~
这一回，主要聊了状态模式，有限状态机，介绍了下Vue.js这个库。
下一回，聊一聊JS的链式调用，没错，肯定会模拟框架，库什么的。
客观看完点个赞，推荐推荐呗，嘿嘿~~
注：此系飞狐原创，转载请注明出处
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。