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 相关文章推荐
js获取当前日期代码适用于网页头部
Jun 27 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
JS前端笔试题分析
Dec 19 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 Javascript
解决Vue开发中对话框被遮罩层挡住的问题
Nov 26 Javascript
vue实现双向绑定和依赖收集遇到的坑
Nov 29 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
js校验开始时间和结束时间
May 26 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
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 魔术方法使用说明
2009/10/20 PHP
PHP 读取文件内容代码(txt,js等)
2009/12/06 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
python端口扫描系统实现方法
2014/11/19 Python
进一步探究Python的装饰器的运用
2015/05/05 Python
Python中返回字典键的值的values()方法使用
2015/05/22 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
Python最小二乘法矩阵
2019/01/02 Python
python反编译学习之字节码详解
2019/05/19 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
python实发邮件实例详解
2019/11/11 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
python基于openpyxl生成excel文件
2020/12/23 Python
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
生物技术专业毕业生求职信范文
2013/12/14 职场文书
颁奖晚会主持词
2014/03/25 职场文书
初中优秀学生评语
2014/12/29 职场文书
利用python做表格数据处理
2021/04/13 Python
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
canvas实现贪食蛇的实践
2022/02/15 Javascript