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)对象,这样的对象状态是从事先定义好的一系列值中取出的.当一个这样的 ...
随机推荐
- 洛谷P4438 [HNOI/AHOI2018]道路(dp)
题意 题目链接 Sol 每当出题人想起他出的HNOI 2018 Day2T3,他都会激动的拍打着轮椅 读题比做题用时长系列... \(f[i][a][b]\)表示从根到\(i\)的路径上,有\(a\) ...
- 第三次web作业
em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸,最初是指字母M的宽度,故名em.现指的是字符宽度的倍数,用法类似百分比,如:0 ...
- Chrome调试本地文件无法使用window.opener对象进行窗口间值传递
今天在百度BAE上建了个应用,svn上传后发现页面间互调有些问题,几经查询发现: (1)IE下正常的window.opener.object1.object2页面间对象访问方法在Chrome下不能使用 ...
- [Android] 设置AlertDialog中按钮的可用(Enable)状态
弹出一个保存文件的对话框,要控制输入内容限制,同时内容为空时保存按钮不可用. 原文地址请保留http://www.cnblogs.com/rossoneri/p/4140184.html 直接上代码: ...
- postmortem报告
beta阶段与alpha阶段的比较 beta阶段与alpha阶段的比较主要从个人方面和团队方面进行总结. 以下是我们的队员对于自己在beta阶段的实践和alpha阶段的改进的总结. 成员林静雯认为,自 ...
- 06-OpenLDAP密码策略
阅读视图 openldap密码策略 OpenLDAP服务端定制密码策略 客户端策划策略实例 定义用户第一次登录就修改密码 问题排查手册 重点推荐官方文档 备注:本文依然承接系列文. 1. openld ...
- 洗礼灵魂，修炼python（29）--装饰器（1）—>利用经典案例解析装饰器概念
前提必备 不急着进入正题,在前面函数作用域那一章介绍了闭包,全局变量局部变量,这里再看几个简单的闭包案例: 1):不带参数 注意: 1.这里的name属性是每个函数都有的,可以反馈函数名 2.temp ...
- python第二十九天-----继续学习第三模块——前几天旅行去了
subprocess模块 import subprocess subprocess.getstatusoutput('dir')#接收字符串格式命令,返回元组形式,第1个元素是执行状态,第2个是命令结 ...
- C#异常--System.IO.FileLoadException:“混合模式程序集是针对“v2.0.50727”版的运行时生成的错误
异常信息: System.IO.FileLoadException:“混合模式程序集是针对“v2.0.50727”版的运行时生成的,在没有配置其他信息的情况下,无法在 4.0 运行时中加载该程序集.” ...
- Spring RestTemplate 中文乱码问题
1.原因 由于RestTemplate的默认构造方法初始化的StringHttpMessageConverter的默认字符集是ISO-8859-1,所以导致RestTemplate请求的响应内容会出现 ...