JavaScript设计模式之命令模式

命令模式是将一个请求封装成一个对象，从而使您可以用不同的请求对客户进行参数化。请求以命令的形式包裹在对象中，并传给调用对象。调用对象寻找可以处理该命令的合适的对象，并把该命令传给相应的对象，该对象执行命令。

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

命令模式的结构

Command:定义命令的接口，声明执行的方法。

ConcreteCommand:命令接口实现对象，是"虚"的实现;通常会持有接收者，并调用接收者的功能来完成命令要执行的操作。

Receiver:接收者，真正执行命令的对象。任何类都可能成为一个接收者，只要它能够实现命令要求实现的相应功能。

Invoker:要求命令对象执行请求，通常会持有命令对象，可以持有很多的命令对象。这个是客户端真正触发命令并要求命令执行相应操作的地方，也就是说相当于使用命令对象的入口。

Client:创建具体的命令对象，并且设置命令对象的接收者。注意这个不是我们常规意义上的客户端，而是在组装命令对象和接收者，或许，把这个Client称为装配者会更好理解，因为真正使用命令的客户端是从Invoker来触发执行。

命令模式不一定具备上面的所有结构，简单的命令模式可以只有命令的发布者和命令的接收者，这种简单命令模式中，接受者和执行者是同一个对象。比如：小明的妈妈告诉小明说：“今天中午妈妈会很忙，没时间出去买菜。你放学回来的时候，顺便帮妈妈把菜买回来”，在这个例子中，命令的发布者是小明的妈妈，小明是命令的接收者和执行者：

//发布命令者
var Command = function(receiver){
    this.receiver = receiver;
};
            
Command.prototype.execute = function(){
    this.receiver.action();
};
            
//命令的执行者和接受者
var Receiver = function(name){
    this.name = name;
};
            
Receiver.prototype.action = function(){
    alert(this.name + "中午放学后顺便把菜买了！");
};
            
var xiaoming = new Receiver("小明");
var xiaomingmama = new Command(xiaoming);
            
xiaomingmama.execute();

命令模式例子——菜单命令

现在页面中有三个button元素和一个菜单程序界面，这三个button元素的作用是：当用户点击时，他们分别会执行“刷新菜单”、“添加子菜单”和“删除子菜单”这三个功能。如果由一个程序员来完成这个功能就非常的简单了，因为他非常清楚那个按钮对应那个功能。但是如果实在一个分工很细致的团队里就不是这样了，例如一个人负责写html和css样式布局，另一个人负责写js，他们两个人同时进行各自的工作。在这种情况下，负责写js的那个人就很难确定哪个按钮对应哪个功能了。我们回想一下命令模式的使用场景：

有时候需要向某些对象发送请求，但是并不知道请求的接收者是谁，也不知道被请求的操作是什么，此时希望用一种松耦合的方式来设计软件，使得请求发送者和请求接收者能够消除彼此之间的耦合关系。

我们发现这种情况非常符合使用命令模式。

HTML按钮结构：

<button class="ref">刷新菜单</button>
<button class="add">添加子菜单</button>
<button class="del">删除子菜单</button>

首先我们对功能进行封装，将三个功能分别封装到Menu和SubMenu两个对象中：

//菜单对象
var Menu = {
    refresh: function(){
        console.log("刷新菜单");
    }
};
            
//子菜单
var SubMenu = {

    add: function(){
         console.log('增加子菜单');
    },
                
    del: function(){
         console.log('删除子菜单');
    }
};

然后封装三个功能调用的命令：

//封装刷新菜单命令
var refreshMenuCommand = function(receiver){
    this.receiver = receiver;
}
            
refreshMenuCommand.prototype.execute = function(){
    this.receiver.refresh();
}
            
//封装添加子菜单命令
var addSubMenuCommand = function(receiver){
    this.receiver = receiver;
}
            
addSubMenuCommand.prototype.execute = function(){
    this.receiver.add();
}
            
//封装删除子菜单命令
var delSubMenuCommand = function(receiver){
    this.receiver = receiver;
}
            
delSubMenuCommand.prototype.execute = function(){
    this.receiver.del();
}

在然后是封装设置命令函数：

//设置命令函数
function setCommand(btn, command){
    btn.addEventListener("click", function(){
        command.execute();
    })
};

最后是客户端（client）的调用：

//client客户调用
var refreshCommand = new refreshMenuCommand(Menu);
var addCommand = new addSubMenuCommand(SubMenu);
var delCommand = new delSubMenuCommand(SubMenu);
            
var btn = document.querySelectorAll("button");
            
setCommand(btn[0], refreshCommand);
setCommand(btn[1], addCommand);
setCommand(btn[2], delCommand);

JavaScript中的命令模式：

大家细看上面菜单的例子，会发现实现一个这么简单的功能，竟然弄得代码这么复杂难懂。即使不用什么模式，用下面几行代码就可以实现相同的功能：

//菜单对象
var Menu = {
    refresh: function(){
        console.log("刷新菜单");
    }
};
            
//子菜单
var SubMenu = {

    add: function(){
         console.log('增加子菜单');
    },
                
    del: function(){
         console.log('删除子菜单');
    }
};

//事件绑定函数
function addEvent(dom, fn, Capture){
    dom.addEventListener("click", fn, !!Capture);
};

var btn = document.querySelectorAll("button");
            
addEvent(btn[0], Menu.refresh);
addEvent(btn[1], SubMenu.add);
addEvent(btn[2], SubMenu.del);

这就是JavaScript语言中的命令模式，在JavaScript语言中函数是一等对象，它可以作为一个参数传递到函数内部去执行。所以在JavaScript这门语言中，命令模式和策略模式一样是JavaScript这门语言的天赋（生来即具有的属性）或者是隐性模式。命令模式其实就是回调函数一个面向对象的替代品，在JavaScript中命令模式和策略模式一样依赖回调函数实现，使用起来也更简单、更便捷。但有些时候这会成为一种缺点，因为他无法执行撤销操作，所以在实现撤销操作时，我们最好还是使用命令对象的execute方法为好。

撤销操作的实例

现在页面中有一个元素，有两个按钮，其中一个按钮点击时元素会往右移动一段距离，另一个按钮是撤销上一个移动操作。用命令模式实现这个功能，代码如下：

HTML结构：

<div class="demo">
    <button class="move">移动</button>
    <button class="undo">撤销</button>
    <div class="target" style="left:0"></div>
</div>

CSS样式：

.demo{
    width:100%;
    height:100px;
    position:relative;
}
            
.target{
    width:50px;
    height:50px;
    position:absolute;
    bottom:0;
    background-color:red;
}

js代码：

//移动对象
var Animate = function(dom){
    this.dom = dom;
    var self = this;
                
    //移动函数
    this.move = function(){
        var left = parseInt(self.dom.style.left);
        self.dom.style.left = left + 10 + 'px';
    };
                
    //取消移动函数
    this.undo = function(){
        var left = parseInt(self.dom.style.left);
        self.dom.style.left = left - 10 + 'px';
    };
};
            
//命令对象
var Command = function(receiver){
    var self = this;
                
    this.receiver = receiver;
    this.count = 0;  //记录执行命令的次数
                
                
    //执行命令
    this.execute = function(){
        self.receiver.move();
        self.count+= 1;
    };
                
    //撤销命令
    this.unexecute = function(){
        if(self.count === 0) return;
        self.receiver.undo();
        self.count-= 1;
    }
};

            
//设置命令函数
function addEvent(dom, fn, Capture){
    dom.addEventListener("click", fn, !!Capture);
};

//client调用
var dom = document.querySelector(".target");
var moveBtn = document.querySelector(".move");
var unmoveBtn = document.querySelector(".undo");

var m = new Animate(dom);
var c = new Command(m);
            
addEvent(moveBtn, c.execute);
addEvent(unmoveBtn, c.unexecute);

命令模式的优缺点：

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

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