命令模式是最简单和优雅的模式之一，命令模式中的命令（command）是指一个执行某些特定事情的指令。
应用场景：有时候需要向某些对象发送请求，但是并不知道请求的接受者是谁，也不知道被请求的操作是什么，此时希望用一种
松解耦的方式来设计软件，使得请求发送者和请求接受者能够消除彼此之间的耦合关系。
一个简单JavaScript例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>命令模式</title>
<style>
body{
padding: 0;
margin: 0;
}
.ball{
position: absolute;
background: #000;
width: 50px;
height: 50px;
top: 200px;
}
</style>
</head>
<body>
<div id="ball" class="ball"></div>
输入小球移动后的位置：<input type="text" id="pos">
<button id="moveBtn">开始移动</button>
<button id="cancelBtn">cancel</button>
<script> // 营运策略模式封装一系列缓动算法
// t:已消耗的时间 b:小球的原始位置 c:小球的目标位置 d:动画持续的总时间
// 返回当前位置
var tween = {
linear: function(t, b, c, d) {
return c*t/d + b;
},
easeIn: function(t, b, c, d) {
return c * (t /= d) * t + b;
},
strongEaseIn: function(t, b, c, d) {
return c * (t /= d) * t * t * t + b;
},
strongEaseOut: function(t, b, c, d) {
return c * (( t = t / d - 1 ) * t * t * t * t + 1) + b;
},
sineaseIn: function(t, b, c, d) {
return c * (t /= d) * t * t + b;
},
sineaseOut: function(t, b, c, d) {
return c * (( t = t / d - 1) * t * t + 1) + b;
}
}; // 定义动画类
var Animate = function(dom) {
this.dom = dom;
this.startTime = 0;
this.startPos = 0;
this.endPos = 0;
this.propertyName = null;
this.easing = null;
this.duration = null;
} // 动画启动
Animate.prototype.start = function(propertyName, endPos, duration, easing) {
this.propertyName = propertyName;
this.startTime = +new Date();
this.startPos = this.dom.getBoundingClientRect()[propertyName];
this.endPos = endPos;
this.duration = duration;
this.easing = tween[easing]; var self = this;
var timeId = setInterval(function() {
if (self.step() === false) {
clearInterval(timeId);
}
}, 1000/60)
} Animate.prototype.step = function() {
var t = +new Date();
if (t > this.startTime + this.duration) {
this.update(this.endPos);
return false;
}
var pos = this.easing(t - this.startTime,
this.startPos, this.endPos - this.startPos, this.duration);
this.update(pos);
} Animate.prototype.update = function( pos ) {
this.dom.style[ this.propertyName ] = pos + 'px';
} var ball = document.getElementById('ball');
var pos = document.getElementById('pos');
var moveBtn = document.getElementById('moveBtn');
var cancelBtn = document.getElementById('cancelBtn'); // 使用命令模式实现事件和dom的解耦
var MoveCommand = function(receiver, pos) {
this.receiver = receiver;
this.pos = pos;
this.oldPos = null;
} MoveCommand.prototype.excute = function() {
this.receiver.start('left', this.pos, 1000, 'strongEaseOut');
this.oldPos = this.receiver.dom.getBoundingClientRect()[this.receiver.propertyName];
} MoveCommand.prototype.undo = function() {
this.receiver.start('left', this.oldPos, 1000, 'strongEaseOut');
} var moveCommand; moveBtn.onclick = function() {
var animate = new Animate( ball );
moveCommand = new MoveCommand(animate, pos.value);
moveCommand.excute();
} cancelBtn.onclick = function() {
console.log(moveCommand);
moveCommand.undo();
}
</script>
</body>
</html>