命令模式是最简单和优雅的模式之一，命令模式中的命令（command）是指一个执行某些特定事情的指令。
应用场景：有时候需要向某些对象发送请求，但是并不知道请求的接受者是谁，也不知道被请求的操作是什么，此时希望用一种
松解耦的方式来设计软件，使得请求发送者和请求接受者能够消除彼此之间的耦合关系。
一个简单JavaScript例子：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>命令模式</title>
6 <style>
7 body{
8 padding: 0;
9 margin: 0;
10 }
11 .ball{
12 position: absolute;
13 background: #000;
14 width: 50px;
15 height: 50px;
16 top: 200px;
17 }
18 </style>
19 </head>
20 <body>
21 <div id="ball" class="ball"></div>
22 输入小球移动后的位置：<input type="text" id="pos">
23 <button id="moveBtn">开始移动</button>
24 <button id="cancelBtn">cancel</button>
25 <script>
26
27 // 营运策略模式封装一系列缓动算法
28 // t:已消耗的时间 b:小球的原始位置 c:小球的目标位置 d:动画持续的总时间
29 // 返回当前位置
30 var tween = {
31 linear: function(t, b, c, d) {
32 return c*t/d + b;
33 },
34 easeIn: function(t, b, c, d) {
35 return c * (t /= d) * t + b;
36 },
37 strongEaseIn: function(t, b, c, d) {
38 return c * (t /= d) * t * t * t + b;
39 },
40 strongEaseOut: function(t, b, c, d) {
41 return c * (( t = t / d - 1 ) * t * t * t * t + 1) + b;
42 },
43 sineaseIn: function(t, b, c, d) {
44 return c * (t /= d) * t * t + b;
45 },
46 sineaseOut: function(t, b, c, d) {
47 return c * (( t = t / d - 1) * t * t + 1) + b;
48 }
49 };
50
51 // 定义动画类
52 var Animate = function(dom) {
53 this.dom = dom;
54 this.startTime = 0;
55 this.startPos = 0;
56 this.endPos = 0;
57 this.propertyName = null;
58 this.easing = null;
59 this.duration = null;
60 }
61
62 // 动画启动
63 Animate.prototype.start = function(propertyName, endPos, duration, easing) {
64 this.propertyName = propertyName;
65 this.startTime = +new Date();
66 this.startPos = this.dom.getBoundingClientRect()[propertyName];
67 this.endPos = endPos;
68 this.duration = duration;
69 this.easing = tween[easing];
70
71 var self = this;
72 var timeId = setInterval(function() {
73 if (self.step() === false) {
74 clearInterval(timeId);
75 }
76 }, 1000/60)
77 }
78
79 Animate.prototype.step = function() {
80 var t = +new Date();
81 if (t > this.startTime + this.duration) {
82 this.update(this.endPos);
83 return false;
84 }
85 var pos = this.easing(t - this.startTime,
86 this.startPos, this.endPos - this.startPos, this.duration);
87 this.update(pos);
88 }
89
90 Animate.prototype.update = function( pos ) {
91 this.dom.style[ this.propertyName ] = pos + 'px';
92 }
93
94
95 var ball = document.getElementById('ball');
96 var pos = document.getElementById('pos');
97 var moveBtn = document.getElementById('moveBtn');
98 var cancelBtn = document.getElementById('cancelBtn');
99
100 // 使用命令模式实现事件和dom的解耦
101 var MoveCommand = function(receiver, pos) {
102 this.receiver = receiver;
103 this.pos = pos;
104 this.oldPos = null;
105 }
106
107 MoveCommand.prototype.excute = function() {
108 this.receiver.start('left', this.pos, 1000, 'strongEaseOut');
109 this.oldPos = this.receiver.dom.getBoundingClientRect()[this.receiver.propertyName];
110 }
111
112 MoveCommand.prototype.undo = function() {
113 this.receiver.start('left', this.oldPos, 1000, 'strongEaseOut');
114 }
115
116 var moveCommand;
117
118 moveBtn.onclick = function() {
119 var animate = new Animate( ball );
120 moveCommand = new MoveCommand(animate, pos.value);
121 moveCommand.excute();
122 }
123
124 cancelBtn.onclick = function() {
125 console.log(moveCommand);
126 moveCommand.undo();
127 }
128 </script>
129 </body>
130
