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 相关文章推荐
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
js+html+css实现鼠标移动div实例
Jan 30 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
js将控件隐藏及display属性的使用介绍
Dec 30 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
详解vue中组件参数
Jul 09 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
AJAX实现省市县三级联动效果
Oct 16 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
Smarty局部缓存的几种方法简介
2014/06/17 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
农历与西历对照
2006/09/06 Javascript
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
百度地图api如何使用
2015/08/03 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
jquery.Callbacks的实现详解
2016/11/30 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
Python数据可视化之画图
2019/01/15 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
公益活动策划方案
2014/01/09 职场文书
十八大闭幕感言
2014/01/22 职场文书
四年级下册教学反思
2014/02/01 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
经典英文广告词
2014/03/18 职场文书
《恐龙》教学反思
2014/04/27 职场文书
2014年个人委托书范本
2014/10/13 职场文书
暂住证明怎么写
2015/06/19 职场文书
企业年会祝酒词
2015/08/11 职场文书
Java并发编程必备之Future机制
2021/06/30 Java/Android