1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>命令模式</title>
5 <meta charset="utf-8">
6 </head>
7 <body>
8
9 <script>
10 /**
11 * 命令模式
12 *
13 * 定义：
14 * 将一个请求封装为一个对象，从而使你可用不同的请求对客户进行参数化，对请求排队或记录请求日志，以及支持可撤销的操作。
15 *
16 * 本质：
17 * 封装请求
18 *
19 * 命令模式是一种封装方法调用的方式。命令模式与普通函数所有不同。它可以用来对方法调用进行参数化处理和传送，经这样处理过的方法调用可以在任何需要的时候执行。它也可以用来消除调用操作的对象和实现操作对象之间的耦合，这位各种具体的类的更换带来了极大的灵活性。这种模式可以用在许多不同场合，不过它在创建用户界面这一方面非常有用，特别是在需要不受限的（unlimited）取消（undo）操作的时候，它还可以用来替代回调函数，因为它能够提高在对象之间传递的操作的模块化程度。
20 *
21 * 在命令模式中，会定义一个命令的接口，用来约束所有的命令对象，然后提供具体的命令实现，每个命令实现对象是对客户端某个请求的封装，对应于机箱上的按钮，一个机箱上可以有很多按钮，也就相当于会有多个具体的命令实现对象。
22 * 在命令模式中，命令对象并不知道如何处理命令，会有相应的接收者对象来真正执行命令。就像电脑的例子，机箱上的按钮并不知道如何处理功能，而是把这个请求转发给主板，由主办来执行真正的功能，这个主板就相当于命令模式的接收者。
23 * 在命令模式中，命令对象和接收者对象的关系，并不是与生俱来的，需要有一个装配的过程，命令模式中的Client对象可以实现这样的功能。这就相当于在电脑的例子中，有了机箱上的按钮，也有了主板，还需要一个连接线把这个按钮连接到主板上才行。
24 * 命令模式还会提供一个Invoker对象来持有命令对象。就像电脑的例子，机箱上会有多个按钮，这个机箱就相当于命令模式的Invoker对象。这样一来，命令模式的客户端就可以通过Invoker来触发并要求执行相应的命令了，这也相当于真正的客户是按下机箱上的按钮来操作电脑一样。
25 *
26 * 命令模式的关键
27 * 命令模式的关键之处就是把请求封装成对象，也就是命令对象，并定义了统一的执行操作的接口，这个命令对象可以被存储，转发，记录，处理，撤销等，整个命令模式都是围绕这个对象在进行。
28 *
29 * 命令模式的组装和调用
30 * 在命令模式中经常会有一个命令的组装者，用它来维护命令的“虚”实现和真实实现之间的关系。如果是超级智能的命令，也就是说命令对象自己完全实现好了，不需要接收者，那就是命令模式的退化，不需要接受者，自然也不需要组装者了。
31 * 而真正的用户就是具体化请求的内容，然后提交请求进行触发就可以了。真正的用户会通过Invoker来触发命令。
32 * 在实际开发过程中，Client和Invoker可以融合在一起，由客户在使用命令模式的时候，先进行命令对象和接收者的组装，组装完成后，就可以调用命令执行请求。
33 *
34 * 命令模式的接收者
35 * 接收者可以是任意的类，对它没有什么特殊要求，这个对象知道如何真正执行命令的操作，执行时是从Command的实现类里面转调过来。
36 * 一个接收者对象可以处理多个命令，接收者和命令之间没有约定的对应关系。接收者提供的方法个数，名称，功能和命令中的可以不一样，只要能够通过调用接收者的方法来实现命令对应的功能就可以了。
37 *
38 * 命令模式的调用顺序
39 * 使用命令模式的过程分成两个阶段，一个阶段是组装对象和接收者对象的过程，另外一个阶段是触发调用Invoker，来让命令真正的执行。
40 * 组装过程：
41 * 1.创建接收者对象。
42 * 2.创建命令对象，设置命令对象和接收者对象的关系。
43 * 3.创建Invoker对象。
44 * 4.把命令对象设置到Invoker中，让Invoker持有命令对象。
45 * 执行过程：
46 * 1.调用Invoker的方法，触发要求执行命令。
47 * 2.要求持有的命令对象只能执行功能。
48 * 3.要求持有的接收者真正实现功能。
49 *
50 */
51
52 (function () {
53 // 示例代码
54
55 /**
56 * 具体的命令实现对象
57 * @params {Object} receiver 持有相应的接收者对象
58 */
59 function Command(receiver) {
60 this.receiver = receiver;
61 // 命令对象可以有自己的状态
62 this.state = '';
63 }
64
65 Command.prototype.execute = function () {
66 // 通常会转调接收者对象的相应方法，让接收者来真正执行功能
67 this.receiver.action();
68 };
69
70 // 接收者对象
71 function Receiver() {
72 }
73
74 // 真正执行命令相应地操作
75 Receiver.prototype.action = function () {
76 };
77
78 /**
79 * 调用者
80 *
81 */
82 function Invoker() {
83 }
84
85 /**
86 * @params {Object} command 持有命令对象
87 */
88 Invoker.prototype.setCommand = function (command) {
89 this.command = command;
90 };
91 // 要求命令执行请求
92 Invoker.prototype.runCommand = function () {
93 this.command.execute();
94 };
95
96 new function Client() {
97 var receiver = new Receiver();
98 var command = new Command(receiver);
99 var invoker = new Invoker();
100 invoker.setCommand(command);
101 invoker.runCommand();
102 }();
103 }());
104
105 /*
106 命令的结构
107
108 最简形式的命令对象是一个操作和用以调用这个操作的对象的结合体。所有的命令对象都有一个执行操作（execute operation），其用途就是调用命令对象所绑定的操作。在大多数命令对象中，这个操作是一个名为execute或run的方法。使用同样接口的所有命令对象都可以被同等对待，并且可以随意互换，这是命令模式的魅力之一。
109
110 假设你想设计一个网页，客户可以在上面执行一些与自己的账户相关的操作，比如启用和停用某些广告。因为不知道其中的具体广告数量，所以你想设计一个尽可能灵活的用户界面（UI）。为此你打算用命令模式来弱化按钮之类的用户界面元素与其操作之间的耦合。
111 */
112
113 // 定义两个类，分别用来封装广告的start方法和stop方法
114 // StopAd command class
115 var StopAd = function (adObject) {
116 this.ad = adObject;
117 };
118 StopAd.prototype.execute = function () {
119 this.ad.stop();
120 };
121
122 // StartAd command class
123 var StartAd = function (adObject) {
124 this.ad = adObject;
125 };
126 StartAd.prototype.execute = function () {
127 this.ad.start();
128 };
129 /*
130 现在有个两个可用在用户界面中的类，它们具有相同的接口。你不知道也不关心adObject的具体实现细节，只要它实现了start和stop方法就行。借助于命令模式，可以实现用户界面对象与广告对象的隔离。
131 */
132
133 /*
134 下面的代码创建的用户界面中，用户名下的每个广告都有两个按钮，分别用于启动和停止广告的轮播：
135 */
136 // implementation code
137 var ads = getAds();
138 for (var i = 0, len = ads.length; i < len; i++) {
139 // Create command objects for starting and stopping the ad
140 var startCommand = new StartAd(ads[i]);
141 var stopCommand = new StopAd(ads[i]);
142
143 // Create the UI elements that will execute the command on click
144 new UIButton('Start ' + ads[i].name, startCommand);
145 new UIButton('stop ' + ads[i].name, stopCommand);
146 }
147 /*
148 UIButton类的构造函数有两个参数，一个是按钮上的文字，另一个是命令对象。它会在网页上生成一个按钮，该按钮被点击时会执行那个命令对象的execute方法。这个类也不需要知道所用命令对象的确切实现。因为所有命令对象都实现了execute方法，所以可以把任何一种命令对象提供给UIButton。这有助于创建高度模块化和低耦合的用户界面。
149 */
150
151 /*
152 用闭包创建命令对象
153
154 还有另外一种办法可以用来封装函数。这种办法不需要创建一个具有execute方法的对象，而是把想要执行的方法包装在闭包中。如果想要创建的命令对象像前例中那样只有一个方法。那么这种办法由其方便。现在你不再调用execute方法，因为那个命令可以作为函数直接执行。这样做还可以省却作用域和this关键字的绑定的烦恼。
155 */
156
157 // Command using closures
158 function makeSart(adObject) {
159 return function () {
160 adObject.start();
161 };
162 }
163 function makeStop(adObject) {
164 return function () {
165 adObject.stop();
166 };
167 }
168
169 // Implementation code
170 var startCommand = makeStart(ads[0]);
171 var stopCommand = makeStop(ads[0]);
172
173 startCommand();
174 stopCommand();
175 /*
176 不适用于需要多个命令方法的场合，比如后面要实现取消功能的示例
177 */
178
179 /*
180 客户，调用者和接收者
181
182 这个系统中有三个参与者：客户（client），调用者（invoking object）和接收者（receiving object）。客户负责实例化命令并将其交给调用者。在前面的例子中，for循环中的代码就是客户。它通常被包装为一个对象，但也不是非这样不可。调用者接过命令并将其保存下来。它会在某个时候调用该命令对象的execute方法，或者将其交给另一个潜在的调用者。前例中的调用者就是UIButton类创建的按钮。用户点击它的时候，它就会调用命令对象的execute方法。接收者则是实际执行操作的对象。调用者进行“commandObject.execute()”这种形式的调用时，它所调用的方法将转而以“receiver.action()”这种形式调用恰当的方法。而接收者就是广告对象，它所能执行的操作要么是start方法，要么是stop方法。
183
184 客户创建命令，调用者执行该命令，接收者在命令执行时执行相应操作。
185 所有使用命令模式的系统都有客户和调用者，但不一定有接收者。
186 */
187
188 // 在命令模式中使用接口
189 // If no exception is thrown, youcan safely invoke the
190 // execute operation
191 someCommand.execute();
192
193 // 如果用必报来创建命令函数，只需检查是否为函数即可
194 if (typeof someCommand !== 'function') {
195 throw new Error('Command isn\'t a function');
196 }
197
198
199 // 命令对象的类型
200 /*
201 简单命令对象就是把现有接收者的操作（广告对象的start和stop方法）与调用者（按钮）绑定在一起。这类命令对象最简单，其模块程度也最高。它们与客户，接收者和调用者之间只是松散地偶合在一起：
202 */
203 // SimpleCommand, a loosely coupled, simple command class.
204 var SimpleCommand = function (receiver) {
205 this.receiver = receiver;
206 };
207 SimpleCommand.prototype.execute = function () {
208 this.receiver.action();
209 };
210
211 /*
212 另一种则是那种封装着一套复杂指令的命令对象。这种命令对象实际上没有接受者，因为它自己提供了操作的具体实现。它并不把操作委托给接收者实现，所有用于实现相关操作的代码都包含在其内部：
213 */
214 // ComplexCommand, a tightly coupled, complex command class.
215 var ComplexCommand = function () {
216 this.logger = new Logger();
217 this.xhrHandler = XhrManager.createXhrHandler();
218 this.parameters = {};
219 };
220 ComplexCommand.prototype = {
221 setParameter: function (key, value) {
222 this.parameters[key] = value;
223 },
224 execute: function () {
225 this.logger.log('Executing command');
226 var postArray = [];
227 for (var key in this.parameters) {
228 if (this.parameters.hasOwnProperty(key)) {
229 postArray.push(key + '=' + this.parameters[key]);
230 }
231 }
232 var postString = postArray.join('&');
233 this.xhrHandler.request(
234 'POST',
235 'script.php',
236 function () {
237 },
238 postString
239 );
240 }
241 };
242
243 /*
244 有些命令对象不但封装了接收者的操作，而且其execute方法中也具有一些实现代码。这类命令对象是一个灰色地带：
245 */
246 // GreyAreaCommand, somewhere between simple and complex
247 var GreyAreaCommand = function (receiver) {
248 this.logger = new Logger();
249 this.receiver = receiver;
250 };
251 GreyAreaCommand.prototype.execute = function () {
252 this.logger.log('Executing command');
253 this.receiver.prepareAction();
254 this.receiver.action();
255 };
256
257 /*
258 简单命令对象一般用来消除两个对象（接受着和调用者）之间的耦合，而复杂命令对象则一般用来封装不可分的或事务性的指令。
259 */
260
261 // 实例： 菜单项
262 // 菜单组合对象
263 /*
264 接下来要实现的事Menubar，Menu和MenuItem类，作为一个整体，他们要能显示所有可用操作，并且根据要求调用这些操作，Menubar和Menu都是组合对象类，而MenuItem则是叶类。Menubar类保存着所有Menu实例：
265 */
266 // MenuBar class, a composite
267 var MenuBar = function () {
268 this.menus = {};
269 this.element = document.createElement('ul');
270 this.element.style.display = 'none';
271 };
272 MenuBar.prototype = {
273 add: function (menuObject) {
274 this.menus[menuObject.name] = menuObject;
275 this.element.appendChild(this.menus[menuObject.name].getElement());
276 },
277 remove: function (name) {
278 delete this.menus[name];
279 },
280 getChild: function (name) {
281 return this.menus[name];
282 },
283 getElement: function () {
284 return this.element;
285 },
286 show: function () {
287 this.element.style.display = '';
288 for (var name in this.menus) {
289 this.menus[name].show();
290 }
291 }
292 };
293
294 // Menu class, a composite
295 var Menu = function (name) {
296 this.name = name;
297 this.items = {};
298 this.element = document.createElement('li');
299 this.element.style.display = 'none';
300 this.container = document.createElement('ul');
301 this.element.appendChild(this.container);
302 };
303 Menu.prototype = {
304 add: function (menuItemObject) {
305 this.items[menuItemObject.name] = menuItemObject;
306 this.container.appendChild(this.items[menuItemObject.name].getElement());
307 },
308 remove: function () {
309 delete this.items[name];
310 },
311 getChild: function (name) {
312 return this.items[name];
313 },
314 getElement: function () {
315 return this.element;
316 },
317 show: function () {
318 this.element.style.display = '';
319 for (var name in this.items) {
320 this.items[name].show();
321 }
322 }
323 };
324
325 // 调用者类
326 // MenuItem class, a leaf
327 var MenuItem = function (name, command) {
328 this.name = name;
329 this.element = document.createElement('li');
330 this.element.style.display = 'none';
331 this.anchor = document.createElement('a');
332 this.anchor.href = '#';
333 this.element.appendChild(this.anchor);
334 this.anchor.innerHTML = this.name;
335
336 addEvent(this.anchor, 'click', function (e) {
337 e = e || window.event;
338 if (typeof e.preventDefault === 'function') {
339 e.preventDefault();
340 } else {
341 e.returnValue = false;
342 }
343 command.execute();
344 });
345 };
346 MenuItem.prototype = {
347 add: function () {
348 },
349 remove: function () {
350 },
351 getChild: function () {
352 },
353 getElement: function () {
354 return this.element;
355 },
356 show: function () {
357 this.element.style.display = '';
358 }
359 };
360
361 // 命令类
362 // MenuCommand class, a command object
363 var MenuCommand = function (action) {
364 this.action = action;
365 };
366 MenuCommand.prototype.execute = function () {
367 this.action.action();
368 };
369
370
371 // Receiver objects, instantiated from existing classes
372 var Test1 = function () {
373 console.log('test1');
374 };
375 Test1.prototype = {
376 action: function () {
377 console.log('this is test1 fn1');
378 }
379 };
380 var Test2 = function () {
381 console.log('test2');
382 };
383 Test2.prototype = {
384 action: function () {
385 console.log('this is test2 fn1');
386 }
387 };
388 var Test3 = function () {
389 console.log('test3');
390 };
391 var test1 = new Test1();
392 var test2 = new Test2();
393 var test3 = new Test3();
394
395 // Create the menu bar
396 var appMenuBar = new MenuBar();
397
398 // The File menu
399 var fileMenu = new Menu('File');
400
401 var test1Command1 = new MenuCommand(test1);
402
403 fileMenu.add(new MenuItem('test1-1', test1Command1));
404
405 appMenuBar.add(fileMenu);
406
407 var insertMenu = new Menu('Insert');
408 var test2Command2 = new MenuCommand(test2);
409 insertMenu.add(new MenuItem('test2-1', test2Command2));
410
411 appMenuBar.add(insertMenu);
412
413 document.body.appendChild(appMenuBar.getElement());
414 appMenuBar.show();
415
416
417 (function () {
418 // 补偿式或者反操作式
419
420 // 取消操作和命令日志
421
422 // ReversibleCommand interface
423 var ReversibleCommand = new Interface('ReversibleCommand', ['execute', 'undo']);
424
425 // 接下来要做的是创建4个命令类，
426 // 它们分别用来向上下左右四个方向移动指针：
427 var MoveUp = function (cursor) {
428 this.cursor = cursor;
429 };
430 MoveUp.prototype = {
431 execute: function () {
432 this.cursor.move(0, -10);
433 },
434 undo: function () {
435 this.cursor.move(0, 10);
436 }
437 };
438
439 var MoveDown = function (cursor) {
440 this.cursor = cursor;
441 };
442 MoveDown.prototype = {
443 execute: function () {
444 this.cursor.move(0, 10);
445 },
446 undo: function () {
447 this.cursor.move(0, -10);
448 }
449 };
450
451 var MoveLeft = function (cursor) {
452 this.cursor = cursor;
453 };
454 MoveLeft.prototype = {
455 execute: function () {
456 this.cursor.move(-10, 0);
457 },
458 undo: function () {
459 this.cursor.move(10, 0);
460 }
461 };
462
463 var MoveRight = function (cursor) {
464 this.cursor = cursor;
465 };
466 MoveRight.prototype = {
467 execute: function () {
468 this.cursor.move(10, 0);
469 },
470 undo: function () {
471 this.cursor.move(-10, 0);
472 }
473 };
474
475 // 接收者，负责实现指针移动
476 // Cursor class 实现了命令类所要求的操作
477 var Cursor = function (width, height, parent) {
478 this.width = width;
479 this.height = height;
480 this.position = {
481 x: width / 2,
482 y: height / 2
483 };
484
485 this.canvas = document.createElement('canvas');
486 this.canvas.width = this.width;
487 this.canvas.height = this.height;
488 parent.appendChild(this.canvas);
489
490 this.ctx = this.canvas.getContext('2d');
491 this.ctx.fillStyle = '#cc0000';
492 this.move(0, 0);
493 };
494 Cursor.prototype.move = function (x, y) {
495 this.position.x += x;
496 this.position.y += y;
497
498 this.ctx.clearRect(0, 0, this.width, this.height);
499 this.ctx.fillRect(this.position.x, this.position.y, 3, 3);
500 };
501
502 // 下面这个装饰者的作用就是在执行一个命令之前先将其压栈
503 // UndoDecorator class
504 var UndoDecorator = function (command, undoStack) {
505 this.command = command;
506 this.undoStack = undoStack;
507 };
508 UndoDecorator.prototype = {
509 execute: function () {
510 this.undoStack.push(this.command);
511 this.command.execute();
512 },
513 undo: function () {
514 this.command.undo();
515 }
516 };
517
518 // 用户界面类，负责生成必要的HTML元素，并且为其注册click事件监听器，
519 // 这些监听器要么调用execute方法要么调用undo方法:
520 // CommandButton class
521 var CommandButton = function (label, command, parent) {
522 this.element = document.createElement('button');
523 this.element.innerHTML = label;
524 parent.appendChild(this.element);
525
526 addEvent(this.element, 'click', function () {
527 command.execute();
528 });
529 };
530
531 // UndoButton class
532 var UndoButton = function (label, parent, undoStack) {
533 this.element = document.createElement('button');
534 this.element.innerHTML = label;
535 parent.appendChild(this.element);
536
537 addEvent(this.element, 'click', function () {
538 if (undoStack.length === 0) return;
539 var lastCommand = undoStack.pop();
540 lastCommand.undo();
541 });
542 };
543 /*
544 像UndoDecorator类一样，UndoButton类的构造函数也需要把命令栈作为参数传入。这个栈其实就是一个数组。调用经UndoDecorator对象装饰过的命令对象的execute方法时这个命令对象会被压入栈。为了执行取消操作，取消按钮会从命令栈中弹出最近的命令并调用其undo方法。这将逆转刚执行过的操作。
545 */
546
547 // Implementation code
548 var body = document.body;
549 var cursor = new Cursor(400, 400, body);
550 var undoStack = [];
551
552 var upCommand = new UndoDecorator(new MoveUp(cursor), undoStack);
553 var downCommand = new UndoDecorator(new MoveDown(cursor), undoStack);
554 var leftCommand = new UndoDecorator(new MoveLeft(cursor), undoStack);
555 var rightCommand = new UndoDecorator(new MoveRight(cursor), undoStack);
556
557 var upButton = new CommandButton('Up', upCommand, body);
558 var downButton = new CommandButton('Down', downCommand, body);
559 var leftButton = new CommandButton('Left', leftCommand, body);
560 var rightButton = new CommandButton('Right', rightCommand, body);
561 var undoButton = new UndoButton('Undo', body, undoStack);
562 }());
563
564
565 (function () {
566 // 使用命令日志实现不可逆操作的取消
567 /*
568 在画布上画线很容易，不过要取消这条线的绘制是不可能的。从一个点到另一个点的移动这种操作具有精确的对立操作，执行后者的结果看起来就像前者被逆转了一样。但是对于从A到B画一条线这种操作，从B到A再画一条线是无法逆转前一操作的，这只不过是在第一条线的上方又画一条线而已。
569
570 取消这种操作的唯一办法是清除状态，然后把之前执行过的操作（不含最近那个）一次重做一遍。这很容易办到，为此需要把所有执行过的命令记录在栈中。要想取消一个操作，需要做的就是从栈中弹出最近那个命令并弃之不用，然后清理画布并从头开始重新执行记录下来的所有命令。
571 */
572
573 // Movement commands
574 var MoveUp = function (cursor) {
575 this.cursor = cursor;
576 };
577 MoveUp.prototype = {
578 execute: function () {
579 this.cursor.move(0, -10);
580 }
581 };
582
583 var MoveDown = function (cursor) {
584 this.cursor = cursor;
585 };
586 MoveDown.prototype = {
587 execute: function () {
588 this.cursor.move(0, 10);
589 }
590 };
591
592 var MoveLeft = function (cursor) {
593 this.cursor = cursor;
594 };
595 MoveLeft.prototype = {
596 execute: function () {
597 this.cursor.move(-10, 0);
598 }
599 };
600
601 var MoveRight = function (cursor) {
602 this.cursor = cursor;
603 };
604 MoveRight.prototype = {
605 execute: function () {
606 this.cursor.move(10, 0);
607 }
608 };
609
610 // Cursor class, with an internal command stack
611 var Cursor = function (width, height, parent) {
612 this.width = width;
613 this.height = height;
614 this.commandStack = [];
615
616 this.canvas = document.createElement('canvas');
617 this.canvas.width = this.width;
618 this.canvas.height = this.height;
619 parent.appendChild(this.canvas);
620
621 this.ctx = this.canvas.getContext('2d');
622 this.ctx.strokeStyle = '#cc0000';
623 this.move(0, 0);
624 };
625 Cursor.prototype = {
626 move: function (x, y) {
627 var that = this;
628 this.commandStack.push(function () {
629 that.lineTo(x, y);
630 });
631 this.executeCommands();
632 },
633 lineTo: function (x, y) {
634 this.position.x += x;
635 this.position.y += y;
636 this.ctx.lineTo(this.position.x, this.position.y);
637 },
638 executeCommands: function () {
639 this.position = {
640 x: this.width / 2,
641 y: this.height / 2
642 };
643 this.ctx.clearRect(0, 0, this.width, this.height);
644 this.ctx.beginPath();
645 this.ctx.moveTo(this.position.x, this.position.y);
646 for (var i = 0, len = this.commandStack.length; i < len; i++) {
647 this.commandStack[i]();
648 }
649 this.ctx.stroke();
650 },
651 undo: function () {
652 this.commandStack.pop();
653 this.executeCommands();
654 }
655 };
656
657 // UndoButton class
658 var UndoButton = function (label, parent, cursor) {
659 this.element = document.createElement('button');
660 this.element.innerHTML = label;
661 parent.appendChild(this.element);
662 addEvent(this.element, 'click', function () {
663 cursor.undo();
664 });
665 };
666 // CommandButton class
667 var CommandButton = function (label, command, parent) {
668 this.element = document.createElement('button');
669 this.element.innerHTML = label;
670 parent.appendChild(this.element);
671
672 addEvent(this.element, 'click', function () {
673 command.execute();
674 });
675 };
676
677 var body = document.body;
678 var cursor = new Cursor(400, 400, body);
679
680 var upCommand = new MoveUp(cursor);
681 var downCommand = new MoveDown(cursor);
682 var leftCommand = new MoveLeft(cursor);
683 var rightCommand = new MoveRight(cursor);
684
685 var upButton = new CommandButton('Up', upCommand, body);
686 var downButton = new CommandButton('Down', downCommand, body);
687 var leftButton = new CommandButton('Left', leftCommand, body);
688 var rightButton = new CommandButton('Right', rightCommand, body);
689 var undoButton = new UndoButton('Undo', body, cursor);
690 }());
691
692 (function () {
693 // 宏命令
694 /*
695 去饭店吃饭过程。
696
697 客户： 只负责发出命令，就是点菜操作。
698 命令对象： 就是点的菜。
699 服务员： 知道真正的接收者是谁，同时持有菜单，当你点菜完毕，服务员就启动命令执行。
700 后厨， 凉菜部： 相当于接收者。
701
702 菜单命令包含多个命令对象
703 */
704
705 // 坐热菜的厨师
706 var HotCook = function () {
707 };
708 HotCook.prototype = {
709 cook: function (name) {
710 console.log('本厨师正在做：' + name);
711 }
712 };
713
714 // 做凉菜的厨师
715 var CoolCook = function () {
716 };
717 CoolCook.prototype = {
718 cook: function (name) {
719 console.log('凉菜' + name + '已经做好，本厨师正在装盘。');
720 }
721 }
722
723 // 定义了三道菜，每道菜是一个命令对象
724
725 var DuckCommand = function () {
726 this.cookApi = null;
727 };
728 DuckCommand.prototype = {
729 constructor: DuckCommand,
730 setCookApi: function (cookApi) {
731 this.cookApi = cookApi;
732 },
733 execute: function () {
734 this.cookApi.cook('北京烤鸭');
735 }
736 };
737
738 var ChopCommand = function () {
739 this.cookApi = null;
740 };
741 ChopCommand.prototype = {
742 constructor: ChopCommand,
743 setCookApi: function (cookApi) {
744 this.cookApi = cookApi;
745 },
746 execute: function () {
747 this.cookApi.cook('绿豆排骨煲');
748 }
749 };
750
751 var PorkCommand = function () {
752 this.cookApi = null;
753 };
754 PorkCommand.prototype = {
755 constructor: PorkCommand,
756 setCookApi: function (cookApi) {
757 this.cookApi = cookApi;
758 },
759 execute: function () {
760 this.cookApi.cook('蒜泥白肉');
761 }
762 };
763
764 // 菜单对象，宏命令对象
765 var MenuCommand = function () {
766 var col = [];
767
768 this.addCommand = function (cmd) {
769 col.push(cmd);
770 };
771
772 this.execute = function () {
773 for (var i = 0 , len = col.length; i < len; i++) {
774 col[i].execute();
775 }
776 };
777 };
778
779 // 服务员，负责组合菜单，负责组装每个菜和具体的实现者。
780 var Waiter = function () {
781 var menuCommand = new MenuCommand();
782
783 // 客户点菜
784 this.orderDish = function (cmd) {
785 var hotCook = new HotCook();
786 var coolCook = new CoolCook();
787
788 if (cmd instanceof DuckCommand) {
789 cmd.setCookApi(hotCook);
790 } else if (cmd instanceof ChopCommand) {
791 cmd.setCookApi(hotCook);
792 } else if (cmd instanceof PorkCommand) {
793 cmd.setCookApi(coolCook);
794 }
795
796 menuCommand.addCommand(cmd);
797 };
798
799 // 点菜完毕
800 this.orderOver = function () {
801 menuCommand.execute();
802 };
803 };
804
805 var waiter = new Waiter();
806 var chop = new ChopCommand();
807 var duck = new DuckCommand();
808 var pork = new PorkCommand();
809
810 waiter.orderDish(chop);
811 waiter.orderDish(duck);
812 waiter.orderDish(pork);
813
814 waiter.orderOver();
815
816 }());
817
818 (function () {
819 // 队列请求
820
821 function createCommand(name) {
822 function Command(tableNum) {
823 this.cookApi = null;
824 this.tableNum = tableNum;
825 }
826
827 Command.prototype = {
828 setCookApi: function (cookApi) {
829 this.cookApi = cookApi;
830 },
831 execute: function () {
832 this.cookApi.cook(this.tableNum, name);
833 }
834 };
835
836 return Command;
837 }
838
839 var ChopCommand = createCommand('绿豆排骨煲');
840 var DuckCommand = createCommand('北京烤鸭');
841
842 var CommandQueue = {
843 cmds: [],
844 addMenu: function (menu) {
845 var cmds = menu.getCommands();
846 for (var i = 0, len = cmds.length; i < len; i++) {
847 this.cmds.push(cmds[i]);
848 }
849 },
850 getOneCommand: function () {
851 return this.cmds.length ? this.cmds.shift() : null;
852 }
853 };
854
855 var MenuCommand = function () {
856 this.col = [];
857 };
858 MenuCommand.prototype = {
859 addCommand: function (cmd) {
860 this.col.push(cmd);
861 },
862 setCookApi: function (cookApi) {
863 },
864 getTableNum: function () {
865 return 0;
866 },
867 getCommands: function () {
868 return this.col;
869 },
870 execute: function () {
871 CommandQueue.addMenu(this);
872 }
873 };
874
875 var HotCook = function (name) {
876 this.name = name;
877 };
878 HotCook.prototype = {
879 cook: function (tableNum, name) {
880 var cookTime = parseInt(10 * Math.random() + 3);
881 console.log(this.name + '厨师正在为' + tableNum + '号桌做：' + name);
882
883 var me = this;
884 setTimeout(function () {
885 console.log(me.name + '厨师为' + tableNum + '号桌做好了：' + name + '，共计耗时=' + cookTime + '秒');
886 }, cookTime * 1000);
887 },
888 run: function () {
889 var me = this;
890 setTimeout(function () {
891 var cmd;
892
893 while ((cmd = CommandQueue.getOneCommand())) {
894 cmd.setCookApi(me);
895 cmd.execute();
896 }
897 }, 1000);
898 }
899 };
900
901 var Waiter = function () {
902 this.menuCommand = new MenuCommand();
903 };
904 Waiter.prototype = {
905 orderDish: function (cmd) {
906 this.menuCommand.addCommand(cmd);
907 },
908 orderOver: function () {
909 this.menuCommand.execute();
910 }
911 };
912
913 var c1 = new HotCook('张三');
914 c1.run();
915
916 for (var i = 0; i < 5; i++) {
917 var waiter = new Waiter();
918 var chop = new ChopCommand(i);
919 var duck = new DuckCommand(i);
920
921 waiter.orderDish(chop);
922 waiter.orderDish(duck);
923
924 waiter.orderOver();
925 }
926
927 }());
928
929 function test() {
930 // 日志请求
931 // TODO 该示例在写入文件内容的时候并不能把实例的原型对象序列化，
932 // 因此读取文件内容后，反序列化后没有原型对应的方法
933 var fs = require('fs');
934 var Promise = require('d:\\node\\node_modules\\rsvp');
935
936 var FileOpeUtil = {
937 readFile: function (pathName) {
938 var def = Promise.defer();
939
940 fs.open(pathName, 'r', function opened(err, fd) {
941 if (err) {
942 def.reject();
943 fs.close(fd);
944 throw err;
945 }
946
947 var readBuffer = new Buffer(1024);
948 var bufferOffset = 0;
949 var bufferLength = readBuffer.length;
950 var filePosition = null;
951
952 fs.read(
953 fd,
954 readBuffer,
955 bufferOffset,
956 bufferLength,
957 filePosition,
958 function read(err, readBytes) {
959 if (err) {
960 def.reject(err);
961 fs.close(fd);
962 return;
963 }
964
965 if (readBytes >= 0) {
966 try {
967 def.resolve(JSON.parse(readBuffer.slice(0, readBytes).toString('utf8')));
968 } catch (e) {
969 def.reject(e);
970 }
971
972 fs.close(fd);
973 }
974 }
975 );
976 });
977
978 return def.promise;
979 },
980 writeFile: function (pathName, list) {
981 var def = Promise.defer();
982
983 fs.open(pathName, 'w', function opened(err, fd) {
984 if (err) {
985 def.reject();
986 fs.close(fd);
987 throw err;
988 }
989
990 var writeBuffer = new Buffer(JSON.stringify(list));
991 var bufferPosition = 0;
992 var bufferLength = writeBuffer.length;
993 var filePosition = null;
994
995 fs.write(
996 fd,
997 writeBuffer,
998 bufferPosition,
999 bufferLength,
1000 filePosition,
1001 function wrote(err, written) {
1002 if (err) {
1003 def.reject(err);
1004 fs.close(fd);
1005 return;
1006 }
1007
1008 console.log('wrote ' + written + ' bytes');
1009 def.resolve(written);
1010 fs.close(fd);
1011 }
1012 );
1013 });
1014
1015 return def.promise;
1016 }
1017 };
1018
1019 function createCommand(name) {
1020 function Command(tableNum) {
1021 this.cookApi = null;
1022 this.tableNum = tableNum;
1023 }
1024
1025 Command.prototype = {
1026 setCookApi: function (cookApi) {
1027 this.cookApi = cookApi;
1028 },
1029 execute: function () {
1030 this.cookApi.cook(this.tableNum, name);
1031 }
1032 };
1033
1034 return Command;
1035 }
1036
1037 var ChopCommand = createCommand('绿豆排骨煲');
1038 var DuckCommand = createCommand('北京烤鸭');
1039
1040 var MenuCommand = function () {
1041 this.col = [];
1042 };
1043 MenuCommand.prototype = {
1044 addCommand: function (cmd) {
1045 this.col.push(cmd);
1046 },
1047 setCookApi: function (cookApi) {
1048 },
1049 getTableNum: function () {
1050 return 0;
1051 },
1052 getCommands: function () {
1053 return this.col;
1054 },
1055 execute: function () {
1056 CommandQueue.addMenu(this);
1057 }
1058 };
1059
1060 var HotCook = function (name) {
1061 this.name = name;
1062 };
1063 HotCook.prototype = {
1064 cook: function (tableNum, name) {
1065 var cookTime = parseInt(10 * Math.random() + 3);
1066 console.log(this.name + '厨师正在为' + tableNum + '号桌做：' + name);
1067
1068 var me = this;
1069 setTimeout(function () {
1070 console.log(me.name + '厨师为' + tableNum + '号桌做好了：' + name + '，共计耗时=' + cookTime + '秒');
1071 }, cookTime * 1000);
1072 },
1073 run: function () {
1074 var me = this;
1075 setTimeout(function () {
1076 var cmd;
1077
1078 while ((cmd = CommandQueue.getOneCommand())) {
1079 cmd.setCookApi(me);
1080 cmd.execute();
1081 break;
1082 }
1083 }, 1000);
1084 }
1085 };
1086
1087 var Waiter = function () {
1088 this.menuCommand = new MenuCommand();
1089 };
1090 Waiter.prototype = {
1091 orderDish: function (cmd) {
1092 this.menuCommand.addCommand(cmd);
1093 },
1094 orderOver: function () {
1095 this.menuCommand.execute();
1096 }
1097 };
1098
1099
1100 var CommandQueue = {
1101 cmds: [],
1102 addMenu: function (menu) {
1103 var cmds = menu.getCommands();
1104 for (var i = 0, len = cmds.length; i < len; i++) {
1105 this.cmds.push(cmds[i]);
1106 }
1107 FileOpeUtil.writeFile('./test.txt', this.cmds);
1108 },
1109 getOneCommand: function () {
1110 var cmd = null;
1111
1112 if (this.cmds.length) {
1113 cmd = this.cmds.shift();
1114 FileOpeUtil.writeFile('./test.txt', this.cmds);
1115 }
1116
1117 return cmd;
1118 }
1119 };
1120
1121 var FILE_NAME = './test.txt';
1122
1123 FileOpeUtil.readFile(FILE_NAME)
1124 .then(function (data) {
1125 console.log(data);
1126 data.map(function () {
1127
1128 });
1129
1130 CommandQueue.cmds = data;
1131 main();
1132 }, function () {
1133 main();
1134 });
1135
1136 function main() {
1137 var c1 = new HotCook('张三');
1138 c1.run();
1139
1140 for (var i = 0; i < 5; i++) {
1141 var waiter = new Waiter();
1142 var chop = new ChopCommand(i);
1143 var duck = new DuckCommand(i);
1144
1145 waiter.orderDish(chop);
1146 waiter.orderDish(duck);
1147
1148 waiter.orderOver();
1149 }
1150 }
1151 }
1152
1153 /*
1154 用于崩溃恢复的命令日志
1155
1156 命令日志的一个有趣的用途是在程序崩溃后恢复其状态。在前面这个示例中，可以用XHR把经过序列化处理的命令记录到服务器上。用户下次访问该网页的时候，系统可以找出这些命令并用其将画布上的图案精确恢复到浏览器关闭时的状态。这可以替用户把应用程序状态保管下来，以便其撤销先前的任何一次浏览器会话中执行的操作。如果应用系统比较复杂，那么这种类型的命令日志会很大的存储需求。为此你可以提供一个按钮，用户可以用它提交到当时为止的所有操作，从而清空命令栈。
1157 */
1158
1159 /*
1160 命令模式的适用场合
1161
1162 1.如果需要抽象出需要执行的动作，并参数化这些对象，可以选用命令模式。将这些需要执行的动作抽象成为命令，然后实现命令的参数化配置。
1163 2.如果需要在不同的时刻指定，排列和执行请求。将这些请求封装成为命令对象，然后实现请求队列化。
1164 3.如果需要支持取消操作，可以选用，通过管理命令对象，能很容易的实现命令的恢复和重做功能。
1165 4.如果需要支持当系统奔溃时，能将系统的操作功能重新执行一遍时。将这些操作功能的请求封装成命令对象，然后实现日志命令，就可以在系统恢复以后，通过日志获取命令列表，从而重新执行一遍功能。
1166 5.在需要事务的系统中，命令模式提供了对事务进行建模的方法。
1167
1168
1169 命令模式之利
1170
1171 1.更松散的耦合
1172 命令模式使得发起命令的对象--客户端，和具体实现命令的对象--接收者对象完全解耦，也就是说发起命令的对象完全不知道具体实现对象是谁，也不知道如何实现。
1173 2.更动态的控制
1174 命令模式把请求封装起来，可以动态地对它进行参数化，队列花和日志化等操作，从而使得系统更灵活。
1175 3.很自然的复合命令
1176 很容易地组合符合命令，也就是宏命令。
1177 4.更好的扩展性
1178
1179
1180
1181 命令模式之弊
1182
1183 如果一个命令对象只包装了一个方法调用，而且其唯一目的就是这层对象包装的话，那么这种做法是一种浪费。如果你不需要命令模式给予的任何额外特性，也不需要具有一致接口的类所带来的模块性，那么直接使用方法引用而不是完整的命令对象也许更恰当。命令对象也会增加代码调试的难度，因为在应用了命令模式之后原有的方法之上又多了一层可能出错的代码。
1184
1185
1186 相关模式
1187
1188 命令模式和组合模式
1189 可以组合使用
1190 宏命令的功能就可以使用组合模式。
1191
1192 命令模式和备忘录模式
1193 可以组合使用
1194 在实现可撤销功能时，如果采用保存命令执行前的状态，撤销的时候就把状态恢复，就可以考虑使用备忘录模式。
1195
1196 命令模式和模板方法模式
1197 命令模式可以作为模板方法的一种替代模式，也就是说命令模式可以模仿实现模板方法模式的功能。
1198 */
1199
1200
1201 /* Title: Command
1202 Description: creates objects which encapsulate actions and parameters
1203 */
1204
1205 (function () {
1206
1207 var CarManager = {
1208
1209 /* request information */
1210 requestInfo: function (model, id) {
1211 return 'The purchase info for ' + model + ' with ID ' + id + ' is being processed...';
1212 },
1213
1214 /* purchase the car */
1215 buyVehicle: function (model, id) {
1216 return 'You have successfully purchased Item ' + id + ', a ' + model + '.';
1217 }
1218
1219 };
1220
1221 CarManager.execute = function (commad) {
1222 return CarManager[commad.request](commad.model, commad.carID);
1223 };
1224
1225 var actionA = CarManager.execute({request: 'requestInfo', model: 'Ford Mondeo', carID: '543434'});
1226 console.log(actionA);
1227 var actionB = CarManager.execute({request: 'buyVehicle', model: 'Ford Mondeo', carID: '543434'});
1228 console.log(actionB);
1229
1230 })();
1231
1232
1233 // http://www.joezimjs.com/javascript/javascript-design-patterns-command/
1234 var EnableAlarm = function (alarm) {
1235 this.alarm = alarm;
1236 }
1237 EnableAlarm.prototype.execute = function () {
1238 this.alarm.enable();
1239 }
1240
1241 var DisableAlarm = function (alarm) {
1242 this.alarm = alarm;
1243 }
1244 DisableAlarm.prototype.execute = function () {
1245 this.alarm.disable();
1246 }
1247
1248 var ResetAlarm = function (alarm) {
1249 this.alarm = alarm;
1250 }
1251 ResetAlarm.prototype.execute = function () {
1252 this.alarm.reset();
1253 }
1254
1255 var SetAlarm = function (alarm) {
1256 this.alarm = alarm;
1257 }
1258 SetAlarm.prototype.execute = function () {
1259 this.alarm.set();
1260 }
1261
1262 var alarms = [/* array of alarms */],
1263 i = 0, len = alarms.length;
1264
1265 for (; i < len; i++) {
1266 var enable_alarm = new EnableAlarm(alarms[i]),
1267 disable_alarm = new DisableAlarm(alarms[i]),
1268 reset_alarm = new ResetAlarm(alarms[i]),
1269 set_alarm = new SetAlarm(alarms[i]);
1270
1271 new Button('enable', enable_alarm);
1272 new Button('disable', disable_alarm);
1273 new Button('reset', reset_alarm);
1274 new Button('set', set_alarm);
1275 }
1276
1277
1278 var makeEnableCommand = function (alarm) {
1279 return function () {
1280 alarm.enable();
1281 }
1282 }
1283
1284 var makeDisableCommand = function (alarm) {
1285 return function () {
1286 alarm.disable();
1287 }
1288 }
1289
1290 var makeResetCommand = function (alarm) {
1291 return function () {
1292 alarm.reset();
1293 }
1294 }
1295
1296 var makeSetCommand = function (alarm) {
1297 return function () {
1298 alarm.set();
1299 }
1300 }
1301
1302 </script>
1303 </body>
1304 </html>
浙公网安备 33010602011771号