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

介绍

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

正文

举 个例子,就比如我们平时在下载东西,通常就会有好几个状态,比如准备状态(ReadyState)、下载状态(DownloadingState)、暂停 状态(DownloadPausedState)、下载完毕状态(DownloadedState)、失败状态 (DownloadFailedState),也就是说在每个状态都只可以做当前状态才可以做的事情,而不能做其它状态能做的事儿。
由于 State模式描述了下载(Download)如何在每一种状态下表现出不同的行为。这一模式的关键思想就是引入了一个叫做State的抽象类(或JS里 的函数)来表示下载状态,State函数(作为原型)为每个状态的子类(继承函数)声明了一些公共接口。其每个继承函数实现与特定状态相关的行为,比如 DownloadingState和DownloadedState分别实现了正在下载和下载完毕的行为。这些行为可以通过Download来来维护。
让我们来实现一把,首先定义作为其他基础函数的原型的State函数:

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

var State = function () {

 

};

 

State.prototype.download = function () {

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

};

 

State.prototype.pause = function () {

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

};

 

State.prototype.fail = function () {

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

};

 

State.prototype.finish = function () {

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

};

 

我们为State的原型定义了4个方法接口,分别对应着下载(download)、暂停(pause)、失败(fail)、结束(finish)以便子函数可以重写。
在编写子函数之前,我们先来编写一个ReadyState函数,以便可以将状态传递给第一个download状态:

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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 () {

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

};

 

ReadyState.prototype.fail = function () {

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

};

 

ReadyState.prototype.finish = function () {

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

};

 

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

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

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 () {

returnnew ReadyState(this);

};

 

Download.prototype.getDownloadingState = function () {

returnnew DownloadingState(this);

};

 

Download.prototype.getDownloadPausedState = function () {

returnnew DownloadPausedState(this);

};

 

Download.prototype.getDownloadedState = function () {

returnnew DownloadedState(this);

};

 

Download.prototype.getDownloadedFailedState = function () {

returnnew DownloadFailedState(this);

};

 

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

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

var DownloadingState = function (oDownload) {

    State.apply(this);

this.oDownload = oDownload;

};

 

DownloadingState.prototype = new State();

 

DownloadingState.prototype.download = function () {

thrownew 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的主要注意事项就是已经正在下载的文件,不能再次开始下载了,其它的状态都可以连续进行。

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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 () {

thrownew 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("下载完毕!");

};

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

Grow your business fast with

Suku