本回内容介绍
上一回聊了聊组合模式（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里面放了所有的actionvar 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的链式调用，没错，肯定会模拟框架，库什么的。
客观看完点个赞，推荐推荐呗，嘿嘿~~
注：此系飞狐原创，转载请注明出处