这篇文章主要为大家介绍了 JavaScript 设计模式中的状态模式,对 JavaScript 设计模式感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
状态模式的关键是区分事物内部的状态,事物内部状态的改变往往会带来事物的行为改变。
当电灯开着,此时按下开关,电灯会切换到关闭状态;再按一次开关,电灯又将被打开。同一个开关在不同的状态下,表现出来的行为是不一样的。
一、有限状态机
允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类。
解释:
(1)将状态封装成独立的类,并将请求委托给当前的状态对象,当对象的内部状态发生改变时,会带来不同的行为变化。
(2)使用的对象,在不同的状态下具有截然不同的行为(委托效果)
谈到封装,一般优先考虑封装对象的行为,而不是对象的状态。
但在状态模式中刚好相反,状态模式的关键是把事物的每种状态都封装成单独的类。
二、示例
点灯程序 (弱光 –> 强光 –> 关灯)循环
- // 关灯
- var OffLightState = function(light) {
- this.light = light;
- };
- // 弱光
- var OffLightState = 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);
- }
函数声明会被提升到普通变量之前。
三、性能优化点
(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();
希望本文所述对大家学习 javascript 程序设计有所帮助。
来源: