使用场景
解决多个【ifelse】嵌套,将其封装成若干个方法
区分事物内部的状态,事物内部的状态的改变往往会带来事物的行为的改变
简单的多个状态直接切换的时候
//两个状态之间的切换,使用if-else来切换,在有多个状态的时候,这样的切换就会嵌套很多的条件判断语句,如果加入新的状态,修改代码也比较困难
Light.prototype.buttonWasPressed = function(){
if ( this.state === 'off' ){
console.log( '开灯' );
this.state = 'on';
}else if ( this.state === 'on' ){
console.log( '关灯' );
this.state = 'off';
}
};
状态模式的关健就是: 把事物的每种状态都封装成单独的类,跟此状态相关的行为都被封装在这个类的内部。只要有交互行为,只需要在上下文中,把这个请求委托给当前的对象状态即可,该状态对象会负责渲染它自身的行为
封装状态
var OffLightState = function( light ){
this.light = light;
};
OffLightState.prototype.buttonWasPressed = function(){
console.log( '弱光' ); // offLightState 对应的行为
this.light.setState( this.light.weakLightState ); // 切换状态到weakLightState
};
// WeakLightState:
var WeakLightState = function( light ){
this.light = light;
};
WeakLightState.prototype.buttonWasPressed = function(){
console.log( '强光' ); // weakLightState 对应的行为
this.light.setState( this.light.strongLightState ); // 切换状态到strongLightState
};
// StrongLightState:
var StrongLightState = function( light ){
this.light = light;
};
StrongLightState.prototype.buttonWasPressed = function(){
console.log( '关灯' ); // strongLightState 对应的行为
this.light.setState( this.light.offLightState ); // 切换状态到offLightState
};
在Light类中为每个状态类都创建一个状态对象,这样一来就可以很明显的看到电灯一共有多少个状态
var Light = function(){
this.offLightState = new OffLightState( this );
this.weakLightState = new WeakLightState( this );
this.strongLightState = new StrongLightState( this );
this.button = null;
};
在button按钮被按下的时候,通过self.currState.buttonWasPressed()将请求委托为当前的状态去执行。
Light.prototype.init = function(){
var button = document.createElement( 'button' ),
self = this;
button.innerHTML = '已关灯';
this.button = document.body.appendChild( button );
this.button.onclick = function(){
//初始化下就是调用FSM.off的方法设置内部状态self.currState.buttonWasPressed.call( self ); // 把请求委托给FSM 状态机
}
};
var FSM = {
off: {
buttonWasPressed: function(){
console.log( '关灯' );
this.button.innerHTML = '下一次按我是开灯';
this.currState = FSM.on;
}
},
on: {
buttonWasPressed: function(){
console.log( '开灯' );
this.button.innerHTML = '下一次按我是关灯';
this.currState = FSM.off;
}
}
};
var light = new Light();
light.init();