详解Javascript实践中的命令模式


Posted in Javascript onMay 05, 2021

定义

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

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

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

结构

命令模式的类图如下:

详解Javascript实践中的命令模式

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

  • 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命令模式的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js 获取服务器控件值的代码
Mar 05 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
javascript中的闭包概念与用法实践分析
Jul 26 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 Javascript
如何制作自己的原生JavaScript路由
May 05 #Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 #Vue.js
如何用JavaScript学习算法复杂度
JS不要再到处使用绝对等于运算符了
Apr 30 #Javascript
如何用Node.js编写内存效率高的应用程序
用几道面试题来看JavaScript执行机制
Apr 30 #Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 #Javascript
You might like
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
mouse_on_title.js
2006/08/25 Javascript
javascript事件模型代码
2007/07/01 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
layui表格数据重载
2019/07/27 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
Express 配置HTML页面访问的实现
2020/11/01 Javascript
[04:50]2019DOTA2高校联赛秋季赛四强集锦
2019/12/27 DOTA
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
python中字符串前面加r的作用
2015/06/04 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
python字典按照value排序方法
2020/12/28 Python
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
创业计划实施的7大步骤
2014/02/05 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
青春雷锋观后感
2015/06/10 职场文书
文化苦旅读书笔记
2015/06/29 职场文书