学习JavaScript设计模式之状态模式
状态模式的关键是区分事物内部的状态，事物内部状态的改变往往会带来事物的行为改变。
当电灯开着，此时按下开关，电灯会切换到关闭状态；再按一次开关，电灯又将被打开。同一个开关在不同的状态下，表现出来的行为是不一样的。
一、有限状态机
- 状态总数（state）是有限的。
- 任一时刻，只处在一种状态之中。
- 某种条件下，会从一种状态转变（transition）到另一种状态。
允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类。
解释：
（1）将状态封装成独立的类，并将请求委托给当前的状态对象，当对象的内部状态发生改变时，会带来不同的行为变化。
（2）使用的对象，在不同的状态下具有截然不同的行为（委托效果）
谈到封装，一般优先考虑封装对象的行为，而不是对象的状态。
但在状态模式中刚好相反，状态模式的关键是把事物的每种状态都封装成单独的类。
二、示例
点灯程序（弱光–>强光–>关灯）循环
//关灯
varOffLightState=function(light){
this.light=light;
};
//弱光
varOffLightState=function(light){
this.light=light;
};
//强光
varStrongLightState=function(light){
this.light=light;
};
varLight=function(){
/*开关状态*/
this.offLight=newOffLightState(this);
this.weakLight=newWeakLightState(this);
this.strongLight=newStrongLightState(this);
/*快关按钮*/
this.button=null;
};
Light.prototype.init=function(){
varbutton=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(){
thrownewError("父类的buttonWasPressed方法必须被重写");
};
Light.prototype.setState=function(newState){
this.currentState=newState;
};
/*关灯*/
OffLightState.prototype=newLight();//继承抽象类
OffLightState.prototype.buttonWasPressed=function(){
console.log("关灯！");
this.light.setState(this.light.weakLight);
}
/*弱光*/
WeakLightState.prototype=newLight();
WeakLightState.prototype.buttonWasPressed=function(){
console.log("弱光！");
this.light.setState(this.light.strongLight);
};
/*强光*/
StrongLightState.prototype=newLight();
StrongLightState.prototype.buttonWasPressed=function(){
console.log("强光！");
this.light.setState(this.light.offLight);
};
PS：说明补充
必须把OffLightState、WeakLightState、StrongLightState构造函数提前。
newA("a");
varA=function(a){
console.log(a)
}
newB("b");
functionB(b){
console.log(b);
}
函数声明会被提升到普通变量之前。
三、性能优化点
（1）如何管理状态对象的创建和销毁？
第一种仅当state对象被需要时才创建并随后销毁（state对象比较庞大，优先选择），
另一种是一开始就创建好所有的状态对象，并且始终不销毁它们（状态改变频繁）。
（2）利用享元模式共享一个state对象。
四、JavaScript版本的状态机
（1）通过Function.prototype.call方法直接把请求委托给某个字面量对象来执行
//状态机
varFSM={
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;
}
},
};
varLight=function(){
this.currState=FSM.off;//设置当前状态
this.button=null;
};
Light.prototype.init=function(){
varbutton=document.createElement("button");
self=this;
button.innerHTML="已关灯";
this.button=document.body.appendChild(button);
this.button.onclick=function(){
//请求委托给FSM状态机
self.currState.buttonWasPressed.call(self);
}
}
varlight=newLight();
light.init();
（2）利用delegate函数
vardelegate=function(client,delegation){
return{
buttonWasPressed:function(){
returndelegation.buttonWasPressed.apply(client,arguments);
}
};
};
//状态机
varFSM={
off:{
buttonWasPressed:function(){
console.log("关灯");
this.button.innerHTML="下一次按我是开灯";
this.currState=this.onState;
}
},
on:{
buttonWasPressed:function(){
console.log("开灯");
this.button.innerHTML="下一次按我是关灯";
this.currState=this.offState;
}
},
};
varLight=function(){
this.offState=delegate(this,FSM.off);
this.onState=delegate(this,FSM.on);
this.currState=this.offState;//设置当前状态
this.button=null;
};
Light.prototype.init=function(){
varbutton=document.createElement("button");
self=this;
button.innerHTML="已关灯";
this.button=document.body.appendChild(button);
this.button.onclick=function(){
//请求委托给FSM状态机
self.currState.buttonWasPressed();
}
}
varlight=newLight();
light.init();
希望本文所述对大家学习javascript程序设计有所帮助。