JavaScript设计模式--状态模式

状态模式的关键是区分事物内部的状态，事物内部状态的改变往往会带来事物的行为改变。

当电灯开着，此时按下开关，电灯会切换到关闭状态；再按一次开关，电灯又将被打开。同一个开关在不同的状态下，表现出来的行为是不一样的。

一、有限状态机

• 状态总数（state）是有限的。
• 任一时刻，只处在一种状态之中。
• 某种条件下，会从一种状态转变（transition）到另一种状态。

允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。
解释：
（1）将状态封装成独立的类，并将请求委托给当前的状态对象，当对象的内部状态发生改变时，会带来不同的行为变化。
（2）使用的对象，在不同的状态下具有截然不同的行为（委托效果）

谈到封装，一般优先考虑封装对象的行为，而不是对象的状态。
但在状态模式中刚好相反，状态模式的关键是把事物的每种状态都封装成单独的类。

二、示例

点灯程序 （弱光 –> 强光 –> 关灯）循环

// 关灯
var OffLightState = function(light) {
    this.light = light;
};
// 弱光
var WeakLightState = function(light) {
    this.light = light;
};
// 强光
var StrongLightState = function(light) {
    this.light = light;
};

var Light = function(){
    /* 开关状态 */
    this.offLight = new OffLightState(this);
    this.weakLight = new WeakLightState(this);
    this.strongLight = new StrongLightState(this);
    /* 快关按钮 */
    this.button = null;
};
Light.prototype.init = function() {
    var button = document.createElement("button"),
        self = this;
    this.button = document.body.appendChild(button);
    this.button.innerHTML = '开关';
    this.currentState = this.offLight;
    this.button.click = function() {
        self.currentState.buttonWasPressed();
    }
};
// 让抽象父类的抽象方法直接抛出一个异常（避免状态子类未实现buttonWasPressed方法）
Light.prototype.buttonWasPressed = function() {
    throw new Error("父类的buttonWasPressed方法必须被重写");
};
Light.prototype.setState = function(newState) {
    this.currentState = newState;
};

/* 关灯 */
OffLightState.prototype = new Light();  // 继承抽象类
OffLightState.prototype.buttonWasPressed = function() {
    console.log("关灯！");
    this.light.setState(this.light.weakLight);
}
/* 弱光 */
WeakLightState.prototype = new Light();
WeakLightState.prototype.buttonWasPressed = function() {
    console.log("弱光！");
    this.light.setState(this.light.strongLight);
};
/* 强光 */
StrongLightState.prototype = new Light();
StrongLightState.prototype.buttonWasPressed = function() {
    console.log("强光！");
    this.light.setState(this.light.offLight);
};

PS：说明补充
必须把OffLightState、WeakLightState、StrongLightState构造函数提前。

new A("a");
var A = function(a) {
    console.log(a)
}

new B("b");
function B(b) {
    console.log(b);
}

函数声明会被提升到普通变量之前。
请参考：《JavaScript提升（你不知道的JavaScript）》【示例5】

三、性能优化点

（1）如何管理状态对象的创建和销毁？
第一种仅当state对象被需要时才创建并随后销毁（state对象比较庞大，优先选择），
另一种是一开始就创建好所有的状态对象，并且始终不销毁它们（状态改变频繁）。
（2）利用享元模式共享一个state对象。

四、JavaScript版本的状态机

（1）通过Function.prototype.call方法直接把请求委托给某个字面量对象来执行

// 状态机
var FSM = {
    off: {
        buttonWasPressed: function() {
            console.log("关灯");
            this.button.innerHTML = "下一次按我是开灯";     // 这是Light上的属性！！！
            this.currState = FSM.on;                        // 这是Light上的属性！！！
        }
    },
    on: {
        buttonWasPressed: function() {
            console.log("开灯");
            this.button.innerHTML = "下一次按我是关灯";
            this.currState = FSM.off;
        }
    },
};

var Light = function() {
    this.currState = FSM.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() {
        // 请求委托给FSM状态机
        self.currState.buttonWasPressed.call(self);
    }

}

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

（2）利用delegate函数

var delegate = function(client, delegation) {
    return {
        buttonWasPressed: function() {
            return delegation.buttonWasPressed.apply(client, arguments);
        }
    };
};

// 状态机
var FSM = {
    off: {
        buttonWasPressed: function() {
            console.log("关灯");
            this.button.innerHTML = "下一次按我是开灯";
            this.currState = this.onState;
        }
    },
    on: {
        buttonWasPressed: function() {
            console.log("开灯");
            this.button.innerHTML = "下一次按我是关灯";
            this.currState = this.offState;
        }
    },
};

var Light = function() {
    this.offState = delegate(this, FSM.off);
    this.onState = delegate(this, FSM.on);
    this.currState = this.offState; // 设置当前状态
    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() {
        // 请求委托给FSM状态机
        self.currState.buttonWasPressed();
    }
}

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

转载请标明出处：http://blog.csdn.net/ligang2585116