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)对象,这样的对象状态是从事先定义好的一系列值中取出的.当一个这样的 ...
随机推荐
- React Native中Mobx的使用
从今天开始我们来搞搞状态管理可否,这几天没怎么写博客,因为被病魔战胜了,tmd,突然的降温让我不知所措,大家最近注意安全,毕竟年底了,查的严,呸,大家注意保暖 特别声明:写该文只是写一下用MobX的思 ...
- ES6中Object.is方法比较两个值是否相等
Object.is: let obj={a:1,b:2}; Object.is(obj,obj);//true Object.is(obj,{obj});//false Object.is({},{} ...
- ionic 项目中，ng-bind-html会过滤掉内嵌样式的问题
一.引入$sce,转化一步即可 $scope.articlesdetail.info = $sce.trustAsHtml($scope.articlesdetail.info); 参考网址: htt ...
- SAP MM PIR里的Lower Limit & Upper Limit
SAP MM PIR里的Lower Limit & Upper Limit 在PIR的价格的detail数据里,有2个字段:Lower Limit和Upper Limit.在今天之前,笔者从未 ...
- 解决如下问题：You are using pip version 8.1.1, however version 18.0 is available. You should consider upgrading via the 'pip install --upgrade pip' command.
问题描述: 今天想学习一下TUM数据集RGBD-Benchmark工具的使用,利用python进行相关操作时,缺少一个第三方模块,于是打算用pip进行安装,便出现如下图所示的问题. 解决办法: 执行如 ...
- Web.config配置customErrors mode为Off后依然不显示具体错误的可能原因。
有时候我们的网站程序在本地运行没有问题,但在上传到远程服务器后则报错.这就需要我们了解具体错误,但IIS默认只显示统一的运行时错误,想要知道具体错误就需要配置Web.config中customErro ...
- SG Input 软件安全分析之fuzz
前言 前面介绍了通过静态读代码的方式去发现问题,这里介绍两种 fuzz 目标软件的方式. 相关文件 链接:https://pan.baidu.com/s/1l6BuuL-HPFdkFsVNOLpjUQ ...
- Android常用数据类型转换
String转int.float.double.byte[].bitmap Int i = Integer.parseInt(str); Float f = Float.parseFloat(str) ...
- Expo大作战(三十三)--expo sdk api之MapView（地图），MailComposer（磁力传感计），Lottie（动画）
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...
- VS2015 无法启动 IIS Express Web 服务器 解决方案
VS2015 IIS Express 无法启动Web 解决方案 [亲测已成功] 1.我的电脑—管理—事件查看器—Windows日志—应用程序: 详细信息会提示你:[模块 DLL C:\Program ...