JavaScript设计模式 - 状态模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>状态模式</title>
</head>
<body>
<input type="button" value="download" id="download_button"></input>
<input type="button" value="pause" id="pause_button"></input>
<input type="button" value="resume" id="resume_button"></input>
<br/>
<br/>
<br/>
<input type="button" value="预安装" id="preins"></input>
<input type="button" value="预安装失败" id="preinsf"></input>
<input type="button" value="预安装成功" id="preinss"></input>
<input type="button" value="安装" id="ins"></input>
<input type="button" value="安装失败" id="insf"></input>
<input type="button" value="安装成功" id="inss"></input>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<input type="button" value="软件安装" id="soft"></input> <script type="text/javascript"> // 基类状态
class State { // 下载
download() {
throw new Error("子类必须要重写该方法!");
} // 暂停
pause() {
throw new Error("子类必须要重写该方法!");
} // 失败
fail() {
throw new Error("子类必须要重写该方法!");
} // 完成
finish() {
throw new Error("子类必须要重写该方法!");
}
} // 准备状态
class ReadyState extends State { constructor(download) {
super();
this._download = download;
} // 点击下载后
download() {
this._download.setState(this._download.getDownloadingState()); // 把状态设置成 正在下载状态
console.log("开始下载!");
} pause() {
console.error("还没开始下载怎么暂停呢!");
} fail() {
console.error("还没开始下载不可能失败!");
} finish() {
console.error("还没开始下载不会结束啊!");
}
} // 正在下载状态
class DownloadingState extends State { constructor(download) {
super();
this._download = download;
} download() {
console.error("文件已经下载了!");
} pause() {
this._download.setState(this._download.getDownloadPausedState()); // 把状态设置成 暂停状态
console.log("暂停(这里写暂停下载的代码)!");
} fail() {
this._download.setState(this._download.getDownloadedFailedState()); // 把状态设置成 失败状态
console.log("下载失败(这里可以写下载时出错的异常逻辑)！");
} finish() {
this._download.setState(this._download.getDownloadedState()); // 把状态设置成 完成状态
console.log("下载完成(这里可以写文件下载好后解压安装逻辑)!");
}
} // 暂停状态
class DownloadPausedState extends State { constructor(download) {
super();
this._download = download;
} download() {
this._download.setState(this._download.getDownloadingState()); // 把状态设置成 正在下载中状态
console.log("继续下载(这里可以写接着往下操作的逻辑)!");
} pause() {
console.error("已经暂停了!");
} fail() {
this._download.setState(this._download.getDownloadedFailedState()); // 把状态设置成 失败状态
console.log("下载失败(这里可以写下载时出错的异常逻辑)!");
} finish() {
this._download.setState(this._download.getDownloadedState()); // 把状态设置成 完成状态
console.log("下载完成(这里可以写文件下载好后解压安装逻辑)!");
}
} // 下载完成状态
class DownloadedState extends State { constructor(download) {
super();
this._download = download;
} download() {
this._download.setState(this._download.getDownloadingState()); // 把状态设置成 正在下载状态
console.log("文件重新下载中(这里可以安装逻辑)");
} pause() {
console.error("文件已完成,无需暂停!");
} fail() {
console.error("文件已完成,不可能失败!");
} finish() {
console.error("文件已完成!");
}
} // 下载失败状态
class DownloadFailedState extends State { constructor(download) {
super();
this._download = download;
} download() {
this._download.setState(this._download.getDownloadingState()); // 把状态设置成 正在下载状态
console.log("下载失败，重新下载中!");
} pause() {
console.error("下载失败，怎能暂停!");
} fail() {
console.error("已经下载失败啦!");
} finish() {
console.error("下载已经失败了，怎么会完成呢!");
}
} class Download {
constructor() {
this.state = new ReadyState(this); // 最开始的时候就是准备状态
} setState(state) {
this.state = state;
} download() {
this.state.download();
} pause() {
this.state.pause();
} fail() {
this.state.fail();
} finish() {
this.state.finish();
} getReadyState() {
return new ReadyState(this);
} getDownloadingState() {
return new DownloadingState(this);
} getDownloadPausedState() {
return new DownloadPausedState(this);
} getDownloadedState() {
return new DownloadedState(this);
} getDownloadedFailedState() {
return new DownloadFailedState(this);
}
} // 安装基类状态
class InstallState { // 预安装(解压或者其他操作)
preInstall() {
throw new Error("子类必须要重写该方法!");
} // 预安装失败
preInstallFail() {
throw new Error("子类必须要重写该方法!");
} // 预安装完成
preInstallFinish() {
throw new Error("子类必须要重写该方法!");
} // 安装
install() {
throw new Error("子类必须要重写该方法!");
} // 安装失败
installFail() {
throw new Error("子类必须要重写该方法!");
} // 安装完成
installFinish() {
throw new Error("子类必须要重写该方法!");
}
} // 准备预安装状态
class ReadyPreInstallState extends InstallState { constructor(install) {
super();
this._install = install;
} // 开始预安装
preInstall() {
this._install.setInstallState(this._install.getPreInstallingState()); // 把状态设置成 正在下载状态
console.log("开始预安装!");
} install() {
console.error("还没开始预安装怎么直接安装呢!");
} installFail() {
console.error("还没开始预安装不可能安装失败!");
} installFinish() {
console.error("还没开始预安装不会安装结束啊!");
} // 预安装失败
preInstallFail() {
console.log("还没开始预安装呢, 怎么会预安装失败呢!");
} // 预安装完成
preInstallFinish() {
console.log("还没开始预安装呢, 怎么会安装成功!");
} } // 正在预安装状态
class PreInstallingState extends InstallState { constructor(install) {
super();
this._install = install;
} preInstall() {
console.error("已经在预安装了!");
} install() {
console.error("等待预安装完成!");
} installFail() {
console.error("预安装还没安装，怎么知晓会失败呢!");
} installFinish() {
console.error("预安装还没安装，怎么知晓会成功呢！");
} // 预安装失败
preInstallFail() {
this._install.setInstallState(this._install.getPreInstallFailedState()); // 把状态设置成 预安装失败状态
console.log("预安装失败(这里可以写预安装时出错的异常逻辑)！");
} // 预安装完成
preInstallFinish() {
this._install.setInstallState(this._install.getPreInstallFinishState()); // 把状态设置成 预安装成功状态
console.log("预安装成功(这里可以写安装的代码啦)!");
}
} // 预安装失败状态
class PreInstallFailedState extends InstallState { constructor(install) {
super();
this._install = install;
} preInstall() {
this._install.setInstallState(this._install.getPreInstallingState()); // 把状态设置成 正在预安装状态
console.log("重新预安装中!");
} install() {
console.error("预安装都失败了,还安装个毛线啊!");
} installFail() {
console.error("预安装已经安装失败了");
} installFinish() {
console.error("预安装已经安装失败了，怎么会成功呢!");
} // 预安装失败
preInstallFail() {
console.log("预安装已经失败了！");
} // 预安装完成
preInstallFinish() {
console.log("预安装已经失败了, 不会成功的!");
}
} // 预安装成功状态
class PreInstallFinishState extends InstallState { constructor(install) {
super();
this._install = install;
} preInstall() {
this._install.setInstallState(this._install.getPreInstallingState()); // 把状态设置成 正在预安装状态
console.log("重新预安装中!");
} install() {
this._install.setInstallState(this._install.getInstallingState()); // 把状态设置成 正在安装状态
console.log("开始安装!");
} installFail() {
console.error("还没开始安装,怎么会失败!");
} installFinish() {
console.error("还没开始安装，怎么会完成呢!");
} // 预安装失败
preInstallFail() {
console.log("预安装已经成功了，怎么会失败呢！");
} // 预安装完成
preInstallFinish() {
console.log("预安装已经成功了!");
}
} // 正在安装状态
class InstallingState extends InstallState { constructor(install) {
super();
this._install = install;
} preInstall() {
console.error("安装都开始了, 说明预安装已经好了!");
} install() {
console.error("已经在在安装中了!");
} installFail() {
this._install.setInstallState(this._install.getInstallFailedState()); // 把状态设置成 安装失败状态
console.log("安装失败(这里可以写预安装时出错的异常逻辑)！");
} installFinish() {
this._install.setInstallState(this._install.getInstallFinishState()); // 把状态设置成 安装成功状态
console.log("安装成功(这里可以写安装的代码啦)!");
} // 预安装失败
preInstallFail() {
console.error("安装都开始了, 说明预安装已经好了，则不会安装失败！");
} // 预安装完成
preInstallFinish() {
console.error("安装都开始了, 说明预安装已经好了！");
}
} // 安装失败状态
class InstallFailedState extends InstallState { constructor(install) {
super();
this._install = install;
} preInstall() {
console.log("安装失败了，只能重新安装，不要调用我预安装！");
} install() {
this._install.setInstallState(this._install.getInstallingState()); // 把状态设置成 安装状态
console.log("重新安装!");
} installFail() {
console.error("已经安装失败了，不要调用我");
} installFinish() {
console.error("已经安装失败了，自然不会成功的!");
} // 预安装失败
preInstallFail() {
console.error("你安装失败和我预安装失败有毛的关系,点击安装试试去！");
} // 预安装完成
preInstallFinish() {
console.error("你安装失败和我预安装成功有毛的关系,点击安装试试去！");
}
} // 安装成功状态
class InstallFinishState extends InstallState { constructor(install) {
super();
this._install = install;
} preInstall() {
console.log("安装都成功了，不要调用我预安装！");
} install() {
this._install.setInstallState(this._install.getInstallingState()); // 把状态设置成 安装状态
console.log("重新安装!");
} installFail() {
console.error("已经安装成功，怎么会失败呢");
} installFinish() {
console.error("已经安装成功，就不用再调用成功方法了!");
} // 预安装失败
preInstallFail() {
console.error("安装都成功了，找我预安装失败也没用啊！");
} // 预安装完成
preInstallFinish() {
console.error("安装都成功了，找我预安装完成也没用啊！");
}
} class Install { constructor() {
this.installState = new ReadyPreInstallState(this); // 最开始的时候就是准备状态
} setInstallState(state) {
this.installState = state;
} preInstall() {
this.installState.preInstall();
} install() {
this.installState.install();
} installFail() {
this.installState.installFail();
} installFinish() {
this.installState.installFinish();
} // 预安装失败
preInstallFail() {
this.installState.preInstallFail();
} // 预安装完成
preInstallFinish() {
this.installState.preInstallFinish();
} // 获取准备预安装状态
getReadyPreInstallState() {
return new ReadyPreInstallState(this);
} // 获取正在预安装状态
getPreInstallingState() {
return new PreInstallingState(this);
} // 获取预安装失败状态
getPreInstallFailedState() {
return new PreInstallFailedState(this);
} // 获取预安装成功状态
getPreInstallFinishState() {
return new PreInstallFinishState(this);
} // 获取正在安装状态
getInstallingState() {
return new InstallingState(this);
} // 获取安装成功状态
getInstallFinishState() {
return new InstallFinishState(this);
} // 获取安装失败状态
getInstallFailedState() {
return new InstallFailedState(this);
}
} class DownAndInstall {
constructor() {
this.state = new ReadyState(this); // 最开始的时候就是准备状态
this.installState = new ReadyPreInstallState(this); // 最开始的时候就是准备状态
} // 设置下载状态
setState(state) {
this.state = state;
} // 下载
download() {
this.state.download();
} // 暂停
pause() {
this.state.pause();
} // 失败
fail() {
this.state.fail();
} // 完成
finish() {
this.state.finish();
} // 以下是获取下载状态 getReadyState() {
return new ReadyState(this);
} getDownloadingState() {
return new DownloadingState(this);
} getDownloadPausedState() {
return new DownloadPausedState(this);
} getDownloadedState() {
return new DownloadedState(this);
} getDownloadedFailedState() {
return new DownloadFailedState(this);
} // 设置安装状态
setInstallState(state) {
this.installState = state;
} // 预安装
preInstall() {
this.installState.preInstall();
} // 安装
install() {
this.installState.install();
} // 安装失败
installFail() {
this.installState.installFail();
} // 安装成功
installFinish() {
this.installState.installFinish();
} // 预安装失败
preInstallFail() {
this.installState.preInstallFail();
} // 预安装完成
preInstallFinish() {
this.installState.preInstallFinish();
} // 以下是获取安装状态方法 // 获取准备预安装状态
getReadyPreInstallState() {
return new ReadyPreInstallState(this);
} // 获取正在预安装状态
getPreInstallingState() {
return new PreInstallingState(this);
} // 获取预安装失败状态
getPreInstallFailedState() {
return new PreInstallFailedState(this);
} // 获取预安装成功状态
getPreInstallFinishState() {
return new PreInstallFinishState(this);
} // 获取正在安装状态
getInstallingState() {
return new InstallingState(this);
} // 获取安装成功状态
getInstallFinishState() {
return new InstallFinishState(this);
} // 获取安装失败状态
getInstallFailedState() {
return new InstallFailedState(this);
} } var oDownload = new Download();
var ins = new Install(); function $(id) {
return document.querySelector(id);
} $("#download_button").onclick = function() {
oDownload.download();
} $("#pause_button").onclick = function() {
oDownload.pause();
} $("#resume_button").onclick = function() {
oDownload.download();
} $("#preins").onclick = function() {
ins.preInstall();
}
$("#preinsf").onclick = function() {
ins.preInstallFail();
}
$("#preinss").onclick = function() {
ins.preInstallFinish();
}
$("#ins").onclick = function() {
ins.install();
}
$("#insf").onclick = function() {
ins.installFail();
}
$("#inss").onclick = function() {
ins.installFinish();
} // 模拟软件安装
var downAndInstall = new DownAndInstall();
var dom = $("#soft") dom.onclick = function() {
dom.value = '文件下载中';
downAndInstall.download();
setTimeout(function() {
if (0) {
downAndInstall.fail();
dom.value = '文件下载失败！';
} else {
downAndInstall.finish();
dom.value = '文件下载成功！';
downAndInstall.preInstall();
dom.value = '文件预安装中！';
setTimeout(() => {
if(0) {
downAndInstall.preInstallFail();
dom.value = '文件预安装失败！';
} else {
downAndInstall.preInstallFinish();
dom.value = '文件预安装成功！';
downAndInstall.install();
dom.value = '文件正式安装中！';
setTimeout(() => {
if (0) {
downAndInstall.installFail();
dom.value = '文件正式安装失败！';
} else {
downAndInstall.installFinish();
dom.value = '文件正式安装成功！';
}; }, 5000); }; }, 3000);
}; }, 5000);
} </script> </body>
</html>
JavaScript设计模式 - 状态模式的更多相关文章
- JavaScript设计模式——状态模式
状态和行为: 所谓对象的状态,通常指的就是对象实例的属性的值:而行为指的就是对象的功能,再具体点说,行为大多可以对应到方法上. 状态模式的功能就是分离状态的行为,通过维护状态的变化,来调用不同状态对应 ...
- javascript设计模式--状态模式（State）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【设计模式】Javascript设计模式——状态模式（行为型）
注:这个模式是非常聪明的,很有点数学中组合的意思,现在,来看下这个模式是怎么个思想. 问题提出:假如某个操作有三种可能,分别为1,2,3,还可能是组合,比如先执行1,再执行2或者先执行2再执行3或者1 ...
- 14. 星际争霸之php设计模式--状态模式
题记==============================================================================本php设计模式专辑来源于博客(jymo ...
- JavaScript设计模式 - 代理模式
代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问 代理模式的用处(个人理解):为了保障当前对象的单一职责(相对独立性),而需要创建另一个对象来处理调用当前对象之前的一些逻辑以提高代码的效 ...
- [Head First设计模式]生活中学设计模式——状态模式
系列文章 [Head First设计模式]山西面馆中的设计模式——装饰者模式 [Head First设计模式]山西面馆中的设计模式——观察者模式 [Head First设计模式]山西面馆中的设计模式— ...
- javascript 设计模式-----策略模式
在<javascript设计模式>中,作者并没有向我们介绍策略模式,然而它却是一种在开发中十分常见的设计模式.最常见的就是当我们遇到一个复杂的表单验证的时候,常常需要编写一大段的if和el ...
- JAVA 设计模式 状态模式
用途 状态模式 (State) 当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类. 状态模式是一种行为型模式. 结构
- 深入浅出设计模式——状态模式（State Pattern）
模式动机 在很多情况下,一个对象的行为取决于一个或多个动态变化的属性,这样的属性叫做状态,这样的对象叫做有状态的 (stateful)对象,这样的对象状态是从事先定义好的一系列值中取出的.当一个这样的 ...
随机推荐
- HDU6191(01字典树启发式合并)
Query on A Tree Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 132768/132768 K (Java/Othe ...
- virtualenv的使用及pip常用命令
一.virtualenv 1.用途: virtualenv------用来建立一个虚拟的python环境,一个专属于项目的python环境.用virtualenv 来保持一个干净的环境非常有用. 例如 ...
- JS闭包和引用
简介 Javascript 中一个最重要的特性就是闭包的使用.因为闭包的使用,当前作用域总可以访问外部的作用域.因为Javascript 没有块级作用域,只有函数作用域,所以闭包的使用与函数是紧密相关 ...
- React中props和state相同点和不同点
朋友们,我想死你们了,最近这几天忙着和病魔作斗争所以没怎么写博客,今天感觉好点了,赶紧来写一波,就是这木敬业. 今天我们来讨论讨论props和state相同点和不同点 首先我来概要说明一下这两者 pr ...
- react+antd分页 实现分页及页面刷新时回到刷新前的page
antd框架地址:https://ant.design/index-cn 利用antdUI框架做了个分页,其他功能都没问题,但是页面跳转后刷新会回到第一页,经过学习,在组件里增加了hash值,详情请看 ...
- Android常用数据类型转换
String转int.float.double.byte[].bitmap Int i = Integer.parseInt(str); Float f = Float.parseFloat(str) ...
- 使用mysqladmin extended-status查看MySQL的运行状态脚本
一个好用的使用mysqladmin extended-status查看MySQL的运行状态脚本: mysqladmin -P3306 -uroot -p -h127. -r -i extended-s ...
- 进入正在运行的 docker 容器（docker container）
在使用 docker 容器的时候,我们总会想看看容器内部长什么样子:我们使用 docker exec 命令可以满足我们的期望: ➜ compose docker exec --help Usage: ...
- SQL取最大值编码(自动编码)
SQL取最大值编码(自动编码) 用途 : 使用SQL语法做出自动编码效果,例如将单号自动+1后,产生该笔单号 Table说明 SQL语法 SELECT 'A'+REPLICATE('0',7-len( ...
- Linux防火墙基础与编写防火墙规则
Iptables采用了表和链的分层结构,每个规则表相当于内核空间的一个容器,根据规则集的不同用途划分为默认的四个表,raw表,mangle表,nat表,filter表,每个表容器内包括不同的规则链,根 ...