定义
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命令模式的资料请关注其它相关文章！
