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

  • A+
所属分类:JavaScript

本回内容介绍

上一回聊了聊组合模式(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;
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的颜色,做变亮变暗的状态。听飞狐聊JavaScript设计模式系列13

装个逼,虽然最近热映的《寻龙诀》好看,还是要推荐一个阿汤哥的老电影《遗忘战境》~~

这一回聊的状态模式,有限状态机,状态模式可以允许客户端改变状态的转换行为,而状态机则是能够自动改变状态~。

下面的内容,聊一个下状态管理,这里拿一个极具审美(因为作者经常提审美^_^)的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的链式调用,没错,肯定会模拟框架,库什么的。

客官看完点个赞,推荐推荐呗,嘿嘿~~

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: