听飞狐聊JavaScript设计模式系列13

摘要：介一回聊状态模式，官方描述允许一个对象在其内部状态改变时改变它的行为。有限状态机有限状态机是一个非常有用的模型，可以模拟世界上大部分事物。这个是官方说法，简单说，她有三个特征，状态总数是有限的。，任一时刻，只处在一种状态之中。

上一回聊了聊组合模式（Composite），用组合模式模拟了个图片库，聊了递归。
介一回聊状态模式（State），官方描述允许一个对象在其内部状态改变时改变它的行为。略抽象，不过看了代码会觉得比较简单，直接看代码先。

状态模式中引入了抽象状态类和具体状态类，这里会用到之前讲过的接口模式，不清楚的盆友可以看系列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版本，是因为这个例子比较简单，直观。在实际使用时，在一个状态类中可能包含多个业务方法，如果在具体状态类中某些业务方法的实现完全相同，可以将这些方法移至抽象状态类，实现代码的复用。

状态模式在工作流或游戏等各种系统中应用比较广泛，下面的例子是一个简单的订单审批流程，根据一段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();
}; 

这个例子跟上一个例子都是状态模式的一个很好体现，这个例子更贴近实际开发，
申请方提交订单，平台订单审核，审核通过更改状态为审核通过，然后继续商家中心审核，通过与不通过都流程结束，直接调用提示类提示结果。

有限状态机（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的官方例子来说。

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的链式调用，没错，肯定会模拟框架，库什么的。

客观看完点个赞，推荐推荐呗，嘿嘿~~

注：此系飞狐原创，转载请注明出处