《javascript设计模式与开发实践》阅读笔记（16）—— 状态模式

状态模式

会区分事物内部的状态，事物内部状态的改变往往会带来事物的行为改变。比如电灯的开关是开还是关，在外界的表现就完全不同。

电灯例子

按照常规思路，实现一个电灯就是构造一个电灯类，然后指定一下它的开关是什么，每次开关改变，触发电灯相应的方法。

    var Light = function(){
        this.state = 'off'; // 给电灯设置初始状态off
        this.button = null; // 尚未指定按钮
    };

    Light.prototype.init = function(){  //初始化，创造一个按钮给电灯对象
        var button = document.createElement( 'button' ),
        self = this;  //保存引用
        button.innerHTML = '开关';
        this.button = document.body.appendChild( button );
        this.button.onclick = function(){  //点一次开关调用一次对象的change方法
            self.change(); 
        }
    };

    Light.prototype.change = function(){
        if ( this.state === 'off' ){
            console.log( '开灯' );
            this.state = 'on';
        }else if ( this.state === 'on' ){
            console.log( '关灯' );
            this.state = 'off';
        }
    };

    var light = new Light();
    light.init();

这段代码是非常常规的实现，逻辑上也很容易理解，但有个小问题，所有的状态是写死在change方法里的，倘若我们想要添加一些状态就得深入进去修改，而且，想要知道对象一共有多少状态也得进去一个一个数，在代码量很多的情况下，change方法也会变得很臃肿。

引入模式方法前的思考

如果想要依次改变状态，而且可以知道一共有多少种状态，感觉通过数组完全可以实现，在light属性里定义一个状态数组，light的当前状态就是数组的第一个元素，每当点击时把状态改成数组的下一位。而且通过获取数组长度也很容易知道一共有多少状态，且能全部打印出来，修改起来也很方便。

    var Light = function(){
        this.stateArr=["off","on","small_light"];  //三个状态，关闭，点亮，暗一点
        this.state = this.stateArr[0]; // 给电灯设置初始状态off
        this.button = null; // 尚未指定按钮
    };
    
    Light.prototype.change=function(){

        var num=this.stateArr.indexOf(this.state);
        num=(num==this.stateArr.length-1)?0:num+1;
        this.state=this.stateArr[num];
        console.log( this.state );        
    }

改动之后每次点击依次触发 "on" "small_light" "off"。

不过现在还有一个问题，我们只是做到了可以依次改变状态和随便新增状态，但是change函数本质上也仅仅可以遍历状态而已，需要每种状态执行不同的函数时，现在的代码还是无能为力。我们希望的是，change函数遍历到对的状态，有一句通用的代码可以执行正确的函数。

所以，仅仅是把状态变成数组是不够的，我们需要的是一个对象，里面不但存储了状态，还应该存储了相应方法。我们统一这些方法的名称，在change函数里就可以统一调用。

状态模式实现

    /****新建off类***/
    var off=function(){
        this.statename="off";
    }
    off.prototype.do=function(){
        console.log("关灯啦");
    }

    /****新建on类****/
    var on=function(){
        this.statename="on";
    }
    on.prototype.do=function(){
        console.log("开灯啦");
    }

    /****新建small_light类****/
    var small_light=function(){
        this.statename="small_light";
    }
    small_light.prototype.do=function(){
        console.log("光线变暗啦");
    }

    var Light = function(){
        this.stateArr=[];  //存储状态对象
        this.stateArr.push(new off());    //添加状态对象，如果要增删或者调整顺序，通过操作数组或者这里手动修改都可以做到
        this.stateArr.push(new on());
        this.stateArr.push(new small_light());

        this.stateobj=this.stateArr[0];    //指定初始状态对象
        this.state = this.stateobj.statename; // 给电灯设置初始状态
        this.button = null;   // 尚未指定按钮
    };

    Light.prototype.init = function(){  //初始化，创造一个按钮给电灯对象
        var button = document.createElement( 'button' ),
        self = this;
        button.innerHTML = '开关';
        this.button = document.body.appendChild( button );
        this.button.onclick = function(){  //点一次开关调用一次对象的change方法
            self.change(); 
        }
    };

    Light.prototype.change = function(){
        var num=this.stateArr.indexOf(this.stateobj);  //返回当前状态对象在数组的索引
        num=(num==this.stateArr.length-1)?0:num+1;     //根据索引做些处理

        this.stateobj=this.stateArr[num];    //重新指定状态对象
        this.state=this.stateobj.statename;  //改变状态
        this.stateobj.do();     //执行新状态对象的代码
    };

    var light = new Light();
    light.init();

    /****点击按钮执行结果***/
    // 开灯啦
    // 光线变暗啦
    // 关灯啦
    // 开灯啦
    //....(不断重复)

上述代码可以自行去浏览器的控制台测试，这里还有一点小问题，就是接口的统一（do方法）完全要靠程序员的自觉和记忆力，有的时候，如果在代码较多的时候，因为没有接口统一引起bug，调试起来很麻烦，所以我们想到了模板方法中为了避免这种情况的做法。让所有状态类都产生于一个抽象类，抽象类的do方法中抛出一个错误，如果状态类没有重写该方法，在程序执行后也能很快发现错误的原因。

状态模式的优缺点

优点：
　　状态模式定义了状态与行为之间的关系，并将它们封装在一个类里。通过增加新的状态类，很容易增加新的状态和转换。

　　避免Context（上下文）无限膨胀，状态切换的逻辑被分布在状态类中，也去掉了Context中原本过多的条件分支。
缺点：
　　是会在系统中定义许多状态类，编写多个状态类是一项枯燥乏味的工作，而且系统中会因此而增加不少对象。另外，由于逻辑分散在状态类中，虽然避开了不受欢迎的条件分支语句，但也造成了逻辑分散的问题，我们无法在一个地方就看出整个状态机的逻辑。

 

总结

这里因为例子如此，所以用了数组来管理，而实际的开发中，会出现各种各样切换状态的方式，不一定是顺序的；而且可能存在两个或者更多按钮，他们的点击都会导致状态变化，这种时候，就需要根据具体的情况，完成状态的切换和执行相应代码。