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 日期对象Date扩展方法
May 30 Javascript
javascript 写类方式之四
Jul 05 Javascript
js正确获取元素样式详解
Aug 07 Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
JavaScript制作简易的微信打飞机
Mar 31 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
解决layer图标icon不加载的问题
Sep 04 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
解读Vue组件注册方式
May 15 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
生成缩略图
2006/10/09 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
PHP实现路由映射到指定控制器
2016/08/13 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
jQuery中读取json文件示例代码
2013/05/10 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
js实现图片局部放大效果详解
2019/03/18 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
在vue中把含有html标签转为html渲染页面的实例
2019/10/28 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
Python字符串格式化的方法(两种)
2017/09/19 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
Python交互式图形编程的实现
2019/07/25 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
管理提升方案
2014/06/04 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
给医院的感谢信
2015/01/21 职场文书
销售业务员岗位职责
2015/02/13 职场文书
慰问信格式规范
2015/03/23 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
2016年秋季开学典礼新闻稿
2015/11/25 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
MySQL之select、distinct、limit的使用
2021/11/11 MySQL