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)对象,这样的对象状态是从事先定义好的一系列值中取出的.当一个这样的 ...
随机推荐
- java动态代理--一个简单的例子
这几天看视频看到了java的动态代理,这里写一个小例子.在写例子的时候发现:认为自己会了,和能写出来真不是一个概念.还是要多写代码,然后写博客再深入一些,费曼学习法--教,是最好的学. 1.什么是动态 ...
- Flask wtforms实现简单的登录注册
目录结构 视图 # -*- coding:utf-8 -*- # Author : Niuli # Data : 2019-02-27 19:26 from flask import render_t ...
- lnmp首次安装重置mysql密码
第一种方法:一键修改LNMP环境下MYSQL数据库密码脚本 一键脚本肯定是非常方便.具体执行以下命令: wget http://soft.vpser.net/lnmp/ext/reset_mysql_ ...
- Ashampoo Driver Updater - 阿香婆驱动安装
Ashampoo Driver Updater 让系统更完美 – 永远有最新的驱动,出错或旧的驱动是每个电脑系统的恶梦.时不时,驱动会丢失或不可避免的过时.Ashampoo Driver Update ...
- 【工具相关】Web-Sublime Text2-安装 Package Control
一,打开Sublime text2---->Preferences--->若Package Settings,Package Control,没有的话,就需要安装Package Contr ...
- python之继承
1.经典MRO : 树形结构的深度遍历优先 - > 树形结构遍历 class A: pass class B(A): pass class C(A): pass class D(B, C): p ...
- Stackoverflow 珠玑：C#封装重试指定次数的功能
最近写的一个 .NET Core 爬虫里用到了需要多次重试的功能,本着无脑输出的精神,google 了一下,还真给我找到了: public static T Retry<T, TExceptio ...
- python自动化开发-6-面向对象编程
面向对象编程 面向对象的特性 封装:把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏. 继承:面向对象编程 (OOP) 语言的一个主要功能就是“ ...
- WANem广域网环境模拟
背景 在测试过程中,往往需要模拟网络环境较差情况下,体验情况,故引入广域网模拟工具辅助测试 安装WANem 步骤1:光盘引导WANem镜像: 步骤2:启动(或者新建虚拟机——选择other insal ...
- linux上用newman+postman进行自动化测试
第一步:导出postman文件 Postman就是根据collection和enviroment这两个json文件来自动化运行的! 所以从Postman中导出collection和enviroment ...