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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
分享一款基于jQuery的视频播放插件
Oct 09 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
php中session定期自动清理的方法
2015/11/12 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
PHP中“=>
2019/03/01 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
裁剪字符串trim()自定义改进版
2013/04/10 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
2015/03/03 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
python3序列化与反序列化用法实例
2015/05/26 Python
Python MD5加密实例详解
2017/08/02 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
python numpy实现rolling滚动案例
2020/06/08 Python
django中cookiecutter的使用教程
2020/12/03 Python
Django中template for如何使用方法
2021/01/31 Python
python实现计算图形面积
2021/02/22 Python
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
strlen的几种不同实现方法
2013/05/31 面试题
洗手间标语
2014/06/23 职场文书
法制主题班会教案
2015/08/13 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS