详解Javascript实践中的命令模式

定义

Encapsulate a request as an object, thereby letting you parameterize other objects with different requests, queue or log requests,and support undoable operations.“

「命令模式」将「请求」封装成对象,以便使用不同的请求、队列或者日志来参数化其他对象,同时支持可撤消的操作。

这里的「请求」的定义,并不是我们前端常说的「Ajax 请求」,而是一个「动作请求」,也就是发起一个行为。例如,通过遥控器关闭电视,这里的「关闭」就是一个请求。在命令模式中,我们将请求抽象成一个命令,这个命令是可复用的,它只关心它的接受者(电视);而对于动作的发起者(遥控器)来说,它只关心它所支持的命令有哪些,而不关心这些命令具体是做什么的。

结构

命令模式的类图如下:

在该类图中,我们看到五个角色:

  • Client - 创建 Concrete Command 与 Receiver(应用层)。
  • Invoker - 命令的发出者,通常会持有命令对象,可以持有很多的命令对象。
  • Receiver - 命令接收者,真正执行命令的对象。任何类都可能成为一个接收者,只要它能够实现命令要求实现的相应功能。
  • Command - 命令接口。
  • ConcreteCommand - 命令接口的实现。

Reciver 与 Invoker 没有耦合,当需要拓展功能时,通过新增 Command,因此命令模式符合开闭原则。

实例

自定义快捷键

自定义快捷键是一个编辑器的最基本功能。通过命令模式,我们可以写出一个将键位与键位逻辑解耦的结构。

interface Command {
    exec():void
}

type Keymap = { [key:string]: Command }
class Hotkey {
    keymap: Keymap = {}

    constructor(keymap: Keymap) {
        this.keymap = keymap
    }

    call(e: KeyboardEvent) {
        const prefix = e.ctrlKey ? 'ctrl+' : ''
        const key = prefix + e.key
        this.dispatch(key)
    }

    dispatch(key: string) {
        this.keymap[key].exec()
    }
}

class CopyCommand implements Command {
    constructor(clipboard: any) {}
    exec() {}
}

class CutCommand implements Command {
    constructor(clipboard: any) {}
    exec() {}
}

class PasteCommand implements Command {
    constructor(clipboard: any) {}
    exec() {}
}

const clipboard = { data: '' }
const keymap = {
    'ctrl+x': new CutCommand(clipboard),
    'ctrl+c': new CopyCommand(clipboard),
    'ctrl+v': new PasteCommand(clipboard)
}
const hotkey = new Hotkey(keymap)

document.onkeydown = (e) => {
    hotkey.call(e)
}

在本例中,hotkey是 Invoker,clipboard是 Receiver。当我们需要修改已有的 keymap 时,只需要新增或替换已有的key或Command即可。

是不是觉得这个写法似曾相识?没错Redux 也是应用了命令模式,Store 相当于 Receiver,Action 相当于 Command,Dispatch 相当于 Invoker。

撤销与重做

基于命令模式,我们可以很容易拓展,使它支持撤销与重做。

interface IPerson {
    moveTo(x: number, y: number): void
}

class Person implements Person {
    x = 0
    y = 0

    moveTo(x: number, y: number) {
        this.x = x
        this.y = y
    }
}

interface Command {
    exec(): void
    undo(): void
}

class MoveCommand implements Command {
    prevX = 0
    prevY = 0

    person: Person

    constructor(person: Person) {
        this.person = person
    }

    exec() {
        this.prevX = this.person.x
        this.prevY = this.person.y
        this.person.moveTo(this.prevX++, this.prevY++)
    }

    undo() {
        this.person.moveTo(this.prevX, this.prevY)
    }
}

const ezio = new Person()
const moveCommand = new MoveCommand(ezio)
moveCommand.exec()
console.log(ezio.x, ezio.y)
moveCommand.undo()
console.log(ezio.x, ezio.y)

录制与回放

想想我们在游戏中的录制与回放功能,如果将角色的每个动作都作为一个命令的话,那么在录制时就能够得到一连串的命令队列。

class Control {
    commands: Command[] = []

    exec(command) {
        this.commands.push(command)
        command.exec(this.person)
    }
}

const ezio = new Person()
const control = new Control()
control.exec(new MoveCommand(ezio))
control.exec(new MoveCommand(ezio))

console.log(control.commands)

当我们有了命令队列,我们又能够很容易得进行多次的撤销和重做,实现一个命令的历史记录。只需要移动当前命令队列的指针即可。

class CommandHistory {
    commands: Command[] = []

    index = 0

    get currentCommand() {
        return this.commands[index]
    }

    constructor(commands: Command[]) {
        this.commands = commands
    }

    redo() {
        this.index++
        this.currentCommand.exec()
    }

    undo() {
        this.currentCommand.undo()
        this.index--
    }
}

同时,如果我们将命令序列化成一个对象,它便可以用于保存与传递。这样我们将它发送到远程计算机,就能实现远程控制ezio移动的功能。

[{
    type: 'move',
    x: 1,
    y: 1,
}, {
    type: 'move',
    x: 2,
    y: 2,
}]

宏命令

对Command进行一些简单的处理就能够将已有的命令组合起来执行,将其变成一个宏命令。

class BatchedCommand implements Command {
    commands = []

    constructor(commands) {
        this.commands = commands
    }

    exec() {
        this.commands.forEach(command => command.exec())
    }
}

const batchedMoveCommand = new BatchedCommand([
    new MoveCommand(ezio),
    new SitCommand(ezio),
])

batchedMoveCommand.exec()

总结

通过以上几个例子,我们可以看出命令模式有一下几个特点:

  • 低耦合,彻底消除了接受者与调用者之间的耦合。
  • 易拓展,只需要增加新的命令便可拓展出新功能。
  • 支持序列化,易于实现保存与传递。
  • 容易导致 Command 类庞大。

以上就是详解Javascript实践中的命令模式的详细内容,更多关于Javascript命令模式的资料请关注我们其它相关文章!

时间: 2021-05-03

怎样用JavaScript实现原型模式

概述 原型模式是指原型实例指向创建对象的种类,并通过拷贝这些原型创建新的对象,是一种用来创建对象的模式,也就是创建一个对象作为另一个对象的prototype属性: prototype警告:学习了解原型模式前需先学习原型.原型链.prototype.__proto__.constructor等知识: 实现原型模式 ES5中的API:Object.create(prototype, optionalDescriptorObjects) Object.create()方法接收两个参数:第一个参数是__

JS设计模式之命令模式概念与用法分析

本文实例讲述了JS设计模式之命令模式概念与用法.分享给大家供大家参考,具体如下: 客户创建命令:调用者执行该命令:接收者在命令执行时执行相应操作 简单命令对象一般用来消除二个对象(调用者和接收者)之间的耦合,而复杂的命令对象则一般用来封装不可分的或事务性的指令. 命令模式的主要用途是把调用对象(用户界面.API和代理等)与实现操作的对象隔离开.凡是两个对象间互动方式需要有更高的模块化程度时都可以用到这种模式. 命令的意思是用一个简单方法或函数去执行和这个命令相关的实际操作.就如同用遥控器打开电视

JavaScript设计模式经典之命令模式

一.命令模式概念 命令模式(Command)的定义是:用来对方法调用进行参数化处理和传送,经过这样处理过的方法调用可以在任何需要的时候执行.也就是说该模式旨在将函数的调用.请求和操作封装成一个单一的对象,然后对这个对象进行一些列的处理.他也可以用来消除调用操作的对象和实现操作的对象之间的耦合.这为各种具体的类的更换带来了极大的灵活性. 二.命令模式的作用和注意事项 模式作用: 1.将函数的封装.请求.调用结合为一体 2.调用具体的函数解耦命令对象与接收对象 3.提高程序模块化的灵活性 注意事项:

JavaScript命令模式原理与用法实例详解

本文实例讲述了JavaScript命令模式原理与用法.分享给大家供大家参考,具体如下: 第一,命令模式: (1)用于消除调用者和接收者之间直接的耦合的模式,并且可以对(调用这个过程进行留痕操作) (2)真的不要乱用这个模式,以为他使你简单调用写法变得非常的复杂和有些难以理解. (3)你的业务出现了 (回退操作)(重做操作)的需求的时候你就要考虑使用这个模式了. 命令的原理: 一种情况为发出者直接作用于执行者,这样耦合度很高,另外一种情况为,在发出者和执行者之间增加一个用存储命令的命令访问库也即命

JavaScript设计模式之命令模式实例分析

本文实例讲述了JavaScript设计模式之命令模式.分享给大家供大家参考,具体如下: 第一,命令模式: (1)用于消除调用者和接收者之间直接的耦合的模式,并且可以对(调用这个过程进行留痕操作) (2)真的不要乱用这个模式,以为他使你简单调用写法变得非常的复杂和有些难以理解. (3)你的业务出现了 (回退操作)(重做操作)的需求的时候你就要考虑使用这个模式了. 命令的原理: 一种情况为发出者直接作用于执行者,这样耦合度很高,另外一种情况为,在发出者和执行者之间增加一个用存储命令的命令访问库也即命

JavaScript设计模式之命令模式

命令模式是JavaScript设计模式中行为型的一种设计模式: 定义:向某些对象发送请求,但是并不知道被请求的操作具体是什么,所以我们希望以一种松耦合的方式来设计程序,使得请求发送者和接收者之间能够消除彼此之间的耦合关系:而我们的这种松耦合的方式就是命令模式: 白话解释:假如你是你们公司研发部门团队leader,这时你们领导分布给你一个任务,你粗略的看了一下,很简单的需求比较容易实现:而你作为团队leader,每天肯定会有很多事情,所以你准备把需求直接丢给组员去开发和实现:领导根本不在意是你做的

怎样用JavaScript实现观察者模式

概述 观察者模式又被称为发布-订阅模式,是设计模式中的一种行为型模式: 定义: 观察者模式定义了一种一对多的对象依赖关系,当被依赖的对象的状态发生了改变,所有依赖它的对象都会得到通知: 白话解释: 假如你去苹果专卖店买最新款的iphone11,因为iphone11刚出来不久,正处旺季,供货不足:当你去专卖店的时候,店员告诉你暂时没货了,但是你可以留下你的联系方式,如果货到了,会第一时间通知:当然你肯定不会每天都去专卖店问iphone11到货没有,也不会天天给专卖店打电话,因为你有你自己的工作和生

javascript设计模式 – 命令模式原理与用法实例分析

本文实例讲述了javascript设计模式 – 命令模式原理与用法.分享给大家供大家参考,具体如下: 介绍:命令模式是一种数据驱动的设计模式,将请求以命令的形式包裹在对象中,并传递给调用对象.命令模式的核心在于引入了命令类,通过命令类来降低发送者和接受者的耦合度. 定义:将一个请求封装为一个对象,从而可用不同的请求对客户进行参数化:对请求排队或者记录请求日志,以及支持可撤销的操作.命令模式是一种对象行为型模式,其别名为动作(Action)模式或事务(Transaction)模式. 场景:我们通过

深入理解JavaScript系列(34):设计模式之命令模式详解

介绍 命令模式(Command)的定义是:用于将一个请求封装成一个对象,从而使你可用不同的请求对客户进行参数化:对请求排队或者记录请求日志,以及执行可撤销的操作.也就是说改模式旨在将函数的调用.请求和操作封装成一个单一的对象,然后对这个对象进行一系列的处理.此外,可以通过调用实现具体函数的对象来解耦命令对象与接收对象. 正文 我们来通过车辆购买程序来展示这个模式,首先定义车辆购买的具体操作类: 复制代码 代码如下: $(function () { var CarManager = { // 请求

JS命令模式例子之菜单程序

命令模式的应用场景: 有时候需要向某些对象发送请求,但是并不知道请求的接收者是谁,也不知道被请求的操作是什么,此时希望用一种松耦合的方式来设计软件,使得请求发送者和请求接收者能够消除彼此之间的耦合关系. html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js:命令模式</title> <script type="

PHP设计模式之命令模式的深入解析

命令模式(Command),命令模式是封装一个通用操作的机制. 如果你熟悉C或PHP,你可能已经遇到过Command,它相当于程序中的:回调(callback).回调通常使用一个函数指针或数据结构如PHP中的字符串和数组实现,Command是在一个方法调用之上的抽象,它吸收了所有面向对象的好处:合成.继承和处理. 例如,<设计模式>一书推荐使用Command存储用户行为链,以支持撤销和重做操作. 注意PHP 5.3函数编程能力(闭包)可以被当做Command模式的一个本地实现,但为每一个命令层

Java设计模式之命令模式_动力节点Java学院整理

定义:将一个请求封装成一个对象,从而让你使用不同的请求把客户端参数化,对请求排队或者记录请求日志,可以提供命令的撤销和恢复功能. 类型:行为类模式 类图: 命令模式的结构 顾名思义,命令模式就是对命令的封装,首先来看一下命令模式类图中的基本结构: Command类:是一个抽象类,类中对需要执行的命令进行声明,一般来说要对外公布一个execute方法用来执行命令. ConcreteCommand类:Command类的实现类,对抽象类中声明的方法进行实现. Client类:最终的客户端调用类.

解析Java设计模式编程中命令模式的使用

定义:将一个请求封装成一个对象,从而让你使用不同的请求把客户端参数化,对请求排队或者记录请求日志,可以提供命令的撤销和恢复功能. 类型:行为类模式 类图: 命令模式的结构         顾名思义,命令模式就是对命令的封装,首先来看一下命令模式类图中的基本结构: Command类:是一个抽象类,类中对需要执行的命令进行声明,一般来说要对外公布一个execute方法用来执行命令. ConcreteCommand类:Command类的实现类,对抽象类中声明的方法进行实现. Client类:最终的客户

Python设计模式之命令模式简单示例

本文实例讲述了Python设计模式之命令模式.分享给大家供大家参考,具体如下: 命令模式介绍: 在面向对象编程中,命令模式是概括所有方法信息的设计模式. 此模式对象包涵方法名,及其相关参数值. 命令模式是一个分类的观察者设计模式,在命令模式下,对象被概括为一个命令表单,此表单包涵了所有用户需要的方法. 举个例子:如果有个按钮是用户接口"red",当被触碰的时候,会启动后台的"turn red"接口.现在用户并不知道,通过什么类或者方法的接口能够让后台处理"

Android编程设计模式之命令模式详解

本文实例讲述了Android编程设计模式之命令模式.分享给大家供大家参考,具体如下: 一.介绍 命令模式(Command Pattern),是行为型设计模式之一.命令模式相对于其他的设计模式来说并没有那么多的条条框框,其实它不是一个很"规范"的模式,不过,就是基于这一点,命令模式相对于其他的设计模式更为灵活多变.我们接触比较多的命令模式个例无非就是程序菜单命令,如在操作系统中,我们点击"关机"命令,系统就会执行一系列的操作,如先是暂停处理事件,保存系统的一些配置,然

Unity常用命令模式详解

在调用一些简单的方法实现一系列的动作时,回退的问题比较重要.作为一款用户体验良好的产品而言,有回退功能将显得比较人性化,想想如果我们常用的window,在删除一个文件后无法恢复将变得多么的糟糕.更为直观的例子是在玩一些小游戏时,比如象棋.推箱子,提供了悔棋的功能,用户有了更多选择的余地. 本文主要将的将是在Unity中实现一个以常听说的命令模式为设计原理,实现一个可以撤销移动.旋转.颜色和文字信息的小Demo. 命令模式,主要成员有提出要求的客户.设置命令的收集者.执行命令的接收者.客户要求很简

23种设计模式(17)java命令模式

23种设计模式第十七篇:java命令模式 定义:将一个请求封装成一个对象,从而让你使用不同的请求把客户端参数化,对请求排队或者记录请求日志,可以提供命令的撤销和恢复功能. 类型:行为类模式 类图: 命令模式的结构 顾名思义,命令模式就是对命令的封装,首先来看一下命令模式类图中的基本结构: Command类:是一个抽象类,类中对需要执行的命令进行声明,一般来说要对外公布一个execute方法用来执行命令. ConcreteCommand类:Command类的实现类,对抽象类中声明的方法进行实现.