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)对象,这样的对象状态是从事先定义好的一系列值中取出的.当一个这样的 ...
随机推荐
- css实现照片上传的加号框
css实现照片上传的加号框
- csharp:SMO run sql script
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- 元素的class和id问题
一个元素有且只能有1个id,且全文中此id只能出现在一个元素上 一个元素不能写多次class,比如 <div class="a" class="b"& ...
- centos 多个yum源，系统怎么选择
yum配置文件: /etc/yum.conf pkgpolicy:包的策略.一共有两个选项,newest和last,这个作用是如果你设置了多个repository,而同一软件在不同的repositor ...
- spark (java API) 在Intellij IDEA中开发并运行
概述:Spark 程序开发,调试和运行,intellij idea开发Spark java程序. 分两部分,第一部分基于intellij idea开发Spark实例程序并在intellij IDEA中 ...
- Jenkins 开启用户注册机制及用户权限设置
Jenkins 开启用户注册机制及用户权限设置 by:授客 QQ:1033553122 步骤 1. 系统管理-Configure Global Security 2. 设置
- Web API的参数、多版本和Filter
一.关于API的参数a) Web API在WebApiConfig.cs中配置了路由模板,默认为"api/{controller}/{id}",这与MVC路由模板的区别在于没有{a ...
- Vue CLI3 开启gzip压缩
gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度.html.js.css文件甚至json数据都可以用它压缩,可以减小60%以上的体积. webpack在打包时可以借助 compr ...
- bs4爬虫入门
# -*- coding: utf-8 -*- """ Created on Fri Nov 16 13:35:33 2018 @author: zhen "& ...
- ARC设置
XCode兼容ARC和非ARC代码的方法 在ARC开发模式下引用非ARC文件或库需进行如下操作以告诉编译器此代码需按照非ARC模式对待: XCode中项目文件->TARGETS->Comp ...