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

 更新时间:2020年04月22日 08:41:32   作者:李小强  
这篇文章主要介绍了javascript设计模式 – 状态模式,结合实例形式分析了javascript状态模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

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

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

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

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

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

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

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:http://www.isjs.cn/?p=1003

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • 浅谈微信页面入口文件被缓存解决方案

    浅谈微信页面入口文件被缓存解决方案

    缓存对于前端页面来说,是加速页面加载的利器之一,但也同时带来了很多问题,这篇文章主要介绍了浅谈微信页面入口文件被缓存解决方案,感兴趣的小伙伴们可以参考一下
    2018-09-09
  • 老生常谈js中0到底是 true 还是 false

    老生常谈js中0到底是 true 还是 false

    下面小编就为大家带来一篇老生常谈js中0到底是 true 还是 false。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • JavaScript实现将xml转换成html table表格的方法

    JavaScript实现将xml转换成html table表格的方法

    这篇文章主要介绍了JavaScript实现将xml转换成html table表格的方法,实例分析了javascript操作XML文件与table表格的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • JavaScript 替换所有匹配内容及正则替换方法

    JavaScript 替换所有匹配内容及正则替换方法

    这篇文章主要介绍了JavaScript 替换所有匹配内容,文中给大家提到了使用正则表达式替换方法,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2020-02-02
  • JavaScript使用localStorage存储数据

    JavaScript使用localStorage存储数据

    这篇文章主要为大家详细介绍了JavaScript使用localStorage存储数据,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • 用vbs实现的连连看在线游戏

    用vbs实现的连连看在线游戏

    大家可以参考下代码,发现这个真个不错的思路
    2008-07-07
  • js常用方法示例梳理(总结篇)

    js常用方法示例梳理(总结篇)

    这篇文章主要为大家介绍了js常用的方法示例梳理总结及功能详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • js让一行页脚保持在底部

    js让一行页脚保持在底部

    所谓保持在底部就是: 在内容不超过一屏的情况下, 当浏览器窗口变小那行页脚文字会跟着向上浮动但还是保持在底部。当内容多出一屏时,他显示在网页的最下边,而不是窗口的最下边;
    2008-04-04
  • javascript RadioButtonList获取选中值

    javascript RadioButtonList获取选中值

    js获取RadioButtonList值的代码。
    2009-04-04
  • html5+javascript实现简单上传的注意细节

    html5+javascript实现简单上传的注意细节

    这篇文章主要为大家详细介绍了html5+javascript实现上传操作的注意细节,form表单样式不美观等细节问题,感兴趣的小伙伴们可以参考一下
    2016-04-04

最新评论