JS设计模式命令模式

Posted 2020-12-30 Blog of Eric Wu

什么是命令模式？

定义：将一个请求封装成一个对象，从而使您可以用不同的请求对客户进行参数化。

主要解决：在软件系统中，行为请求者与行为实现者通常是一种紧耦合的关系，但某些场合，比如需要对行为进行记录、撤销或重做、事务等处理时，这种无法抵御变化的紧耦合的设计就不太合适。

何时使用：在某些场合，比如要对行为进行"记录、撤销/重做、事务"等处理，这种无法抵御变化的紧耦合是不合适的。在这种情况下，如何将"行为请求者"与"行为实现者"解耦？将一组行为抽象为对象，可以实现二者之间的松耦合。

如何解决：通过调用者调用接受者执行命令，顺序：调用者→接受者→命令。

关键代码：定义三个角色：1、received 真正的命令执行对象 2、Command 3、invoker 使用命令对象的入口

优点： 1、降低了系统耦合度。 2、新的命令可以很容易添加到系统中去。

缺点：使用命令模式可能会导致某些系统有过多的具体命令。

使用场景：认为是命令的地方都可以使用命令模式，比如： 1、GUI 中每一个按钮都是一条命令。 2、模拟 CMD。

注意事项：系统需要支持命令的撤销(Undo)操作和恢复(Redo)操作，也可以考虑使用命令模式，见命令模式的扩展。

 

javascript中的命令模式

命令模式在 JavaScript 中也比较简单，下面代码中对按钮和命令进行了抽离，因此可以复杂项目中可以使用命令模式将界面的代码和功能的代码交付给不同的人去写。

const setCommand = function(button, command) {
    button.onClick = function() {
        command.excute()
    }
}

// --------------------  上面的界面逻辑由A完成，下面的由B完成

const menu = {
    updateMenu: function() {
        console.log(‘更新菜单‘)
    },
}

const UpdateCommand = function(receive) {
    return {
        excute: receive.updateMenu,
    }
}

const updateCommand = UpdateCommand(menu) // 创建命令

const button1 = document.getElementById(‘button1‘)
setCommand(button1, updateCommand)