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

最新推荐文章于 2024-05-05 15:15:01 发布
最新推荐文章于 2024-05-05 15:15:01 发布
阅读量412 收藏
点赞数
分类专栏： 深入理解JavaScript系列

介绍

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

参考：https://github.com/tcorral/Design-Patterns-in-Javascript/blob/master/State/1/index.html

tianmaqinfeng
关注
专栏目录
深入理解JavaScript系列（43）：设计模式之状态模式详解
10-24
今天我们要深入理解的设计模式是状态模式（State），这是一种行为型设计模式。 状态模式允许一个对象在其内部状态改变时，改变其行为。看起来就像这个对象的类被修改了一样。实际上，我们没有改变对象的类，而是...
js中State模式的解析及运用
u012632105的博客
04-12 669
js中State模式的解析及运用
reactjs组件实例的三大属性之state属性使用示例
学亮编程手记
02-27 427
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>state</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <script type=
js框架----react.js 3 类组件的实例属性state
weixin_45228198的博客
09-20 233
类组件实例的属性state添加事件，动态修改state原生js事件绑定更改this的指向点击设置state完整代码state的简写方式state属性总结propsrefs state 初始化状态 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
reactjs组件实例的三大属性之state属性代码示例
学亮编程手记
12-02 863
/
深入理解JavaScript系列（37）：设计模式之享元模式详解
10-24
享元模式是一种软件设计模式，它的核心思想是通过共享已有对象来减少对象的创建，从而降低内存中的对象数量，提高系统性能。在JavaScript中，享元模式尤其适用于处理大量具有相似特性的对象，例如在数据层和DOM层的...
深入理解JavaScript系列（35）：设计模式之迭代器模式详解
10-24
迭代器模式是软件设计模式中的一种，它在JavaScript中同样有着广泛的应用。这一模式的核心思想是提供一个方式来顺序访问聚合对象的元素，同时不直接暴露其内部结构。通过这种方式，迭代器模式允许用户遍历一个集合，...
JS设计模式六： 状态（state）模式
weixin_34343689的博客
04-07 142
var delegate = function(client, delegation) { 　　return { 　　　　buttonWasPressed: function() { 　　　　　　return delegation.buttonWasPressed.apply(client, arguments); 　　　　} 　　};};// 状态机var FSM = ...
JS状态模式
qq_33938417的博客
11-23 146
class State{ constructor(color){ this.color = color } handle(context){ console.log(`turn to ${this.color} light`) context.setState(this) } } class Context{ ...
javascript设计模式--状态模式（State）
weixin_30750335的博客
04-02 124
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>State Pattern</title> 6 </head> 7 <body> ...
js设计模式——状态模式
梦是太匆
04-17 393
状态模式是一种面向对象的设计模式，它允许一个对象在内部状态发生改变时改变它的行为。状态模式将状态和状态相关的行为封装在一个类中，并将对象的行为委托给它的状态对象，从而使对象的行为可以随着状态的改变而改变。状态模式的核心思想是将对象的行为与其状态分离，以便在运行时动态更改对象的行为。状态模式是一种非常有用的设计模式，它可以将状态和状态相关的行为封装到一个对象中，从而降低系统的复杂度，提高代码的可维护性和可扩展性。
JavaScript设计模式——状态模式
前端御书房
08-28 708
JavaScript设计模式，状态模式，持续更新中……
JavaScript状态模式：实现行为随状态变化的解决方案
最新发布
你若盛开，清风自来
05-05 646
本文将介绍JavaScript状态模式的概念和用法，以及它在实际开发中的应用。JavaScript状态模式是一种设计模式，用于允许对象在内部状态改变时改变它的行为。了解状态模式的使用方法和场景对于开发者来说具有重要意义。掌握状态模式的使用可以帮助我们更高效地实现行为随状态变化的对象。
JavaScript状态模式
橘猫吃不胖的博客
12-24 1259
JavaScript状态模式 1 什么是状态模式 2 使用状态模式改造电灯程序 3 缺少抽象类的变通方式 4 示例：文件上传 4.1 场景描述 4.2 代码过程
JavaScript-状态模式
qq_42372534的博客
06-27 368
状态模式 在状态模式（State Pattern）中，类的行为是基于它的状态改变的。这种类型的设计模式属于行为型模式。 在状态模式中，我们创建表示各种状态的对象和一个行为随着状态对象改变而改变的 context 对象。 何时使用：代码中包含大量与对象状态有关的条件语句。 如何解决：将各种具体的状态类抽象出来。 // JavaScript版本的状态机 // Light相当于环境类 // currState保存状态对象 class Light { constructor() { this.cur
原生 JavaScript 实现 state 状态管理系统
weixin_34390996的博客
07-30 222
Build a state management system with vanilla JavaScript | CSS-Tricks 在软件工程中，状态管理已经不是什么新鲜概念，但是在 JavaScript 语言中比较流行的框架都在使用相关概念。传统意义上，我们会保持 DOM 本身的状态甚至声明该状态为全局变量。不过现在，我们有很多状态管理的宠儿供我们选择。比如 Redux，MobX 以...
JavaScript 设计模式学习第二十篇－状态模式
越陌度阡
12-09 580
状态模式（State Pattern）允许一个对象在其内部状态改变时改变它的行为，对象看起来似乎修改了它的类，类的行为随着它的状态改变而改变。 当程序需要根据不同的外部情况来做出不同操作时，最直接的方法就是使用 switch-case或 if-else语句将这些可能发生的情况全部兼顾到，但是这种做法应付复杂一点的状态判断时就有点力不从心，开发者得找到合适的位置添加或修改代码，这个过程很容易出.........
JavaScript设计模式：状态模式实例详解
"深入理解JavaScript系列（43）：设计模式之状态模式详解"这一篇文章详细探讨了JavaScript中的状态模式，这是一种行为设计模式，主要用于解决对象在不同状态下表现出不同行为的问题。状态模式的核心理念是将对象的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值