JS设计模式之状态模式概念与用法分析


Posted in Javascript onFebruary 05, 2018

本文实例讲述了JS设计模式之状态模式概念与用法。分享给大家供大家参考,具体如下:

1. 概述

当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类。

2. 解决的问题

主要解决的是当控制一个对象状态转换的条件表达式过于复杂时的情况。把状态的判断逻辑转移到表示不同的一系列类当中,可以把复杂的逻辑判断简单化。

function Context( _state ) {
 this.state = _state;
 this.request = function() {
  this.state.Handle( this );
 }
}
function ConcreteStateA() {
 this.Handle = function( context ) {
  console.log("A");
  context.state = new ConcreteStateB();
 }
}
function ConcreteStateB() {
 this.Handle = function( context ) {
  console.log("B");
  context.state = new ConcreteStateA();
 }
}
// 设置Context的初始状态为ConcreteStateA
var context = new Context(new ConcreteStateA());
// 不断地进行请求,同时更改状态
context.request();
context.request();

状态模式的使用场景也特别明确,有如下两点:

一个对象的行为取决于它的状态,并且它必须在运行时刻根据状态改变它的行为。

一个操作中含有大量的分支语句,而且这些分支语句依赖于该对象的状态。状态通常为一个或多个枚举常量的表示。

应用场景:

打电话有如下几种状态:获取电话号码、拨号中、通话中、通话结束。
这几种状态的顺序是以次进行的,那么我们就可以根据这几种状态来实现状态模式;

获取电话号码

JS设计模式之状态模式概念与用法分析

拨号中

JS设计模式之状态模式概念与用法分析

通话中

JS设计模式之状态模式概念与用法分析

通话结束

JS设计模式之状态模式概念与用法分析

不断地去调用这个方法context.request(); 来判断当前属于那种状态;

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

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

Javascript 相关文章推荐
可输入的下拉框
Jun 19 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
javaScript同意等待代码实现心得
Jan 01 Javascript
jquery tab插件精简版分享
Sep 10 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
Vue实现双向数据绑定
May 03 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 #Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 #Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 #Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 #Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 #Javascript
javascript实现最长公共子序列实例代码
Feb 05 #Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 #Javascript
You might like
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
React快速入门教程
2017/01/17 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
layui的select联动实现代码
2019/09/28 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
深入浅析python with语句简介
2018/04/11 Python
python查看模块,对象的函数方法
2018/10/16 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
python线程的几种创建方式详解
2019/08/29 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
python烟花效果的代码实例
2020/02/25 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
保证书格式范文
2014/04/28 职场文书
投标承诺书怎么写
2014/05/24 职场文书
规范化管理年活动总结
2014/08/29 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python