深入理解JavaScript系列（43）：设计模式之状态模式详解

介绍

状态模式（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.一个操作中含有大量的分支语句，而且这些分支语句依赖于该对象的状态。状态通常为一个或多个枚举常量的表示。

赞 (0)

相关推荐

  • C++设计模式之状态模式

    C++设计模式之状态模式

    前言 在实际开发中,我们经常会遇到这种情况:一个对象有多种状态,在每一个状态下,都会有不同的行为.那么在代码中我们经常是这样实现的. 复制代码 代码如下: typedef enum tagState {      state,      state1,      state2 }State;   void Action(State actionState) {      if (actionState == state)      {           // DoSomething     

  • php设计模式 State (状态模式)

    状态state模式是GOF23种模式中的一种,和命令模式一样,也是一种行为模式.状态模式和命令模式相当像,一样是"接口-实现类"这种模式的应用,是面向接口编程原则的体现. 状态模式属于对象创建型模式,其意图是允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了他的类.比较常见的例子是在一个表示网络连接的类TCPConnection,一个TCPConnection对象的状态处于若干不同的状态之一:连接已经建立(Established),正在监听,连接已经关闭(closed).

  • 对比Java设计模式编程中的状态模式和策略模式

    为了能在Java应用程序中正确的使用状态模式和策略模式,开发人员需要清楚地知道这两种模式之间的区别.尽管状态模式和策略模式的结构非常相似,它们又同样遵循开闭原则,都代表着SOLID设计原则的'O',但它们的意图是完全不同的.Java中的策略模式是对一组相关的算法进行封装,给调用方提供了运行时的灵活性.调用方可以在运行时选择不同的算法,而不用修改使用策略的那个Context类.使用策略模式的经典例子包括实现加密算法,压缩算法,以及排序算法.另一方面,状态模式使用一个对象可以在不同的状态下表现出不同

  • 学习JavaScript设计模式之状态模式

    状态模式的关键是区分事物内部的状态,事物内部状态的改变往往会带来事物的行为改变. 当电灯开着,此时按下开关,电灯会切换到关闭状态:再按一次开关,电灯又将被打开.同一个开关在不同的状态下,表现出来的行为是不一样的. 一.有限状态机 状态总数(state)是有限的. 任一时刻,只处在一种状态之中. 某种条件下,会从一种状态转变(transition)到另一种状态. 允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类. 解释: (1)将状态封装成独立的类,并将请求委托给当前的状态对

  • 详解state状态模式及在C++设计模式编程中的使用实例

    详解state状态模式及在C++设计模式编程中的使用实例

    每个人.事物在不同的状态下会有不同表现(动作),而一个状态又会在不同的表现下转移到下一个不同的状态(State).最简单的一个生活中的例子就是:地铁入口处,如果你放入正确的地铁票,门就会打开让你通过.在出口处也是验票,如果正确你就可以 ok,否则就不让你通过(如果你动作野蛮,或许会有报警(Alarm),:)). 有限状态自动机(FSM)也是一个典型的状态不同,对输入有不同的响应(状态转移). 通常我们在实现这类系统会使用到很多的 Switch/Case 语句,Case 某种状态,发生什么动作,C

  • Java设计模式之状态模式（State模式）介绍

    State的定义:不同的状态,不同的行为:或者说,每个状态有着相应的行为. 何时使用状态模式 State模式在实际使用中比较多,适合"状态的切换".因为我们经常会使用If elseif else 进行状态切换, 如果针对状态的这样判断切换反复出现,我们就要联想到是否可以采取State模式了. 不只是根据状态,也有根据属性.如果某个对象的属性不同,对象的行为就不一样,这点在数据库系统中出现频率比较高,我们经常会在一个数据表的尾部,加上property属性含义的字段,用以标识记录中一些特殊

  • 详解PHP中的状态模式编程

    详解PHP中的状态模式编程

    定义 状态模式,又称状态对象模式(Pattern of Objects for State),状态模式就是对象的行为模式.状态模式允许一个对象在其内部状态改变的时候改变其行为.这个对象看上去就像是改变了它的类一样 UML图 状态模式中主要角色 抽象状态角色(State):定义一个接口或抽象类State,用以封装环境对象的一个特定的状态所对应的行为 具体状态(ConcreteState)角色:每一个状态类都实现了环境(Context)的一个状态所对应的行为 环境(Context)角色:定义客户端所

  • 学习php设计模式 php实现状态模式

    学习php设计模式 php实现状态模式

    一.意图 允许一个对象在其内部状态改变时改变它的行为.对象看起来似乎修改了它的类 状态模式变化的位置在于对象的状态 二.状态模式结构图   三.状态模式中主要角色 抽象状态(State)角色:定义一个接口,用以封装环境对象的一个特定的状态所对应的行为 具体状态(ConcreteState)角色:每一个具体状态类都实现了环境(Context)的一个状态所对应的行为 环境(Context)角色:定义客户端所感兴趣的接口,并且保留一个具体状态类的实例.这个具体状态类的实例给出此环境对象的现有状态 四.

  • iOS App的设计模式开发中对State状态模式的运用

    iOS App的设计模式开发中对State状态模式的运用

    1.概述 在软件开发过程中,应用程序可能会根据不同的情况作出不同的处理.最直接的解决方案是将这些所有可能发生的情况全都考虑到.然后使用if... ellse语句来做状态判断来进行不同情况的处理.但是对复杂状态的判断就显得"力不从心了".随着增加新的状态或者修改一个状体(if else(或switch case)语句的增多或者修改)可能会引起很大的修改,而程序的可读性,扩展性也会变得很弱.维护也会很麻烦.那么我就考虑只修改自身状态的模式. 例子1:按钮来控制一个电梯的状态,一个电梯开们,

  • 轻松掌握JavaScript状态模式

    状态模式 状态模式(State)允许一个对象在其内部状态改变的时候改变它的行为,对象看起来似乎修改了它的类. 状态模式的使用场景也特别明确,有如下两点:  1.一个对象的行为取决于它的状态,并且它必须在运行时刻根据状态改变它的行为.(有些对象通常会有好几个状态,在每个状态都只可以做当前状态才可以做的事情,而不能做其它状态能做的事儿) 2.一个操作中含有大量的分支语句,而且这些分支语句依赖于该对象的状态.状态通常为一个或多个枚举常量的表示. 一.有限状态机 1.状态总数(state)是有限的.  

随机推荐