JavaScript设计模式之命令模式和状态模式详解
更新时间：2022年08月29日 17:01:33 作者：RiemannHypothesis
这篇文章主要为大家介绍了JavaScript设计模式之命令模式和状态模式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
命令模式
命令模式介绍
命令模式(Command)的定义是：用于将一个请求封装成一个对象，从而使你可用不同的请求对客户进行参数化；对请求排队或者记录请求日志，以及执行可撤销的操作。
也就是说改模式旨在将函数的调用、请求和操作封装成一个单一的对象，然后对这个对象进行一系列的处理。此外，可以通过调用实现具体函数的对象来解耦命令对象与接收对象。
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cmd-demo</title>
</head>
<body>
<div>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
</div>
<script>
var btn1 = document.getElementById('btn1')
var btn2 = document.getElementById('btn2')
// 定义一个命令发布者(执行者)的类
class Executor {
setCommand(btn, command) {
btn.onclick = function() {
command.execute()
}
}
}
// 定义一个命令接收者
class Menu {
refresh() {
console.log('刷新菜单')
}
addSubMenu() {
console.log('增加子菜单')
}
}
// 定义一个刷新菜单的命令对象的类
class RefreshMenu {
constructor(receiver) {
// 命令对象与接收者关联
this.receiver = receiver
}
// 暴露出统一的接口给命令发布者Executor
execute() {
this.receiver.refresh()
}
}
// 定义一个增加子菜单的命令对象的类
class AddSubMenu {
constructor(receiver) {
// 命令对象与接收者关联
this.receiver = receiver
}
// 暴露出统一的接口给命令发布者Executor
execute() {
this.receiver.addSubMenu()
}
}
var menu = new Menu()
var executor = new Executor()
var refreshMenu = new RefreshMenu(menu)
// 给按钮1添加刷新功能
executor.setCommand(btn1, refreshMenu)
var addSubMenu = new AddSubMenu(menu)
// 给按钮2添加增加子菜单功能
executor.setCommand(btn2, addSubMenu)
</script>
</body>
</html>
状态模式
状态模式介绍
状态模式（State）允许一个对象在其内部状态改变的时候改变它的行为，对象看起来似乎修改了它的类。
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>state-demo</title>
</head>
<body>
<button id="btn">开关</button>
<script>
// 定义一个关闭状态的类
class OffLightState {
constructor(light) {
this.light = light
}
// 每个类都需要这个方法，在不同状态下按都需要触发这个方法
pressBtn() {
this.light.setState(this.light.weekLightState)
console.log('开启弱光')
}
}
// 定义一个弱光状态的类
class WeekLightState {
constructor(light) {
this.light = light
}
pressBtn() {
this.light.setState(this.light.strongLightState)
console.log('开启强光')
}
}
// 定义一个强光状态的类
class StrongLightState {
constructor(light) {
this.light = light
}
pressBtn() {
this.light.setState(this.light.offLightState)
console.log('关闭电灯')
}
}
class Light {
constructor() {
this.offLightState = new OffLightState(this)
this.weekLightState = new WeekLightState(this)
this.strongLightState = new StrongLightState(this)
this.currentState = null
}
setState(newState) {
this.currentState = newState
}
init() {
this.currentState = this.offLightState
}
}
let light = new Light()
light.init()
var btn = document.getElementById('btn')
btn.onclick = function() {
light.currentState.pressBtn()
}
</script>
</body>
</html>
小结
- 通过定义不同的状态类，根据状态的改变而改变对象的行为，
- 不必把大量的逻辑都写在被操作对象的类中，而且容易增加新的状态
- 符合开放封闭原则
以上就是JavaScript设计模式之命令模式和状态模式详解的详细内容，更多关于JavaScript 命令模式状态模式的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了微信小程序页面传值实例分析的相关资料,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了微信小程序 地图定位简单实例的相关资料,并附实例代码及实现效果图，需要的朋友可以参考下2016-10-10
这篇文章主要介绍了 如何利用JavaScript写一个简单计算器，利用JavaScript写一个简单计算器算是一个简单的小练习吧，需要的小伙伴可以参考一下<BR>2021-11-11
这篇文章主要介绍了ES6继承和ES5继承，以及两个继承之间的差别，文中运用示例以及代码讲解的非常清晰，感兴趣的小伙伴可以参考一下2021-08-08
这篇文章主要为大家介绍了详解使用koa2完成Excel导入导出示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了JavaScript如何实现优先级队列，在计算机里，队列是一种先进先出的数据结构。就跟我们平时排队一样，先到的排在前面，前面的优先处理，下面我们就来看看在JavaScript里面的优先队列又当如何2021-12-12
这篇文章主要介绍了微信小程序 欢迎页面的制作含（源码下载）的相关资料,这里实现欢迎页面，开始做应用的时候都会用到，需要的朋友可以参考下2017-01-01
Qiankun Sentry 监控异常上报无法自动区分项目解决
这篇文章主要为大家介绍了Qiankun Sentry 监控异常上报无法自动区分项目解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了微信小程序 picker 组件详解及简单实例的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了详解微信小程序设置底部导航栏目方法的相关资料,需要的朋友可以参考下2017-06-06
最新评论