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 wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
33种Javascript 表格排序控件收集
Dec 03 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
如何实现小程序与小程序之间的跳转
Nov 04 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
CodeIgniter安全相关设置汇总
2014/07/03 PHP
详解PHP实现异步调用的4种方法
2016/03/14 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
Javascript实现的分页函数
2006/12/22 Javascript
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
用python登录Dr.com思路以及代码分享
2014/06/25 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
python3 flask实现文件上传功能
2020/03/20 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
Python常用类型转换实现代码实例
2020/07/28 Python
如何利用find命令查找文件
2016/11/18 面试题
工程师岗位职责
2013/11/08 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
学生会自荐信
2019/05/16 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python