JavaScript设计模式--行为类型--命令模式

定义

将请求封装为对象，从而客户端可以接收不同的请求对象、队列或日志请求作为参数，并支持可撤销的操作。

使用频次：5颗星

总结：
      命令模式把行为封装为对象，命令对象将发出请求的对象和实际处理请求的对象区分开来，从而实现松耦合设计。这些请求被称为事件，处理这些请求的代码被称为事件处理器。
     现假设你正在开发一个支持剪切、复制、粘贴等鼠标操作的应用程序。应用中能以不同的方式触发这些操作，例如一些菜单操作或者键盘的快捷键。

     Command对象可以集中对每一个操作的处理。每个操作对应一个命令。所以剪切、复制、粘贴操作分别对应一个命令。 
因为命令集中处理，所以经常出现在一些需要撤销的应用中。

表示图：

参与者：
在这种模式中参与的对象有：


Client--代码中的run()函数
引用Receiver对象。


Receiver--代码中的Calculator
了解如何执行命令
保留执行命令的历史记录


Command--代码中的Command


Invoker--代码中用户按下按钮

例子：
在我们的例子中，计算器有四种操作，加减乘除，每种操作被封装成一个单独的Command对象。
计算器有个命令堆栈，每种命令执行后被压入该堆栈中，撤销操作时，只需要弹出堆栈，执行弹出的命令对象的相反操作的方法。
JS的函数对象（以及回调）是天然的命令对象，他们能够像对象一样传递，实际上，他们是本质上也是对象。

log函数助于收集和展示结果。

function add(x, y) { return x + y; }    function sub(x, y) { return x - y; }    function mul(x, y) { return x * y; }    function div(x, y) { return x / y; }    var Command = function (execute, undo, value) {        this.execute = execute;        this.undo = undo;        this.value = value;    }    var AddCommand = function (value) {        return new Command(add, sub, value);    };    var SubCommand = function (value) {        return new Command(sub, add, value);    };    var MulCommand = function (value) {        return new Command(mul, div, value);    };    var DivCommand = function (value) {        return new Command(div, mul, value);    };    var Calculator = function () {        var current = 0;        var commands = [];        function action(command) {            var name = command.execute.toString().substr(9, 3);            return name.charAt(0).toUpperCase() + name.slice(1);        }        return {            execute: function (command) {                current = command.execute(current, command.value);                commands.push(command);                log.add(action(command) + ": " + command.value);            },            undo: function () {                var command = commands.pop();                current = command.undo(current, command.value);                log.add("Undo " + action(command) + ": " + command.value);            },            getCurrentValue: function () {                return current;            }        }    }    // log helper    var log = (function () {        var log = "";        return {            add: function (msg) { log += msg + "\n"; },            show: function () { alert(log); log = ""; }        }    })();    function run() {        var calculator = new Calculator();        // issue commands        calculator.execute(new AddCommand(100));        calculator.execute(new SubCommand(24));        calculator.execute(new MulCommand(6));        calculator.execute(new DivCommand(2));        // reverse last two commands        calculator.undo();        calculator.undo();        log.add("\nValue: " + calculator.getCurrentValue());        log.show();    }

博客原文：

http://www.dofactory.com/javascript/command-design-pattern