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 命令模式状态模式的资料请关注我们其它相关文章！
相关推荐
-
JavaScript设计模式之命令模式实例分析
本文实例讲述了JavaScript设计模式之命令模式.分享给大家供大家参考,具体如下: 第一,命令模式: (1)用于消除调用者和接收者之间直接的耦合的模式,并且可以对(调用这个过程进行留痕操作) (2)真的不要乱用这个模式,以为他使你简单调用写法变得非常的复杂和有些难以理解. (3)你的业务出现了 (回退操作)(重做操作)的需求的时候你就要考虑使用这个模式了. 命令的原理: 一种情况为发出者直接作用于执行者,这样耦合度很高,另外一种情况为,在发出者和执行者之间增加一个用存储命令的命令访问库也即命
-
轻松掌握JavaScript状态模式
状态模式 状态模式(State)允许一个对象在其内部状态改变的时候改变它的行为,对象看起来似乎修改了它的类. 状态模式的使用场景也特别明确,有如下两点: 1.一个对象的行为取决于它的状态,并且它必须在运行时刻根据状态改变它的行为.(有些对象通常会有好几个状态,在每个状态都只可以做当前状态才可以做的事情,而不能做其它状态能做的事儿) 2.一个操作中含有大量的分支语句,而且这些分支语句依赖于该对象的状态.状态通常为一个或多个枚举常量的表示. 一.有限状态机 1.状态总数(state)是有限的.
-
javascript设计模式 – 状态模式原理与用法实例分析
本文实例讲述了javascript设计模式 – 状态模式原理与用法.分享给大家供大家参考,具体如下: 介绍:状态模式用于解决系统中复杂对象的状态转换以及不同状态下行为的封装问题.状态模式将一个对象的状态从该对象中分离出来,使得对象状态可以灵活变化. 定义:允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类,其别名为状态对象,状态模式是一种对象行为型模式. 场景:在很多情况下我们的页面需要做一些状态判断,是否注册,是否登录,剩余金额是否大于500等等,我们通常是在组件中通过if
-
JavaScript命令模式原理与用法实例详解
本文实例讲述了JavaScript命令模式原理与用法.分享给大家供大家参考,具体如下: 第一,命令模式: (1)用于消除调用者和接收者之间直接的耦合的模式,并且可以对(调用这个过程进行留痕操作) (2)真的不要乱用这个模式,以为他使你简单调用写法变得非常的复杂和有些难以理解. (3)你的业务出现了 (回退操作)(重做操作)的需求的时候你就要考虑使用这个模式了. 命令的原理: 一种情况为发出者直接作用于执行者,这样耦合度很高,另外一种情况为,在发出者和执行者之间增加一个用存储命令的命令访问库也即命
-
JS设计模式之状态模式概念与用法分析
本文实例讲述了JS设计模式之状态模式概念与用法.分享给大家供大家参考,具体如下: 1. 概述 当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类. 2. 解决的问题 主要解决的是当控制一个对象状态转换的条件表达式过于复杂时的情况.把状态的判断逻辑转移到表示不同的一系列类当中,可以把复杂的逻辑判断简单化. function Context( _state ) { this.state = _state; this.request = function() { this.stat
-
javascript设计模式 – 命令模式原理与用法实例分析
本文实例讲述了javascript设计模式 – 命令模式原理与用法.分享给大家供大家参考,具体如下: 介绍:命令模式是一种数据驱动的设计模式,将请求以命令的形式包裹在对象中,并传递给调用对象.命令模式的核心在于引入了命令类,通过命令类来降低发送者和接受者的耦合度. 定义:将一个请求封装为一个对象,从而可用不同的请求对客户进行参数化:对请求排队或者记录请求日志,以及支持可撤销的操作.命令模式是一种对象行为型模式,其别名为动作(Action)模式或事务(Transaction)模式. 场景:我们通过
-
javascript设计模式之对象工厂函数与构造函数详解
下面通过文字详解加代码分析的方式给大家分享下javascript设计模式之对象工厂函数与构造函数的相关知识. 概述使用对象字面量,或者向空对象中动态地添加新成员,是最简单易用的对象创建方法.然而,除了这两种常用的对象创建方式,JavaScript还提供了其他方法创建对象.1).使用工厂函数创建对象我们可以编写一个函数,此函数的功能就是创建对象,可将其. 概述 使用对象字面量,或者向空对象中动态地添加新成员,是最简单易用的对象创建方法. 然而,除了这两种常用的对象创建方式,JavaScript还提
-
JavaScript块级作用域绑定以及状态提升详解
目录 前言 作用域/执行上下文 var声明 块级声明 不声明的变量 1.不使用关键字声明变量 2.使用var声明的变量 var声明和块级声明的区别 全局作用域绑定 状态提升 块级绑定的最佳实践 函数声明提升 总结 前言 在ES6之前,JavaScript只有经典的var声明,这给开发者带来了很多的困扰.在ES6出现后,又增加了let和const关键字的声明方式.这里会讲有关变量声明,作用域,状态提升相关知识. 作用域/执行上下文 在JavaScript的世界里,作用域可以分为三种,分别是全局作用
-
JavaScript设计模式之命令模式和状态模式详解
目录 命令模式 命令模式介绍 代码实现 状态模式 状态模式介绍 代码实现 小结 命令模式 命令模式介绍 命令模式(Command)的定义是:用于将一个请求封装成一个对象,从而使你可用不同的请求对客户进行参数化:对请求排队或者记录请求日志,以及执行可撤销的操作. 也就是说改模式旨在将函数的调用.请求和操作封装成一个单一的对象,然后对这个对象进行一系列的处理.此外,可以通过调用实现具体函数的对象来解耦命令对象与接收对象. 代码实现 <!DOCTYPE html> <html lang=&qu
-
JavaScript设计模式之命令模式
命令模式是JavaScript设计模式中行为型的一种设计模式: 定义:向某些对象发送请求,但是并不知道被请求的操作具体是什么,所以我们希望以一种松耦合的方式来设计程序,使得请求发送者和接收者之间能够消除彼此之间的耦合关系:而我们的这种松耦合的方式就是命令模式: 白话解释:假如你是你们公司研发部门团队leader,这时你们领导分布给你一个任务,你粗略的看了一下,很简单的需求比较容易实现:而你作为团队leader,每天肯定会有很多事情,所以你准备把需求直接丢给组员去开发和实现:领导根本不在意是你做的
-
PHP设计模式之状态模式定义与用法详解
本文实例讲述了PHP设计模式之状态模式定义与用法.分享给大家供大家参考,具体如下: 什么是状态设计模式 当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类. 状态模式主要解决的是当控制一个对象状态的条件表达式过于复杂时的情况.把状态的判断逻辑转移到表示不同状态的一系列类中,可以把复杂的判断逻辑简化. 什么时候使用状态模式 对象中频繁改变非常依赖于条件语句. 就其自身来说, 条件语句本身没有什么问题(如switch语句或带else子句的语句),不过, 如果选项太多, 以到程序开
-
JavaScript设计模式之观察者模式与发布订阅模式详解
本文实例讲述了JavaScript设计模式之观察者模式与发布订阅模式.分享给大家供大家参考,具体如下: 学习了一段时间设计模式,当学到观察者模式和发布订阅模式的时候遇到了很大的问题,这两个模式有点类似,有点傻傻分不清楚,博客起因如此,开始对观察者和发布订阅开始了Google之旅.对整个学习过程做一个简单的记录. 观察者模式 当对象间存在一对多关系时,则使用观察者模式(Observer Pattern).比如,当一个对象被修改时,则会自动通知它的依赖对象.观察者模式属于行为型模式.在观察模式中共存
-
23种设计模式（22）java状态模式
一.概述 当系统中某个对象存在多个状态,这些状态之间可以进行转换,而且对象在不同状态下行为不相同时可以使用状态模式.状态模式将一个对象的状态从该对象中分离出来,封装到专门的状态类中,使得对象状态可以灵活变化.状态模式是一种对象行为型模式. 二.适用场景 用于解决系统中复杂对象的多种状态转换以及不同状态下行为的封装问题.简单说就是处理对象的多种状态及其相互转换. 三.UML类图 四.参与者 1).AbstractState(抽象状态类): 在抽象状态类中定义申明了不同状态下的行为抽象方法,而由子类
-
JavaScript设计模式之原型模式和适配器模式示例详解
目录 原型模式 原型模式介绍 代码实现 适配器模式 适配器模式介绍 代码实现 小结 原型模式 原型模式介绍 原型模式是指原型实例指向创建对象的种类,并通过拷贝这些原型创建新的对象,是一种用来创建对象的模式,也就是创建一个对象作为另一个对象的prototype属性 实现原型模式是在ECMAScript5中,提出的Object.create方法,使用现有的对象来提供新创建的对象的__proto__. 代码实现 var lynkCoPrototype = { model: "领克", get
-
PHP设计模式之装饰器模式定义与用法详解
本文实例讲述了PHP设计模式之装饰器模式定义与用法.分享给大家供大家参考,具体如下: 什么是装饰器模式 作为一种结构型模式, 装饰器(Decorator)模式就是对一个已有结构增加"装饰". 适配器模式, 是为现在有结构增加的是一个适配器类,.将一个类的接口,转换成客户期望的另外一个接口.适配器让原本接口不兼容的类可以很好的合作. 装饰器模式是将一个对象包装起来以增强新的行为和责任.装饰器也称为包装器(类似于适配器) 有些设计设计模式包含一个抽象类,而且该抽象类还继承了另一个抽象类,这