码迷,mamicode.com
首页 > Web开发 > 详细

JS设计模式(6)命令模式

时间:2018-08-16 13:31:51      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:man   参数   解耦   扩展   客户   comm   ons   抽象   cut   

什么是命令模式?

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

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

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

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

关键代码:定义三个角色: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)

 

JS设计模式(6)命令模式

标签:man   参数   解耦   扩展   客户   comm   ons   抽象   cut   

原文地址:https://www.cnblogs.com/wuguanglin/p/commandPattern.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!