学习JavaScript设计模式之状态模式

前端之家收集整理的这篇文章主要介绍了学习JavaScript设计模式之状态模式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

一、有限状态机

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

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

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

二、示例

点灯程序 (弱光 –> 强光 –> 关灯)循环

var Light = function(){
/ 开关状态 /
this.offLight = new OffLightState(this);
this.weakLight = new WeakLightState(this);
this.h3Light = new h3LightState(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.h3Light);
};
/ 强光 /
h3LightState.prototype = new Light();
h3LightState.prototype.buttonWasPressed = function() {
console.log("强光!");
this.light.setState(this.light.offLight);
};

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

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

函数声明会被提升到普通变量之前。

三、性能优化点

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

四、JavaScript版本的状态机

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

<div class="jb51code">
<pre class="brush:js;">
// 状态机
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函数

<div class="jb51code">
<pre class="brush:js;">
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();

希望本文所述对大家学习javascript程序设计有所帮助。

原文链接:https://www.f2er.com/js/50646.html

猜你在找的JavaScript相关文章