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 相关文章推荐
用javascript编写的第一人称射击游戏
Feb 25 Javascript
基于JQuery的cookie插件
Apr 07 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
react router 4.0以上的路由应用详解
Sep 21 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 Javascript
js 实现碰撞检测的示例
Oct 28 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 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实现的浏览器检查类
2016/04/11 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
Python数据类型详解(四)字典:dict
2016/05/12 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
python3调用windows dos命令的例子
2019/08/14 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
2013年大学生的自我鉴定
2013/10/24 职场文书
个人简历中的自我评价范例
2013/10/29 职场文书
幼儿园美术教学反思
2014/01/31 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
我爱我家教学反思
2014/05/01 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
Pytorch 实现变量类型转换
2021/05/17 Python