加载中...

（43）设计模式之状态模式

介绍

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

正文

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

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

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

  1. var State = function () {
  2.  
  3. };
  4.  
  5. State.prototype.download = function () {
  6.     throw new Error("该方法必须被重载!");
  7. };
  8.  
  9. State.prototype.pause = function () {
  10.     throw new Error("该方法必须被重载!");
  11. };
  12.  
  13. State.prototype.fail = function () {
  14.     throw new Error("该方法必须被重载!");
  15. };
  16.  
  17. State.prototype.finish = function () {
  18.     throw new Error("该方法必须被重载!");
  19. };

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

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

  1. var ReadyState = function (oDownload) {
  2.     State.apply(this);
  3.     this.oDownload = oDownload;
  4. };
  5.  
  6. ReadyState.prototype = new State();
  7.  
  8. ReadyState.prototype.download = function () {
  9.     this.oDownload.setState(this.oDownload.getDownloadingState());
  10.     // Ready以后，可以开始下载，所以设置了Download函数里的状态获取方法
  11.  console.log("Start Download!");
  12. };
  13.  
  14. ReadyState.prototype.pause = function () {
  15.     throw new Error("还没开始下载，不能暂停!");
  16. };
  17.  
  18. ReadyState.prototype.fail = function () {
  19.     throw new Error("文件还没开始下载，怎么能说失败呢!");
  20. };
  21.  
  22. ReadyState.prototype.finish = function () {
  23.     throw new Error("文件还没开始下载，当然也不能结束了!");
  24. };

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

  1. var Download = function () {
  2.     this.oState = new ReadyState(this);
  3. };
  4.  
  5. Download.prototype.setState = function (oState) {
  6.     this.oState = oState;
  7. };
  8.  
  9. // 对外暴露的四个公共方法，以便外部调用
  10.  
  11. Download.prototype.download = function () {
  12.     this.oState.download();
  13. };
  14.  
  15. Download.prototype.pause = function () {
  16.     this.oState.pause();
  17. };
  18.  
  19. Download.prototype.fail = function () {
  20.     this.oState.fail();
  21. };
  22.  
  23. Download.prototype.finish = function () {
  24.     this.oState.finish();
  25. };
  26.  
  27. //获取各种状态，传入当前this对象
  28. Download.prototype.getReadyState = function () {
  29.     return new ReadyState(this);
  30. };
  31.  
  32. Download.prototype.getDownloadingState = function () {
  33.     return new DownloadingState(this);
  34. };
  35.  
  36. Download.prototype.getDownloadPausedState = function () {
  37.     return new DownloadPausedState(this);
  38. };
  39.  
  40. Download.prototype.getDownloadedState = function () {
  41.     return new DownloadedState(this);
  42. };
  43.  
  44. Download.prototype.getDownloadedFailedState = function () {
  45.     return new DownloadFailedState(this);
  46. };

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

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

  1. var DownloadingState = function (oDownload) {
  2.     State.apply(this);
  3.     this.oDownload = oDownload;
  4. };
  5.  
  6. DownloadingState.prototype = new State();
  7.  
  8. DownloadingState.prototype.download = function () {
  9.     throw new Error("文件已经正在下载中了!");
  10. };
  11.  
  12. DownloadingState.prototype.pause = function () { this.oDownload.setState(this.oDownload.getDownloadPausedState());
  13.     console.log("暂停下载!");
  14. };
  15.  
  16. DownloadingState.prototype.fail = function () { this.oDownload.setState(this.oDownload.getDownloadedFailedState());
  17.     console.log("下载失败!");
  18. };
  19.  
  20. DownloadingState.prototype.finish = function () {
  21.     this.oDownload.setState(this.oDownload.getDownloadedState());
  22.     console.log("下载完毕!");
  23. };

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

  1. var DownloadPausedState = function (oDownload) {
  2.     State.apply(this);
  3.     this.oDownload = oDownload;
  4. };
  5.  
  6. DownloadPausedState.prototype = new State();
  7.  
  8. DownloadPausedState.prototype.download = function () {
  9.     this.oDownload.setState(this.oDownload.getDownloadingState());
  10.     console.log("继续下载!");
  11. };
  12.  
  13. DownloadPausedState.prototype.pause = function () {
  14.     throw new Error("已经暂停了，咋还要暂停呢!");
  15. };
  16.  
  17. DownloadPausedState.prototype.fail = function () { this.oDownload.setState(this.oDownload.getDownloadedFailedState());
  18.     console.log("下载失败!");
  19. };
  20.  
  21. DownloadPausedState.prototype.finish = function () {
  22.     this.oDownload.setState(this.oDownload.getDownloadedState());
  23.     console.log("下载完毕!");
  24. };

DownloadPausedState函数里要注意的是，已经暂停的下载，不能再次暂停。

  1. var DownloadedState = function (oDownload) {
  2.     State.apply(this);
  3.     this.oDownload = oDownload;
  4. };
  5.  
  6. DownloadedState.prototype = new State();
  7.  
  8. DownloadedState.prototype.download = function () {
  9.     this.oDownload.setState(this.oDownload.getDownloadingState());
  10.     console.log("重新下载!");
  11. };
  12.  
  13. DownloadedState.prototype.pause = function () {
  14.     throw new Error("对下载完了，还暂停啥？");
  15. };
  16.  
  17. DownloadedState.prototype.fail = function () {
  18.     throw new Error("都下载成功了，咋会失败呢？");
  19. };
  20.  
  21. DownloadedState.prototype.finish = function () {
  22.     throw new Error("下载成功了，不能再为成功了吧!");
  23. };

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

  1. var DownloadFailedState = function (oDownload) {
  2.     State.apply(this);
  3.     this.oDownload = oDownload;
  4. };
  5.  
  6. DownloadFailedState.prototype = new State();
  7.  
  8. DownloadFailedState.prototype.download = function () {
  9.     this.oDownload.setState(this.oDownload.getDownloadingState());
  10.     console.log("尝试重新下载!");
  11. };
  12.  
  13. DownloadFailedState.prototype.pause = function () {
  14.     throw new Error("失败的下载，也不能暂停!");
  15. };
  16.  
  17. DownloadFailedState.prototype.fail = function () {
  18.     throw new Error("都失败了，咋还失败呢!");
  19. };
  20.  
  21. DownloadFailedState.prototype.finish = function () {
  22.     throw new Error("失败的下载，肯定也不会成功!");
  23. };同理，DownloadFailedState函数的失败状态，也不能再次失败，但可以和finished以后再次尝试重新下载。

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

  1. <html>
  2. <head>
  3.     <link type="text/css" rel="stylesheet" href="http://www.cnblogs.com/css/style.css" />
  4.     <title>State Pattern</title>
  5.     <script type="text/javascript" src="/jquery.js"></script>
  6.     <script type="text/javascript" src="Download.js"></script>
  7.     <script type="text/javascript" src="states/State.js"></script>
  8.     <script type="text/javascript" src="states/DownloadFailedState.js"></script>
  9.     <script type="text/javascript" src="states/DownloadPausedState.js"></script>
  10.     <script type="text/javascript" src="states/DownloadedState.js"></script>
  11.     <script type="text/javascript" src="states/DownloadingState.js"></script>
  12.     <script type="text/javascript" src="states/ReadyState.js"></script>
  13. </head>
  14. <body>
  15.     <input type="button" value="开始下载" id="download_button" />
  16.     <input type="button" value="暂停" id="pause_button" />
  17.     <input type="button" value="重新下载" id="resume_button" />
  18.     <script type="text/javascript">
  19.         var oDownload = new Download();
  20.         $("#download_button").click(function () {
  21.             oDownload.download();
  22.         });
  23.  
  24.         $("#pause_button").click(function () {
  25.             oDownload.pause();
  26.         });
  27.  
  28.         $("#resume_button").click(function () {
  29.             oDownload.download();
  30.         });
  31.     </script>
  32. </body>
  33. </html>

总结

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

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