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

2024-09-01 15:32

本文主要是介绍深入理解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. 一个操作中含有大量的分支语句,而且这些分支语句依赖于该对象的状态。状态通常为一个或多个枚举常量的表示。

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

这篇关于深入理解JavaScript系列(43):设计模式之状态模式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1127329

相关文章

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时,有没有考虑过 JVM 是如何把静态的字节码(byte code)转化为运行时对象的呢,这个问题看似简单,但清楚的同学相信也不会太多,这篇文章首先介绍 JVM 类初始化的机制,然后给出几个易出错的实例来分析,帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段,分别是:loading 、Linking、initialization

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true (Spring security默认会带有ROLE_前缀),去

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程,特意画了如下的类图,包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口,接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类,它们之间的依赖,构建起了整个框架。想要理解整个架构,最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文(security context)的信息。当前操作的用户是谁,该用户是否已经被认证,他拥有哪些角色权限…这些都被保

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu