介绍

状态模式(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方法)。




    

    State Pattern

    

    

    

    

    

    

    

    

    

    

    

    

总结

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

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

深入理解JavaScript系列(43):设计模式之状态模式详解的更多相关文章

  1. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  2. HTML5数字输入仅接受整数的实现代码

    这篇文章主要介绍了HTML5数字输入仅接受整数的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. html5简介_动力节点Java学院整理

    这篇文章主要介绍了html5简介,用于指定构建网页的元素,这些元素中的大多数都用于描述网页内容,有兴趣的可以了解一下

  5. ios 8 Homescreen webapp,关闭和打开iPad停止javascript

    我有一个适用于iPad的全屏HTML5网络应用程序,并且刚刚安装了IOS8来试用它,它一切正常,直到你关闭并重新启动iPad.一旦web应用程序重新启动javascript就会停止并加载新页面不会重新启动它.在iPad上的Safari中打开同一页面时,关闭和打开iPad会继续按预期工作.其他人注意到了这个或想出了一个解决方案吗?解决方法这似乎是我在iOS8.1.1更新中解决的.

  6. iOS 6 javascript与object.defineProperty的间歇性问题

    当访问使用较新的Object.defineProperty语法定义属性的对象的属性时,有没有其他人注意到新iOS6javascript引擎中的间歇性错误/问题?https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty我正在看到javascript失败的情况,说

  7. ios – 如何使用JSExport导出内部类的方法

    解决方法似乎没有办法将内部类函数导出到javascript.我将内部类移出并创建了独立的类,它起作用了.

  8. 静音iOS推送通知与React Native应用程序在后台

    我有一个ReactNative应用程序,我试图获得一个发送到JavaScript处理程序的静默iOS推送通知.我看到的行为是AppDelegate中的didReceiveRemoteNotification函数被调用,但是我的JavaScript中的处理程序不会被调用,除非应用程序在前台,或者最近才被关闭.我很困惑的事情显然是应用程序正在被唤醒,并且它的didReceiveRemoteNotifi

  9. ios – 内存泄漏与UIWebView和Javascript

    清楚地包含一个Javascript文件到我的HTML是使UIWebView泄漏内存.当我重复使用相同的UIWebView对象时,或者每当我有内容实例化一个新的漏洞时,会出现泄漏的事实,导致我认为必须有一些JavaScript文件被loadHTMLString处理,导致泄漏.有人知道如何解决这个问题吗?

  10. iOS应用程序的UI自动化测试如何与乐器和Javascript

    从WWDC2010视频会议中了解iOS应用程序的自动化UI测试,但没有实践.从代码项目project,我们可以有一个例子.这个问题在这里听到有涉及这个的人.任何限制?解决方法我建议从AlexWollmer开始使用thisblogpost.他创建了一个非常有用的JavaScript库:tuneup_jswithtest()函数,它允许测试分离和有用的帮助者以及为自动化仪器编写测试的断言.

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部