當(dāng)一個(gè)對(duì)象或按鈕有多個(gè)方法座泳，多個(gè)狀態(tài)惠昔，狀態(tài)之間可以切換時(shí)幕与，如果使用if-else實(shí)現(xiàn)，代碼將充斥if-else镇防，使得代碼難以閱讀啦鸣，修改困難。此時(shí)使用狀態(tài)模式来氧，將對(duì)象的每一個(gè)狀態(tài)編寫為一個(gè)狀態(tài)對(duì)象诫给，且狀態(tài)對(duì)象都提供同名的方法，原對(duì)象將事件委托給對(duì)應(yīng)的狀態(tài)對(duì)象實(shí)現(xiàn)啦扬。
var delegate = function( client, delegation ){
return {
buttonWasPressed: function(){ // 將客戶的操作委托給delegation對(duì)象
return delegation.buttonWasPressed.apply( client, arguments );
}
}
};
var FSM = {
off: {
buttonWasPressed: function(){
console.log('關(guān)燈');
this.button.innerHTML = '下一次按我是開燈';
this.currState = this.onState;
}
},
on: {
buttonWasPressed: function(){
console.log('開燈');
this.button.innerHTML = '下一次按我是關(guān)燈';
this.currState = this.offState;
}
}
};
var Light = function(){
this.offState = delegate( this, FSM.off );
this.onState = delegate( this, FSM.on );
this.currState = this.offState; //設(shè)置初始狀態(tài)為關(guān)閉狀態(tài)
this.button = null;
}
Light.prototype.init = function(){
var button = document.createElement('button'),
self = this;
button.innerHTML = '已關(guān)燈';
this.button = document.body.appendChild( button );
this.button.onclick = function(){
self.currState.buttonWasPressed();
}
}
var light = new Light();
light.init();
