javascript设计模式 ? 状态模式原理与用法实例分析


Posted in Javascript onApril 22, 2020

本文实例讲述了javascript设计模式 ? 状态模式原理与用法。分享给大家供大家参考,具体如下:

介绍:状态模式用于解决系统中复杂对象的状态转换以及不同状态下行为的封装问题。状态模式将一个对象的状态从该对象中分离出来,使得对象状态可以灵活变化。

定义:允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类,其别名为状态对象,状态模式是一种对象行为型模式。

场景:在很多情况下我们的页面需要做一些状态判断,是否注册,是否登录,剩余金额是否大于500等等,我们通常是在组件中通过if…else…来做不同的处理,这种方式耦合严重不满足单一职责原则。如何解决这个问题呢,这一节我们利用状态模式来解决对象的状态切换。

示例:

var Dialog = function(){
  var _state = null;
 
  this.setState = function(state){
    _state = state;
  }
  this.getState = function(){
    return _state;
  }
}
 
var ShowState = function(){
  this.doAction = function(dialog){
    console.log("对Dialog设置显示状态:");
    dialog.setState(this);
  }
  this.toString = function(){
    console.log("显示中......");
  }
}
 
var HideState = function(){
  this.doAction = function(dialog){
    console.log("对Dialog设置隐藏状态:");
    dialog.setState(this);
  }
  this.toString = function(){
    console.log("已隐藏......");
  }
}
 
var dialog = new Dialog();
 
var showState = new ShowState();
var hideState = new HideState();
 
showState.doAction(dialog);
//对Dialog设置显示状态:
dialog.getState().toString();
//显示中......
hideState.doAction(dialog);
//对Dialog设置隐藏状态
dialog.getState().toString();
//已隐藏......

这个例子里Dialog对象有两种状态,显示和隐藏,我把两种状态提取出来,使得状态的管理更加灵活。在这个例子里面Dialog称之为环境类,环境类又称为上下文类,他拥有多种状态。环境类内部需要维护一个state对象用来定义当前状态。HideState,ShowState称之为状态类,对应环境类的一个具体状态,toString称之为状态类的行为,每一个状态类的行为都有所不同。

状态模式总结:

优点:
* 封装了状态的转换规则,在状态模式中可以将状态的转换代码封装在环境类或者具体状态类中,方便对状态转换代码进行管理。
* 将所有与某个状态有关的行为放到一个类中,只需要注入一个不同的状态对象即可使环境对象拥有不同行为

缺点:
* 状态模式的使用必然会增加系统中状态类的数量,导致开销变大。
* 结构设计交付为咋,使用不当会导致程序结构和代码混乱,增加系统设计难度。

适用场景:
* 对象的行为依赖于它的状态,状态改变将导致行为的变化
* 在代码中包含大量与对象状态有关的条件语句

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
JavaScript Event学习补遗 addEventSimple
Feb 11 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
Javascript 面向对象(二)封装代码
May 23 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
关于element的表单组件整理笔记
Feb 05 Javascript
Vue computed 计算属性代码实例
Apr 22 #Javascript
js 解析 JSON 数据简单示例
Apr 21 #Javascript
react 原生实现头像滚动播放的示例
Apr 21 #Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 #Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 #Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 #Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 #Javascript
You might like
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
php截取字符串函数分享
2015/02/02 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
基于jquery的页面划词搜索JS
2010/09/14 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
python编写Logistic逻辑回归
2020/12/30 Python
Python中如何导入类示例详解
2019/04/17 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
从python读取sql的实例方法
2020/07/21 Python
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
英国女装网上商店:I Saw It First
2018/10/18 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
公司业务主管岗位职责
2013/12/07 职场文书
《理想》教学反思
2014/02/17 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
购房委托书范本
2014/09/18 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
小学教师个人总结
2015/02/05 职场文书
运动会宣传语
2015/07/13 职场文书
话题作文之自信作文
2019/11/15 职场文书
总结Python常用的魔法方法
2021/05/25 Python