大熊君说说JS与设计模式之------命令模式Command

浏览数：39 / 时间：2015年06月09日

一，总体概要

1，笔者浅谈

日常生活中，我们在看电视的时候，通过遥控器选择我们喜欢的频道时，此时我们就是客户端的角色，遥控器的按钮相当于客户请求，而具体执行的对象就是命令对象，

命令模式把一个请求或者操作封装到一个对象中。命令模式允许系统使用不同的请求把客户端参数化，对请求排队或者记录请求日志，可以提供命令的撤销和恢复功能。

先给个具体事例，如下：

 1 function add(x, y) { return x + y; } ;
 2 function sub(x, y) { return x - y; } ;
 3 function mul(x, y) { return x * y; } ;
 4 function div(x, y) { return x / y; } ;
 5  
 6 var Command = function (execute, undo, value) {
 7     this.execute = execute;
 8     this.undo = undo;
 9     this.value = value;
10 }
11  
12 var AddCommand = function (value) {
13     return new Command(add, sub, value);
14 };
15  
16 var SubCommand = function (value) {
17     return new Command(sub, add, value);
18 };
19  
20 var MulCommand = function (value) {
21     return new Command(mul, div, value);
22 };
23  
24 var DivCommand = function (value) {
25     return new Command(div, mul, value);
26 };
27  
28 var Calculator = function () {
29     var current = 0;
30     var commands = [];
31  
32     function action(command) {
33         var name = command.execute.toString().substr(9, 3);
34         return name.charAt(0).toUpperCase() + name.slice(1);
35     }
36  
37     return {
38         execute: function (command) {
39             current = command.execute(current, command.value);
40             commands.push(command);
41             log.add(action(command) + ": " + command.value);
42         },
43  
44         undo: function () {
45             var command = commands.pop();
46             current = command.undo(current, command.value);
47             log.add("Undo " + action(command) + ": " + command.value);
48         },
49  
50         getCurrentValue: function () {
51             return current;
52         }
53     }
54 }
55 
56 var log = (function () {
57     var log = "";
58  
59     return {
60         add: function (msg) { log += msg + "\n"; },
61         show: function () { alert(log); log = ""; }
62     }
63 })();
64  
65 function run() {
66     var calculator = new Calculator();
67     calculator.execute(new AddCommand(100));
68     calculator.execute(new SubCommand(24));
69     calculator.execute(new MulCommand(6));
70     calculator.execute(new DivCommand(2));
71     calculator.undo();
72     calculator.undo();
73     log.add("\nValue: " + calculator.getCurrentValue());
74     log.show();
75 }

这是一个计算器的例子，将每一个具体操作以对象的形式进行封装，计算器接收到我们的请求后，

对发出具体的命令，是+，-，还是*/。这样，我们把请求传给计算器，计算器来具体执行需要哪些命令。

这样一来虽然结果是一样的，都是计算出结果，但是过程去截然不同喽。最大限度的降低了耦合。

二，源码案例参考

技术分享

在命令模式的总体思路是，它给我们提供一种分开的任何执行命令发布命令的责任，这种责任的不同对象而不是授权。

简单的命令对象结合在一起的一种行为对象要调用动作。他们始终包括一个执行操作（如run()或execute()）。所有的命令对象具有相同的接口，可以很容易地被交换的需要。

三，案例引入

具体的Command模式代码各式各样，因为如何封装命令，不同系统，有不同的做法。下面事例是将命令封装在一个List中，任何对象一旦加入List中，实际上装入了一个封闭的黑盒中，对象的特性消失了，只有取出时，才有可能模糊的分辨出:

典型的Command模式需要有一个接口，接口中有一个统一的方法，这就是"将命令/请求封装为对象"。

（1），建立程序猿实体类

1 function Programmer(){
2     this.execute = function(){
3         console.log("程序猿写代码！") ;
4     } ;
5 } ;

（2），建立工程师实体类

1 function Engineer(){
2     this.execute = function(){
3         console.log("工程师盖房子！") ;
4     } ;
5 } ;

（3），建立政治家实体类

1 function Politician(){
2     this.execute = function(){
3         console.log("政治家喷人！") ;
4     } ;
5 } ;

（4），建立黑盒子类

按照通常做法，我们就可以直接调用这三个Command，但是使用Command模式，我们要将他们封装起来，扔到黑盒子List里去:

 1 function Producer(){
 2     var list = [] ;
 3     return {
 4         produceRequests : function(){
 5             list.push(new Engineer()) ;
 6             list.push(new Programmer()) ;
 7             list.push(new Politician()) ;
 8             return list ;
 9         }
10     }
11 }

这三个命令进入List中后，已经失去了其外表特征，以后再取出，也可能无法分辨出谁是Engineer，谁是Programmer了，看下面客户端如何调用Command模式:

（5），建立命令客户端类

1 function CMDClient(){
2     var cmdlist = Producer.produceRequests() ;
3     for(var p in cmdlist){
4         (cmdlist[p]).execute() ;
5     }
6 } ;