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


Posted in Javascript onJanuary 08, 2016

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

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

一、有限状态机

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

允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类。
解释:
(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程序设计有所帮助。

Javascript 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&Drop
Mar 10 Javascript
js类中获取外部函数名的方法与代码
Sep 12 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
js charAt的使用示例
Feb 18 Javascript
JavaScript中的逻辑判断符&&、||与!介绍
Dec 31 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 #Javascript
js实现对ajax请求面向对象的封装
Jan 08 #Javascript
javascript弹性运动效果简单实现方法
Jan 08 #Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 #Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 #Javascript
jquery实现简单的遮罩层
Jan 08 #Javascript
javascript多物体运动实现方法分析
Jan 08 #Javascript
You might like
PHP 5.0 Pear安装方法
2006/12/06 PHP
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
js打造数组转json函数
2015/01/14 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
JQuery中DOM实现事件移除的方法
2015/06/13 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
基于Python实现扑克牌面试题
2019/12/11 Python
如何使用python代码操作git代码
2020/02/29 Python
python程序如何进行保存
2020/07/03 Python
Python同时迭代多个序列的方法
2020/07/28 Python
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
会计学应届毕业生推荐信
2013/11/04 职场文书
开水果连锁店创业计划书
2013/12/29 职场文书
党员公开承诺事项
2014/03/25 职场文书
怎样写离婚协议书
2014/09/10 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
十佳少年事迹材料
2014/12/25 职场文书
七年级思品教学反思
2016/02/20 职场文书