js设计模式：什么是命令模式？js命令模式的介绍-js教程-PHP中文网

js设计模式：什么是命令模式？js命令模式的介绍

不言

发布： 2018-08-17 16:26:40

原创

1604人浏览过

本篇文章给大家带来的内容是关于js设计模式：什么是命令模式？js命令模式的介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

什么是命令模式？

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

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

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

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

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

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

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

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

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

js命令模式

命令模式在 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)

登录后复制