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

川长思鸟来 2023-02-13 08:16 50阅读 0赞

#### 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这种撤消操作

#### 总结 ####

*  命令模式是最简单跟优雅的模式之一
 *  命令(command)指的是一个执行某些特定事情的指令
 *  命令模式旨在解藕发送者及接收者之间的关系
 *  命令模式很方便记录操作日志，非常适用于撤消，重做操作

**最近答题**

[JS每日一题:设计模式-如何理解工厂模式?][JS_-]

[JS每日一题: 如何利用webpack来优化前端性能？][JS_ _webpack]

基友噢如果喜欢，可以分享给好基友噢如果喜欢，可以分享给好基友噢

**关注「JS每日一题」，参与答题！**

![format_png][]

▲长按图片识别二维码

[JS_-]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c398cb674a8e7907320284f63b1514c28bb0c22de41359bed4aaade01d5080e4a1b8ff1f&idx=1&mid=2247483854&scene=21&sn=f810de019cfbc269f7e08ad9ccf2454e#wechat_redirect
[JS_ _webpack]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c39ecb674a88d3caec76b0d6be217fa5f161692426e117a20ff3812495bece0aee161dd4&idx=1&mid=2247483848&scene=21&sn=94a48c2188d3c8b1d3b68a4cb58235bb#wechat_redirect
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9nSDMxdUY5VklpYlRQUFY1ZlVpYzhKb2ljVGxISDByTDdpY1p5alJaMThDSmpsN2hUaDFvcWpRRnNBbDI3YWljV1NmRDJ6WnVLT1d1b01pY0VpY3oxV3dBSjlhY2cvNjQw?x-oss-process=image/format,png