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 相关文章推荐
js 刷新页面的代码小结 推荐
Apr 02 Javascript
jquery DOM操作 基于命令改变页面
May 06 Javascript
根据json字符串生成Html的一种方式
Jan 09 Javascript
js网页版计算器的简单实现
Jul 02 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
浅析JavaScript动画
Jun 10 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 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
laravel-admin的图片删除实例
2019/09/30 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
Python的ORM框架SQLObject入门实例
2014/04/28 Python
Django中的Model操作表的实现
2018/07/24 Python
如何获取Python简单for循环索引
2019/11/21 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
python 负数取模运算实例
2020/06/03 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
实习护士自我鉴定
2013/10/13 职场文书
弄虚作假心得体会
2014/09/10 职场文书
知识就是力量演讲稿
2014/09/13 职场文书
出差报告怎么写
2014/11/06 职场文书
考研英语辞职信
2015/05/13 职场文书
利用Java连接Hadoop进行编程
2022/06/28 Java/Android
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python