JS每日一题:设计模式-如何理解命令模式?-CSDN博客

本文链接：https://blog.csdn.net/weixin_44475093/article/details/106394650

20190409期

设计模式-如何理解命令模式?

定义: 将一个请求封装成为对象，从而使你可用不同的请求对客户进行参数化；对请求排队或者记录请求日志，以及执行可撤销的操作,命令(command)指的是一个执行某些特定事情的指令

使用场景

需要向某些对象发送请求，但并不知道请求的接收者是谁，也不知道请求的操作是什么，这时就希望用一种低耦合的方式来设计程序，使得请求者和发送者之间的关系低耦合

比如现在我们正在写一个大型用户界面程序，该用户界面上至少有数十个button按钮，因为项目比较复杂，所以我们同时让多人合作开发这个系统，A负责编写静态界面，B负责点击按钮的具体行为，这些行为都将被封装到对象里

思考：B完全不知道点击完这个按钮后会发生什么事情，那么如何给它绑定click事件呢？

这样我们就找到了使用命令模式的理由

代码理解:

// 首先我们定义一个安装命令的方法
var setCommand = function(button,command){ 
    button.onclick = function(){ 
        command.execute(); 
    } 
}
// 定义最终执行者 
var MenuBar = { 
    refresh : function(){ 
        console.log('refresh menu finish') 
    } 
}
// 先把这些行为封装在命令类中 
var RefreshMenuBarCommand = function(recevier){ 
    this.recevier = recevier; 
}
RefreshMenuBarCommand.prototype.execute = function(){
    this.recevier.refresh(); 
}
// 命令接收者传入到command对象中，并且把command对象安装到button 上面
var refreshCommand = new RefreshMenuBarCommand(MenuBar);
setCommand('button1',refreshCommand)

通过上面的代码我们能看出来，接收者跟执行者完全没有任何联系，通过了一个setCommand命令结合到了一块，这样发送者跟接收者就被耦合开了

撤消重做

命令模式比较容易设计一个命令队列，比较容易将命令计入日志，并且允许接受请求的一方决定是否需要调用，而且可以实现对请求的撤销和重设

只有在真正需求如撤销、恢复操作等功能时，把原来的代码重构为命令模式才有意义

伪代码理解:

// 下方伪代码解释
// 我们想让点击button的时候，目标像左移动一些距离
// 我们又想有一个回退的操作，点击回退的时候能回到上一次的距离
var MoveCommand = function(recevier , pos){ 
    this.recevier = recevier; 
    this.pos = pos;
} 
MoveCommand.prototype.execute = function(){         
    this.recevier.move('left',this.pos) 
    // 命令模式很简单就能记住日志
    // 这里我们只需要记住上次的坐标即可
    this.oldPos = this.recevier.dom.getBoundingClientRect()[this.recevier.propertyName]
} 
MovaCommand.prototype.undo = function(){
    // undo的时候直接回到记录的旧坐标
    this.recevier.move(‘left’,this.oldPos) 
}
var movaCommand = new MoveCommand()
button.onclick = function(){ 
    movaCommand.execute(); 
}

撤消是命令模式里一个非常有用的功能，比如在开发一个象棋的时候，悔棋操作用命令模式来做非常方便，又比如各种ctrl+z这种撤消操作