深入理解JavaScript系列(43):设计模式之状态模式详解


Posted in Javascript onMarch 04, 2015

介绍

状态模式(State)允许一个对象在其内部状态改变的时候改变它的行为,对象看起来似乎修改了它的类。

正文

举个例子,就比如我们平时在下载东西,通常就会有好几个状态,比如准备状态(ReadyState)、下载状态(DownloadingState)、暂停状态(DownloadPausedState)、下载完毕状态(DownloadedState)、失败状态(DownloadFailedState),也就是说在每个状态都只可以做当前状态才可以做的事情,而不能做其它状态能做的事儿。

由于State模式描述了下载(Download)如何在每一种状态下表现出不同的行为。这一模式的关键思想就是引入了一个叫做State的抽象类(或JS里的函数)来表示下载状态,State函数(作为原型)为每个状态的子类(继承函数)声明了一些公共接口。其每个继承函数实现与特定状态相关的行为,比如DownloadingState和DownloadedState分别实现了正在下载和下载完毕的行为。这些行为可以通过Download来来维护。

让我们来实现一把,首先定义作为其他基础函数的原型的State函数:

var State = function () {
};
State.prototype.download = function () {

    throw new Error("该方法必须被重载!");

};
State.prototype.pause = function () {

    throw new Error("该方法必须被重载!");

};
State.prototype.fail = function () {

    throw new Error("该方法必须被重载!");

};
State.prototype.finish = function () {

    throw new Error("该方法必须被重载!");

};

我们为State的原型定义了4个方法接口,分别对应着下载(download)、暂停(pause)、失败(fail)、结束(finish)以便子函数可以重写。

在编写子函数之前,我们先来编写一个ReadyState函数,以便可以将状态传递给第一个download状态:

var ReadyState = function (oDownload) {

    State.apply(this);

    this.oDownload = oDownload;

};
ReadyState.prototype = new State();
ReadyState.prototype.download = function () {

    this.oDownload.setState(this.oDownload.getDownloadingState());

    // Ready以后,可以开始下载,所以设置了Download函数里的状态获取方法

 console.log("Start Download!");

};
ReadyState.prototype.pause = function () {

    throw new Error("还没开始下载,不能暂停!");

};
ReadyState.prototype.fail = function () {

    throw new Error("文件还没开始下载,怎么能说失败呢!");

};
ReadyState.prototype.finish = function () {

    throw new Error("文件还没开始下载,当然也不能结束了!");

};

该函数接收了一个Download维护函数的实例作为参数,Download函数用于控制状态的改变和获取(类似于中央控制器,让外部调用),ReadyState重写了原型的download方法,以便开始进行下载。我们继续来看Download函数的主要功能:

var Download = function () {

    this.oState = new ReadyState(this);

};
Download.prototype.setState = function (oState) {

    this.oState = oState;

};
// 对外暴露的四个公共方法,以便外部调用
Download.prototype.download = function () {

    this.oState.download();

};
Download.prototype.pause = function () {

    this.oState.pause();

};
Download.prototype.fail = function () {

    this.oState.fail();

};
Download.prototype.finish = function () {

    this.oState.finish();

};
//获取各种状态,传入当前this对象

Download.prototype.getReadyState = function () {

    return new ReadyState(this);

};
Download.prototype.getDownloadingState = function () {

    return new DownloadingState(this);

};
Download.prototype.getDownloadPausedState = function () {

    return new DownloadPausedState(this);

};
Download.prototype.getDownloadedState = function () {

    return new DownloadedState(this);

};
Download.prototype.getDownloadedFailedState = function () {

    return new DownloadFailedState(this);

};

Download函数的原型提供了8个方法,4个是对用于下载状态的操作行为,另外4个是用于获取当前四个不同的状态,这4个方法都接收this作为参数,也就是将Download实例自身作为一个参数传递给处理该请求的状态对象(ReadyState 以及后面要实现的继承函数),这使得状态对象比必要的时候可以访问oDownlaod。

接下来,继续定义4个相关状态的函数:

var DownloadingState = function (oDownload) {

    State.apply(this);

    this.oDownload = oDownload;

};
DownloadingState.prototype = new State();
DownloadingState.prototype.download = function () {

    throw new Error("文件已经正在下载中了!");

};
DownloadingState.prototype.pause = function () { this.oDownload.setState(this.oDownload.getDownloadPausedState());

    console.log("暂停下载!");

};
DownloadingState.prototype.fail = function () { this.oDownload.setState(this.oDownload.getDownloadedFailedState());

    console.log("下载失败!");

};
DownloadingState.prototype.finish = function () {

    this.oDownload.setState(this.oDownload.getDownloadedState());

    console.log("下载完毕!");

};

DownloadingState的主要注意事项就是已经正在下载的文件,不能再次开始下载了,其它的状态都可以连续进行。

var DownloadPausedState = function (oDownload) {

    State.apply(this);

    this.oDownload = oDownload;

};
DownloadPausedState.prototype = new State();
DownloadPausedState.prototype.download = function () {

    this.oDownload.setState(this.oDownload.getDownloadingState());

    console.log("继续下载!");

};
DownloadPausedState.prototype.pause = function () {

    throw new Error("已经暂停了,咋还要暂停呢!");

};
DownloadPausedState.prototype.fail = function () { this.oDownload.setState(this.oDownload.getDownloadedFailedState());

    console.log("下载失败!");

};
DownloadPausedState.prototype.finish = function () {

    this.oDownload.setState(this.oDownload.getDownloadedState());

    console.log("下载完毕!");

};

DownloadPausedState函数里要注意的是,已经暂停的下载,不能再次暂停。
var DownloadedState = function (oDownload) {

    State.apply(this);

    this.oDownload = oDownload;

};
DownloadedState.prototype = new State();
DownloadedState.prototype.download = function () {

    this.oDownload.setState(this.oDownload.getDownloadingState());

    console.log("重新下载!");

};
DownloadedState.prototype.pause = function () {

    throw new Error("对下载完了,还暂停啥?");

};
DownloadedState.prototype.fail = function () {

    throw new Error("都下载成功了,咋会失败呢?");

};
DownloadedState.prototype.finish = function () {

    throw new Error("下载成功了,不能再为成功了吧!");

};

DownloadedState函数,同理成功下载以后,不能再设置finish了,只能设置重新下载状态。

var DownloadFailedState = function (oDownload) {

    State.apply(this);

    this.oDownload = oDownload;

};
DownloadFailedState.prototype = new State();
DownloadFailedState.prototype.download = function () {

    this.oDownload.setState(this.oDownload.getDownloadingState());

    console.log("尝试重新下载!");

};
DownloadFailedState.prototype.pause = function () {

    throw new Error("失败的下载,也不能暂停!");

};
DownloadFailedState.prototype.fail = function () {

    throw new Error("都失败了,咋还失败呢!");

};
DownloadFailedState.prototype.finish = function () {

    throw new Error("失败的下载,肯定也不会成功!");

};

同理,DownloadFailedState函数的失败状态,也不能再次失败,但可以和finished以后再次尝试重新下载。

调用测试代码,就非常简单了,我们在HTML里演示吧,首先是要了jquery,然后有3个按钮分别代表:开始下载、暂停、重新下载。(注意在Firefox里用firebug查看结果,因为用了 console.log方法)。

<html>

<head>

    <link type="text/css" rel="stylesheet" href="http://www.cnblogs.com/css/style.css" />

    <title>State Pattern</title>

    <script type="text/javascript" src="/jquery.js"></script>

    <script type="text/javascript" src="Download.js"></script>

    <script type="text/javascript" src="states/State.js"></script>

    <script type="text/javascript" src="states/DownloadFailedState.js"></script>

    <script type="text/javascript" src="states/DownloadPausedState.js"></script>

    <script type="text/javascript" src="states/DownloadedState.js"></script>

    <script type="text/javascript" src="states/DownloadingState.js"></script>

    <script type="text/javascript" src="states/ReadyState.js"></script>

</head>

<body>

    <input type="button" value="开始下载" id="download_button" />

    <input type="button" value="暂停" id="pause_button" />

    <input type="button" value="重新下载" id="resume_button" />

    <script type="text/javascript">

        var oDownload = new Download();

        $("#download_button").click(function () {

            oDownload.download();

        });
        $("#pause_button").click(function () {

            oDownload.pause();

        });
        $("#resume_button").click(function () {

            oDownload.download();

        });

    </script>

</body>

</html>

总结

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

1.一个对象的行为取决于它的状态,并且它必须在运行时刻根据状态改变它的行为。
2.一个操作中含有大量的分支语句,而且这些分支语句依赖于该对象的状态。状态通常为一个或多个枚举常量的表示。

Javascript 相关文章推荐
JavaScript设置FieldSet展开与收缩
May 15 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
jquery解析xml字符串简单示例
Apr 11 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 Javascript
js实现贪吃蛇小游戏
Oct 29 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 #Javascript
javascript 动态创建表格的2种方法总结
Mar 04 #Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 #Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 #Javascript
百度地图自定义控件分享
Mar 04 #Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 #Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 #Javascript
You might like
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
PHP三元运算符的结合性介绍
2012/01/10 PHP
PHP文件锁函数flock()详细介绍
2014/11/18 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
php生成word并下载代码实例
2019/03/15 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
跟老齐学Python之用while来循环
2014/10/02 Python
Python 字典dict使用介绍
2014/11/30 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
小学生班会演讲稿
2014/01/09 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
四年级学生期末评语
2014/12/26 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
SpringBoot详解自定义Stater的应用
2022/07/15 Java/Android